• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Loginbox ala facebook

N

nvidia

New member
Hallo,
ich hab versucht so eine Loginbox nachzubauen mit einem Tabelle,
jetzt hätte ich ein paar Fragen
a), wenn über css padding:0px; margin:0px setzt, man kriegt den Tabellenabstand einfach nicht so klein, wie auf fb.
b) Wie kriegt man das hin, dass Text, inputFeld und die InputCheckbox auf einer geraden linie liegen?
Bei mir liegt die checkbox viel weiter rechts in der Zelle.
gruß nvidia
 
a.) Du musst in dein TABLE-Tag noch cellpadding="0" schreiben. Aber wenn du dich schon daran versuchst, lass lieber die Tables ganz weg und nimm DIV-Container
b.) Wenn du Tables benutzt, packst du jedes Element in sein eigenes TD und setzt valgin="middle".
 
HTML: 
<div style="float:left; width:200px">Username:</div><input type="text" name="username" />
Jetzt kannst du mit dem DIV-Container und dem Input-Feld im CSS solange spielen, bis sie auf "einer Linie" liegen.
 
Das ist ja mal hässlich... eine typische DIV-Suppe...
Wenn du tabellariscshe Daten hast (wie es z.B. bei der Facebook-Registrierung der Fall ist) kannst du getrost ein <table> nehmen - dafür sind sie ja gedacht.
Das Konstrukt oben ist Müll. Für so etwas braucht man ein inline-Element (am besten ein <label>), das man dann mittels display: inline-block auch in der Breite festlegen kann.
Auf eine Linie bekommt man die meisten Elemente indem man margin und padding auf 0 setzt.
 
Das Konstrukt oben ist Müll
Zum Vergrößern anklicken....
Mmh, Müll ist denke ich übertrieben. Bei Tables muss man bedenken, dass ab HTML 5 keine gängigen Attribute mehr unterstützt werden.

Auf eine Linie bekommt man die meisten Elemente indem man margin und padding auf 0 setzt.
Zum Vergrößern anklicken....
Das ist meistens nicht der Fall. In der Regel musst du dein Feld mit der Input-Beschreibung andere Padding-Werte geben, als deinem Input-Feld, da dein Input-Feld i.d.R. größer als die Schrift ist. Ich gehe davon aus, dass mit "auf einer Linie" gemeint ist, dass Beschreibung und Textfeld auf einer gedanklichen, gemeinsamen Linie liegen und nicht tatsächlich auf der gleichen Linie gemessen in Pixeln.
 
Ein DIV mit nur einer Zeile Inhalt und dann floaten... ich würde sowas in die Tonne treten. Alle "gängigen"-Attribute, auf die du anspielst sind sowieso besser mit CSS reguliert...

Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
input {
margin: 0;
padding: 0;
} 
</style>
</head>
<body>
<input> test<br>
test
</body>
</html>
- liegt alles auf einer Linie... und ich dachte, dass es sowieso um die Checkbox und das Textfeld geht...
 
ok leute bevor ihr noch die gewehre auspackt, ich erklär euch das mal
also ich mach so einen table mit den teilen
jetzt ist das problem
a) die checkbox viel weiter innen ist als das Textfeld
oder warte ich geb euch den code dann seht ihr das.
also a) die abstände sind immer noch zu groß und b)
die checkbox müsste bündig liegen mit dem textfeld und der beschreibung.
außerdem ist die beschreibung der checkbox auch n icht ganz auf einer linie.
also hier mein code:

Code: 
//css
.login_table { 
    margin:0;
	border:0;
	padding:0;
}
th, td {
	text-align:left;
	font-weight:normal;
}
#submitbutton {
	border: 1px solid #361e0c;
	background-color: #361e0c;
	color:#FFF;
}
.checkbox {
	vertical-align:middle;
}
<div class="login_container">
             	 <form name="login" action="" method="post" id="login_form">
   					<table class="login_table" padding="0">
             			<tr>
      						<th>
                             	<label for="username"> Benutzername </label>
                         	</th>
                        	 <th>
                              	<label for="password"> Passwort </label>
                			</th>
                  		</tr>
                         <tr>
                            <td>
                				<input type="text" name="username" id="username" tabindex="1"/>
                          	</td>
                       		<td>
                              	<input type="password" name="password" id="password" tabindex="2"/>
                            </td>
                          	<td>
                    			<input type="submit" value="Anmelden" id="submitbutton" tabindex="4" />
                         	</td>
                  		</tr>
       					 <tr>
       						 <td>
                       			<input type="checkbox" name="checkbox" value="0" id="checkbox" tabindex="3"/>
                          		<label for="checkbox"> Angemeldet bleiben </label>
                            </td>
                         	 <td>
                              	<a href="/resert.php" rel="nofollow"> Passwort vergessen? </a>
                         	</td>
                     	</tr>
                   	</table>
              	</form> 
          	</div>
aber so ganz haut das noch nicht hin, aber ich kriegs einfach nicht kleiner egal.
und irgentwie scheint er das v-algin sowieso zu ignorieren, das verändert nie irgentwas.
gruß nvidia
 
große klasse, sieht wunderbar aus danke.
eine frage hätte ich noch,
ein div ist erstmal eig. nur eine gedankliche gruppierung und visuelle?
weil solange ich dem div keine größe gebe, wird es nicht automatisch so groß, wie alle kindelemente, oder?
Wenn ich jetzt ein div habe, das z.b. ein sammlung von links darstellst. und ein div drüber, das eine feste größe hast, wie zentiere ich dann das erste div im zweiten?
weil bei vertical-algin:middle; angewendet auf das erste div, da passiert nichts.
 
Ein Div nimmt normalerweise immer die zur Verfügung stehende Breite ein. Wenn du es zentrieren willst musst du ihm also zuerst eine Breite geben und dann margin: 0 auto;
 
Moin, also besser guten Abend...
ich habe mich auch versucht, für eine Fanpage mit CSS zu arbeiten... wie gesagt versucht, ich bin absoluter HTML /Programierspasti..
jedenfalls habe ich versucht innerhalb der Reiter CSS "einzufügen" (also wurde mir vorher vorgegen) und die Ladezeit war so lange bzw. ging es erst gar nicht.

kennt sich da jmd. aus mit diesen Facebook Sachen und diesem FMBL oder wie das heißt?

Danke!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben