Um uns nun alle auf der selben Welle zu bewegen, brauchen wir den selben Ausgangspunkt. Ich habe dazu eine Datei mit einem Formular vorbereitet. Wie man im Quelltext sieht, ist das Formular in einem fieldset zusammengefasst. Alle Labels und Eingabefelder sind jeweils in einem Absatz.
Wichtig bei dieser Methode ist das Blockelement fieldset, denn danach richten sich die Eingabefelder. Ausserdem brauchen die Absätze mit den Eingabefeldern eine eigene class.
<p class="input"><input id="name" name="name" type="text" value="" /></p>
Im ersten Schritt versieht man diese Absätze die CSS-Property, die den Inhalt darin rechtsbündig anordet:
p.input{
text-align:right;
}
Damit sich diese Absätze direkt neben den Labels befinden, positioniert man sie relativ mit einem negativen top
p.input{
text-align:right;
top:-22px;
position:relative;
}
Der top-Wert richtet sich hierbei nur an die Schriftgöße, d.h. bei einer größeren Schrift muss dieser Wert auch steigen.
Damit sich das Layout etwas stabilisiert, bekommen die Eingabefelder und das Fieldset nun eine feste Breiten-Angabe.
input, textarea{
background-color:#fff;
font-family:Verdana, Arial, Helvetica, sans-serif;
border:1px solid #cecece;
width:450px;
padding:3px;
}
fieldset{
background:#eee;
border:1px solid #cecece;
width:580px;
padding:10px;
}
Jetzt müssten sich die Eingabefelder direkt neben den Labels befinden und das Formular wirkt nun, wie mit einer Tabelle gestaltet. Versieht man nun noch ein paar zusätzliche CSS-Properties um das Formular noch ein weinig zu verschönern, könnte es dann so aussehen: Gestaltetes Formular.
Ist zwar nicht schwer, aber sehr gut beschrieben.
Deine Entwicklung in Sachen Schreibstil is echt unglaublich.. Kompliment! :)
(oder etwa nen ghostwriter engagiert..? ;) )
Schöner Artikel. Trotdem habe ich natürlich noch einige Dinge daran auszusetzen ;)
1. Ich würde dem fieldset noch ein legend geben. Ist zwar nicht notwendig, sieht aber vollständiger aus.
2. Die p-Elemente sind meiner Meinung nach fehl am Platz, da es sich ja weder beim label noch bei dem Textfeld um einen ganzen Absatz handelt. Besser wäre es, beide Dinge (label + input) in den selben Absatz (oder Div) zu packen. Diese Container-Elemente komplett wegzulassen ist zwar möglich, aber sehr aufwändig: http://tests.themasta.com/formtable/
3. Normalerweise würde ich hier nicht relative Positionierung einsetzen, aber eigentlich ist es ja schon ganz praktisch, weil man ja dadurch automatisch den Abstand nach unten bekommt. Falls man den nicht haben wil, kann man ja top einfach durch margin-top ersetzen.
4. Wie du ja selbst schreibst, hängt der Wert, der bei top eingesetzt werden muss, von der Schriftgröße ab. Deshalb sollte man auch hier eine Maßeinheit wählen, die von der Schriftgröße abhängt, also die Verschiebung in em angeben. Man hat ja nie Kontrolle über die Schriftgröße, die beim Benutzer eingestellt ist, und deshalb kann es ja schnell passieren, dass das Layout verrutscht, wenn man mit Pixelwerten arbeitet.
Das war's auch schon wieder ;)
Ich finds toll, dass du so viele Beiträge postest, hier gibts ja echt ständig was Neues.
Hab ich doch glatt was vergessen: Du solltest den Input-Absätzen noch ein margin-left geben, damit die labels nicht überdeckt werden (und dadurch unklickbar sind).
Nun ja, erstmal danke für deinen ausführlichen Kommentar. Doch in zwei Sache hast du nicht ganz recht. Der Abstand nach oben durch em ist nicht realisierbar. Dies zeigte sich zumindest in meinen Versuchen. Und ob das label und input sich in einem oder 2 Absätzen befinden ist egal, denn die Frage ob input und label überhaupt einen Absatz bilden ist auch semantisch gesehen fraglich. Doch das Ganze wäre auch mit divs möglich :) Danke für dein Kompliment über den ständig aktualisierten Kontext *freu*
PS. Die Vergößerung um 2 Grad im Firefox lässt das Layout noch übersichtlich aussehen.
Der Abstand nach oben durch em ist realisierbar: http://tests.themasta.com/labuform/
Je zwei Absätze zu einem zusammenzufassen schafft meiner Meinung nach mehr Übersicht im Code. Natürlich ist es immer noch fraglich, ob ein Absatz überhaupt angebracht ist, aber dafür habe ich mit dem http://tests.themasta.com/formtable/ auch schon eine Lösung vorgeschlagen.
Huch, mich wundert es sehr, dass es bei mir nicht geklappt hat. Dann muss ich mich entschuldigen :)
Klasse Artikel, weiter so!
Hallo,
netter Artikel. Nur wie realisiere ich es, dass meine Submit Buttons nicht auch den Hover-Effekt verpasst bekommen?
Gruss Markus
<a href=" http://ero.3dn.ru/ ">???</a>
Marcel
26.10.2005
Sau geiler Artikel! Super!!