Checkbox: Beschriftung bricht um

[Viennamade]

Hallo,

ich habe innerhalb eines list-Elements ungefähr 30 Checkboxen. Ich glaube wirklich, daß in diesem Fall die Checkboxen einer Mehrfachauswahl-Auswahlliste (hä) vorzuziehen sind. Auf meinem Bildschirm sind innerhalb vom li-Element daher 3 Zeilen mit Checkboxen und deren Beschriftung vorhanden. Der Zeilenumbruch erfolgt aber auch dort wo die Beschriftung beginnt, also

<imput type="checkbox">Beschriftung
                       ^
Und das kommt nicht so gut. Ich habe erfolglos mit white-space probiert für die Input-Elemente.

Viennamade

[henman]

hallo,

<input type="checkbox">Beschriftung

mach ein label-element drum, so wie es sich bei Checkboxen mit Beschriftung "gehört", dann klappts auch mit white-space

grüße,
henman

[Viennamade]

hallo,

<input type="checkbox">Beschriftung

mach ein label-element drum, so wie es sich bei Checkboxen mit Beschriftung "gehört", dann klappts auch mit white-space

Wunderbar! Mein Quelltext sieht jetzt so aus:

<label for "bla" [code lang=css]style="white-space:nowrap;"><input id="bla" value="bli" />Bechriftung</label>[/code]

Die Labels stehen somit rechts der Checkboxen und valide ist das auch noch, Du hast recht, Label gehören sich für Checkboxen.

Vielen herzlichen Dank!
Viennamade

[Gunnar Bittersmann]

@@Viennamade:

nuqneH

Wunderbar! Mein Quelltext sieht jetzt so aus:
<label for "bla" [code lang=css]style="white-space:nowrap;"><input id="bla" value="bli" />Bechriftung</label>[/code]

Hast du das '=' zwischen 'for' und "bla" vergessen? Und wenn du 'input' in 'label' packst, bräuchtest du gar kein @for.

Ich find die Verschachtelung etwas seltsam und würde eher schreiben:
<input id="bla" value="bli" name="blu" type="checkbox"/> <label for="bla">Bechriftung</label>

Und die Style-Angabe natürlich nicht inline, sondern im Stylesheet.

Qapla'

[Viennamade]

Hallo!

Ich find die Verschachtelung etwas seltsam und würde eher schreiben:
<input id="bla" value="bli" name="blu" type="checkbox"/> <label for="bla">Bechriftung</label>

Ja aber dann habe ich doch genau das Problem, daß das Label u.U. in der nächsten Zeile steht (siehe Eingangsposting zu diesem Thread)?!?

Beste Grüße
Viennamade

[Gunnar Bittersmann]

@@Viennamade:

nuqneH

Ja aber dann habe ich doch genau das Problem, daß das Label u.U. in der nächsten Zeile steht (siehe Eingangsposting zu diesem Thread)?!?

Die 'white-space'-Eigenschaft ließe sich ja auch auf das Elternelement von 'input' und 'label' anwenden. Es handelt sich doch um eine Liste von Checkboxen?

<ul>  
  <li><input id="bla" value="bli" name="blu" type="checkbox"/> <label for="bla">Bechriftung</label></li>  
  …  
</ul>

Qapla'

[Viennamade]

Hallo Gunnar & Forumsgemeinde,

nuqneH

Ja aber dann habe ich doch genau das Problem, daß das Label u.U. in der nächsten Zeile steht (siehe Eingangsposting zu diesem Thread)?!?

Die 'white-space'-Eigenschaft ließe sich ja auch auf das Elternelement von 'input' und 'label' anwenden. Es handelt sich doch um eine Liste von Checkboxen?

ich habe das probiert, aber wenn ich die 'white-space'-Eigenschaft auf die li-Elemente, oder auch noch weiter oben auf das ol-Element anwende, dann erreiche ich nur, daß die Checkboxen in einer Zeile weit über den Bildschim nach rechts hinausgehen.
(Wobei die in Label-Tags eingeschlossenen Input-Elemente zu einem zufriedenstellendes Ergebnis führen, aber diese Möglichkeit eben unorthodox ist.)

PS.: Beim Recherchieren diesbzüglich bin ich auf eine Seite mit für mich unglaublichem Inhalt gestossen: Whitespace

Beste Grüße
Viennamade