Formularfelder Ausrichten

[Da_Chris]

Hallo Leute.
Ich denke jeder hat sich schon mal Gedanken gemacht welcher Weg am sinnvollsten ist Formulare und deren Labels schön auszurichten.
Da würde mich eure Technik mal interessieren.
Mit XHTML sind ja Tabellen mehr oder weniger in Ungnade gefallen was die Verwendung als Gruppierungselement angeht.
Aber wie macht ihr das denn damit die Labels links vom Feld stehen?

Meine Technik bisher 3 DIV 2x mit float im Style und 1x mit clear.

<div style="float:left;">Label: </div>
<div style="float:left;"><input type="text" name="test" value="" /></div>
<div style="clear:both;"></div>

Ich bin aber selber damit nicht wirklich zufrieden. Macht A zu viel schreibarbeit und B ist es etwas unübersichtlich und C lässt sich die Sache mit float und clear immer schlecht handeln.

Jetzt bin ich mal gespannt wie das so von anderen gemacht wird

 

[Maik]

Hi,

das Konstrukt liesse sich mit dem Listenelement auszeichnen:

<ul>
    <li>Label:</li>
    <li><input type="text" name="test" value="" /></li>
</ul>

ul {
list-style:none;
margin:0;
padding:0;
}
li {
display:inline;
}

mfg Maik

 

[Da_Chris]

Oh hehe naja es geht darum Label links vom Feld auszurichten...
Sorry hätte ich dazu sagen müssen.

EDIT: eben gesehen dass li auf display inline tatsächlich das label links ausrichtet....
Gibts noch mehr techniken?

 

[Maik]

Gibts noch mehr techniken?

Jo, um auf ein einfaches Handling bei float und clear zurückzukommen

<ul class="clearfix">
    <li>Label:</li>
    <li><input type="text" name="test" value="" /></li>
</ul>
<p>content</p>

li {
float:left;
}
.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */

mfg Maik

 

[Da_Chris]

mh also der code bringt im firefox fehler die dots sind noch zu sehen.
Und den CSS Code hab ich so noch nicht gesehen.... kannst du den bitte erklären?

 

[Maik]

mh also der code bringt im firefox fehler die dots sind noch zu sehen.

An dieser CSS-Regel aus meinem ersten Beispiel hat sich nichts verändert, d'rum hab ich sie eben in der Variante nicht mehr erwähnt:

ul {
list-style:none;
margin:0;
padding:0;
}

Und den CSS Code hab ich so noch nicht gesehen.... kannst du den bitte erklären?

Quelle: How To Clear Floats Without Structural Markup

mfg Maik

 

[Da_Chris]

cool werd ich mir anschauen. Wenn wer noch andere Ideen hat nur her damit

 

[Maik]

• CSS-Only, Table-less Forms
• Form layout
• Prettier Accessible Forms

sowie

• CSS-Based Forms: Modern Solutions
• Web Form Design: Modern Solutions and Creative Ideas

mfg Maik