Fragen zu bestimmten Ausrichtungen

[Johnny990]

Hi Leute!

Da ich mehr von der Programmierecke komme, habe ich bei folgendem eher meine Probleme: hier mal der Code:

<form method="post" action="" enctype="application/x-www-form-urlencoded" id="album"><dl class="zend_form">
<dt id="firstName-label"><label class="required" for="firstName">Vorname*</label></dt>
<dd id="firstName-element">
<input type="text" value="" id="firstName" name="firstName"/></dd>
<dt id="lastName-label"><label class="required" for="lastName">Nachname*</label></dt>
<dd id="lastName-element">
<input type="text" value="" id="lastName" name="lastName"/>
<p class="description">min. 4 und max. 20 Zeichen</p></dd>
<dt id="submit-label"> </dt><dd id="submit-element">
<input type="submit" value="submit" id="submitbutton" name="submit"/></dd></dl></form>

Will jetzt zum einen das label Element mittig zur Textbox und zum anderen die description class hinter der Textbox ausrichten. Kann mir da jemand css technisch helfen??? :)

 

[Efchen]

Du meinst, Du willst zwei Block-Elemente nebeneinander haben? Da eignet sich am besten "float".

Zur Umsetzuing von Formularen empfehle ich auch diesen Artikel:
Reine Formsache - Barrierefreie Formulare mit HTML, CSS & JavaScript : Einfach für Alle

 

[Johnny990]

Danke Dir Efchen! Das mit dem float war ein sehr guter Tipp!

Es sieht zumindest jetzt schon mal so aus:




Mein css:

label.required{
    font-weight: bold;
    float: left;
    padding-top: 3px;
}

input{
    margin-left: 30px;
    margin-top:  5px;
    border: 1px solid #d04c4c;
    width: 200px;
}

p.description{float:right}

Ich habe es bis jetzt nur noch nicht geschafft die inputelemente, aufgrund der unterchiedlichen labellänge untereinander zu bekommen. Hat jemand nen Tipp?

 

[Efchen]

Wenn man einem Element eine bestimmte Breite geben will, dann gibt man ihm eine bestimmte Breite (width).

Das ist schon alles :-)

Idealerweise orientiert man sich am längsten Label und gibt die Größe in "em" an, damit das bei Schriftgrößenveränderung auch mitwächst.

Steht aber alles in dem verlinkten Artikel!!!

 

[Johnny990]

ok super!
hat wunderbar geklappt und der Artikel ist echt empfehlenswert!

Nur noch eins, was ich nicht finden konnte: Wie richte ich das label immer mittig zur Textbox aus. Denn wenn ich das mit padding mache und neue Elemente hinzukommen muss ich das den Wert für padding immer von oben her wieder anpassen. Da mir ja alle anderen labels nach oben verschoben werden

 

[Efchen]

Das ist nicht so einfach, weil ein weit verbreiteter Browser display:table-cell nicht versteht und nur dann vertical-align:middle zieht.

Es gibt da aber sicher Hacks, die ich aber nicht im Kopf habe.