Divs direkt unterinander darstellen

[Gunnar Bittersmann]

@@Nick:

nuqneH

Warum wird die Checkbox der zweiten Reihe auf der linken seite dargestellt, alle anderen aber auf der rechten Seite, wo doch der Code überall gleich ist?

Wird doch gar nicht.

Dein HTML-Code ist dennoch schlecht:

(1) Es ist nicht sinnvoll, Stilangaben inline in @style-Attributen zu tätigen. Besonders dann nicht, wenn man wiederholt für gleichartige Elemente dieselben Stile angeben will. Gib sämtliche Stilangaben http://de.selfhtml.org/css/formate/zentrale.htm@title=zentral im Stylesheet an! Vergiss, dass es das @style-Attribut überhaupt gibt!

Und gib sämtliche Stilangaben im Stylesheet an! Nicht mit missbilligten HTML-Elementen und -Attribute. Weg mit 'font'!

(2) Verwende 'http://de.selfhtml.org/html/formulare/strukturieren.htm#label@title=label' für Eingabefelder! Dann muss der Nutzer auch nicht auf die winzige Checkbox zielen (Fitts’s Law).

Derselbe @value-Wert für alle Checkboxen dürfte auch wenig sinnvoll sein.

Dein Markup sollte so aussehen:

<fieldset>  
    <legend>Teilnehmer</legend>  
    <div>  
        <input type="checkbox" name="teilnehmer" value="test1" id="teilnehmer1">  
        <label for="teilnehmer1">Vorname Nachname1</label>  
    </div>  
    <div>  
        <input type="checkbox" name="teilnehmer" value="test2" id="teilnehmer2">  
        <label for="teilnehmer2">Vorname Nachname2</label>  
    </div>  
    ⋮  
</fieldset>

Den Rest erledigt das Stylesheet:

div  
{  
    background: url(red-green.png) repeat-y 40% 0%;  
    background: -moz-linear-gradient(left, red, red 40%, green 40%, green);  
    background: -webkit-gradient(linear, left center, right center, from(red), color-stop(40%,red), color-stop(40%,green), to(green));  
    position: relative;  
    height: 1.2em;  
}  
  
input  
{  
    margin: 0;  
    position: absolute;  
    right: 60%;  
}  
  
label  
{  
    left: 40%;  
    padding-left: 1em;  
    position: absolute;  
}

Das Hintergrundbild red-green.png ist für Browser, die mit Gradienten noch nichts anzufangen wissen, und enthält Rot und Grün im Verhältnis 40:60, s. dieses Posting.

Qapla'