Formatierung bei Radiobuttons/ Checkboxen

Seite 12

1 lava

Hallo,
bei einer dynamisch generierten Webseite möchte ich Radiobuttons/Checkboxen einbauen. Ich weiß vorher nicht, wie lang der dahinterstehende Text jeweils wird, denn der wird aus einer Datenbank heraus gespeist - momentan sieht es blöd aus, wenn der Text zu lang ist und ein Zeilenumbruch erfolgt, weil dann der Folgetext unter dem Radiobutton/ der Checkbox nicht eingerückt ist. Jetzt steht diese Liste sowieso in einer Tabellenzelle, also frage ich mich, ob ich evtl. der Tabelle ein right-padding=...px (soviel px, wie halt so ein Button/Box breit ist) mitgeben kann und jedem <input type="radiobutton"....> bzw. <input type="checkbox"...> dann ein hskip= - .... px oder sowas in der Art? Leider kenne ich die richtige Syntax nicht. Oder gibt es andere, elegantere Lösungsmöglichkeiten?

Lava

2 Jörg Kruse

Hallo lava,

wenn ich dich richtig verstanden habe, sollen die Labels auch nach einem Umbruch bündig sein?

Ich würde das folgendermaßen probieren:

Die Radio Buttons / Checkboxen einerseits und die Labels andererseits als Blockelemente formatieren, erstere mit einem float:left, letztere mit einer entsprechenden margin-left Angabe

Beispiel für das CSS:

<style type="text/css">
/* <![CDATA[ */
.blablub input {
display:block;
float:left;
margin-right:10px;
}
.blablub label {
display:block;
margin-left:30px;
}
/* ]]> */
</style>

... und für das HTML:

<fieldset class="blablub">
<p><input type="radio" name="bla" value="1"/><label>Text<br/>über<br/>mehrere<br/>Zeilen</label></p>
<p><input type="radio" name="bla" value="2"/><label>Text</label></p>
</fieldset>

3 lava

Fein, das funktioniert so im Prinzip :)

Allerdings macht die Fieldbox mir auf einem grauen Hintergrund einen dünnen weißen Rahmen um die Multiple-Choice-Auswahl, den ich eigentlich nicht haben will - wie kriege ich den noch weg?

4 Jörg Kruse

Ist das vielleicht die border vom fieldset? Die kannst du per CSS entfernen, in diesem Beispiel:

.blablub {
border:none;
}

5 lava

Danke, hat funktioniert!

Allerdings sind jetzt die Zwischenräume zwischen einzelnen Multiple-Choice-Antworten größer geworden und außerdem sitzt der Radiobutton/ die Checkbox immer ein wenig tiefer als der Text - kann ich das auch mit CSS noch verbessern?

6 annex (Gast)

kann ich aktivierte checkboxen via css formatieren?
z.b. unaktivierte mit grauem und aktivierte mit weißem hintergrund.

7 Jörg Kruse

Hallo annex,

in CSS gibt es auch die Möglichkeit, Elemente nach ihren Attributen zu selektieren - siehe diesen Abschnitt auf SELFHTML:

http://de.selfhtml.org/css/formate/zentrale.htm#attributbedingte

Auf deinen Fall bezogen, könnte der Code demzufolge in etwa so ausschauen:

input[checked] {
/* Formate für aktivierte Checkbox */
}

Der IE wird dies allerdings wohl erst ab Version 7 interpretieren

... 3 Jahre und 2 Monate später ...

8 A.Kurz (Gast)

Hallo Jörg!
Ich will Radiobuttons mit Bildern machen und benutze den Firefox 4. Wenn ich dem Radiobutton ein BG-Bild verpasse klappt das ja, aber der Punkt muss weg. Weißt du wie ich das anstellen könnte?

Grüße A.Kurz

9 Jörg Kruse

Was für einen Punkt meinst du?

10 A.Kurz (Gast)

=) Den weißen Kreis in dem (wenner aktiviert ist) auch der Grüne drin ist.

Seite 12

nach oben weiter >