Tabelle über Bild legen

the|SonGoku

Hallo,

unzwar möchte ich mir hier gerade einen Login Bereich zu eine Statistikseite meines Teams programmieren. <a class="postlink" href="http://madarame.ma.ohost.de/Counter-Strike/index.php">http://madarame.ma.ohost.de/Counter-Strike/index.php</a>

Habe ich bereits im Praktikum gemacht, darauf bezieht sich die Frage nicht.

Mein Problem ist, dass die Tabelle, in der sich der Login befindet, leider immer UNTER dem Hintergrundbild befindet. Sie soll aber auf dem Bild sein.

Wie bewerkstellige ich das?

Mein Momentaner Code:

index.php

PHP

<?php 
ob_start(); 			// Um SESSION Variablen benutzer zu können
session_start(); 		// Um SESSION Variablen benutzer zu können
?>
<html>
<head>
<link href="forms.css" type="text/css" rel="stylesheet" /> <!-- CSS verweis -->
<title>Team - Statistik - Login</title></head>
<body>
<div style="position: absolute; top:0; left:0" id="id1">
<img src="http://img.banjig.net/d/bb/user_uploads/374188/counter-strike-3_202b0d77.jpg"></div>
<br><br><br><br><br><br><br><br><br><br><br>
<center>
<div id="id2">
<table width="500" height="50" border="1">
	<tr><td width="800" align="center"><font color="white" face="Arial" size="3">Statistik - LogIn</font></td></tr>
	<tr><td width="800"><br>
	<font color="white" face="Arial" size="3">
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	Nickname:&nbsp;&nbsp;</font> <input type="text" name="benutzer" value=""><br>
	<font color="white" face="Arial" size="3">
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Passwort:&nbsp;&nbsp;&nbsp;</font> 	   <input type="password" name="password" value=""><br>
	<font color="white" face="Arial" size="3"><br>
												 </td></tr></table></div>
</body>

Alles anzeigen

forms.css

Code

id1
{
 z-index:1;
}
id2
{
 z-index:2;
}

Könnt ihr mir helfen?

mit freundlichen Grüßen
the|SonGoku

YetiZwerg

Code

login{
background: url(Bild.png);
}

the|SonGoku

Hallo,

ich habe mal deinen Code genommen und ihn in die forms.css geschrieben und den restlichen Code der Datei gelöscht, da dieser mir unnötig schien.

Nachdem ich dieses ausprobierte, wurde kein Hintergrundbild angezeigt. Daher schrieb ich es so in meine index.php.

Code

<div style="position: absolute; top:0; left:0" id="login">
<img src="http://img.banjig.net/d/bb/user_uploads/374188/counter-strike-3_202b0d77.jpg"></div>

Dummerweise habe ich nun das selbe Problem wie zu anfang. Woran kann das liegen? Liegt der Fehler bei mir?

mit freundlichen Grüßen
theSonGoku

timtim

Hm, so konnte das auch nicht ganz funktionieren.

Yetizwerg meinte wohl, du sollst das bild als bg von div id 2 nehmen..

Also so in der art:

PHP

<?php
ob_start();          // Um SESSION Variablen benutzer zu können
session_start();       // Um SESSION Variablen benutzer zu können
?>
<html>
<head>
<link href="forms.css" type="text/css" rel="stylesheet" /> <!-- CSS verweis -->
<title>Team - Statistik - Login</title></head>
<body>




<div id="login">
<table width="500" height="50" border="1">
   <tr><td width="800" align="center"><font color="white" face="Arial" size="3">Statistik - LogIn</font></td></tr>
   <tr><td width="800"><br>
   <font color="white" face="Arial" size="3">
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   Nickname:&nbsp;&nbsp;</font> <input type="text" name="benutzer" value=""><br>
   <font color="white" face="Arial" size="3">
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Passwort:&nbsp;&nbsp;&nbsp;</font>       <input type="password" name="password" value=""><br>
   <font color="white" face="Arial" size="3"><br>
                                     </td></tr></table></div>
</body>







forms.css
Code:




#login{
    background-image: url(bild);
    width: (bildbreite);
    height: (bild h&ouml;he);
}

Alles anzeigen

Also nur 1 div, der inhalt eben dein Login, und als hintergrund des divs, das bild.

Allerdings solltest du das design nochmals überdenken, so viele leerzeichen sollten dort nicht stehen.

Greetz TimTim

the|SonGoku

Ja, das habe ich mir auch schon gedacht und es nervt auch ziemlich diese immer zu machen.
Kann ich das anders lösen? Z.B. über TAB´s?

Sören

Zitat von "the|SonGoku"

Ja, das habe ich mir auch schon gedacht und es nervt auch ziemlich diese immer zu machen.
Kann ich das anders lösen? Z.B. über TAB´s?

Code

#login {
    [...]
    text-align: center;
}

Damit sollte die Schrift zentriert sein.

the|SonGoku

Ja das war mir klar^^
Nur will ich ja die Eingabefelder untereinander stehen haben, und wenn ich das mit text-align: center mache, dann ist das ja alles zentriert...wenn ich das dann mit  ´s mache ist das ja komplett verrückt

Gibt es eigentlich eine Möglichkeit, einen kleineren Abstand als bei einem <br> zu bekommen? Denn ich muss jetzt die größe des Bildes, also das was angezeigt wird, über <br>´s bestimmten.
Siehe Code auf meiner Page.

mfG
theSonGoku

Sören

Den Abstand der Zeilen kannst du über padding ändern, du musst dann aber trotzdem noch <br/> nutzen.

Code

#login table {
  padding-bottom: [gewünschter Abstand];
}

Die Höhe des divs kannst du bestimmen, z.B. auf das Bild.

Code

#login {
  height: [gewünschter Wert];
}

Wenn du <br/> nutzt, kannst du auch text-align nutzen. Du wolltest doch alles zentriert haben, oder?

lauras

Mit line-height kannst du z.B. bei einzeiligen Sachen auch vertikal zentrieren, vielleicht hilft dir das weiter?

the|SonGoku

Ja also was ich vorhabe ist eben das es so ist

Name: EINGABEFELD
Password: EINGABEFELD

Es soll eben direkt untereinanderstehen, auch die Eingabefelder und diese sollen direkt über dem Button mit der gleichen länge wie die Felder sein.

€dit: Mist, hier sieht es nicht so aus wie es aussehen soll. Aber auf der Seite ist es schon fast so wie gewünscht.
<a class="postlink" href="http://madarame.ma.ohost.de/Counter-Strike/">http://madarame.ma.ohost.de/Counter-Strike/</a>

lauras

Du musst lernen, mit margin und padding zu arbeiten

Hast du Skype oder so, vielleicht kann ich oder jemand anderes dir im Chat mal etwas erklären

the|SonGoku

Naja, ich kann HTML, PHP und MySQL. Nur mit CSS kenne ich mich nicht so wirklich aus.^^
Wäre cool wenn mir das einer näher bringen könnte.

Sören

Guck mal im HTML-Seminar unter CSS (https://www.html-seminar.de/style-sheet.htm).

Da kannst du das sehr gut lernen. Erklären kann man dir das hier schlecht, würde zu lange dauern.

Anonymous

Ist das Thema noch Up to Date? Naja ich schreib mal meine Lösung hierzu:

Code

<form id="formularstyle" action="" method="post">
<p><input type="text" name="user" /></p>
<p><input type="password" name="pass" /></p>
<p><input type="submit" value="Login" /></p>
</form>

Durch die p tags sollte das annähernd so sein, über css musst du es noch anpassen. Hoffe das war die richtige antwort auf das thema(habs nur kurz überflogen)

timtim

Dann hasst du dich verlesen Verwebbt...

es gieng um etwas anderes..

nochmal genau hinschauen =)

Jetzt mitmachen!