Formatierung bei Radiobuttons/ Checkboxen
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
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
22.10.2007 17:09
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:
... und für das HTML:
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>22.10.2007 18:05 | geändert: 22.10.2007 18:06
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?
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?
23.10.2007 18:00
Ist das vielleicht die border vom fieldset? Die kannst du per CSS entfernen, in diesem Beispiel:
.blablub {
border:none;
}23.10.2007 18:08
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?
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?
24.10.2007 10:41 | geändert: 24.10.2007 17:22
kann ich aktivierte checkboxen via css formatieren?
z.b. unaktivierte mit grauem und aktivierte mit weißem hintergrund.
z.b. unaktivierte mit grauem und aktivierte mit weißem hintergrund.
13.03.2008 17:30
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:
Der IE wird dies allerdings wohl erst ab Version 7 interpretieren
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
13.03.2008 18:10 | geändert: 13.03.2008 18:11
Beitrag schreiben (als Gast)
Beim Verfassen des Beitrages bitte die Forenregeln beachten.
