Formulier; Radiobuttons & CSS

Door Arjan Kapteijn op 08-12-2008 11:56

4.083 views

Een formulier opmaken met CSS is leuk, ik heb vaker met veel plezier daarmee gestoeid. Maar nu ik bezig ben met een soort vragenlijst moet ik gebruik maken van radiobuttons en dat is opeens een stuk minder leuk.

Ik heb de volgende HTML code, is deze basis al goed? Heb ik een label nodig voor iedere radiobutton? Of voor een groep...

En hoe kan ik dit op een nette manier met CSS stylen, zodat de tekst die bij een radiobutton hoort niet 'onder' de radio button komt als die tekst te lang is?


<p><label for="1">Sed scelerisque sollicitudin turpis. Quisque in arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</label></p>
    
<input type="radio" name="1" value="1"  />
Sed scelerisque sollicitudin turpis<br />
    
<input type="radio" name="1" value="2"  />
volutpat condimentum, malesuada sed, neque<br />
    
<input type="radio" name="1" value="3"  />
sit amet lacus<br />

<p><label for="2">Duis odio augue, ullamcorper non, eleifend ac, malesuada tincidunt, massa. Sed pulvinar dolor sed neque.</label></p>
    
<input type="radio" name="2" value="4"  />
Aliquam purus nisi, rutrum eget, gravida non, laoreet vel, nisi<br />
    
<input type="radio" name="2" value="5"  />
Quisque ac sapien ut orci placerat vestibulum<br />
    
<input type="radio" name="2" value="6"  />
Curabitur turpis elit, scelerisque eget<br />

Arjan Kapteijn

08-12-2008 15:10

@ 08.12.2008 13:34 staat een stukje HTML, succes, ik blijf het lastig vinden :P.

Mitchell

08-12-2008 15:26

CSS


.radio-segment {
	clear: both;
}
.radio-segment input {
	float: left;
	width: 20px;
}
.radio-segment label {
	margin-left: 24px;
	display: block;
}

HTML


<div class="radio-segment">
        <input type="radio" name="1" value="2" id="12" />
        <label for="12">Sed scelerisque sollicitudin turpis. Quisque in arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed scelerisque sollicitudin turpis. Quisque in arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</label>
    </div>

Werkt voor mij in FF 3.0 en IE 7.. n_n

Arjan Kapteijn

08-12-2008 15:30

Thats it! Thanks! Nu kan ik gewoon lekker aan de slag met wat margins/paddings en andere leuke meuk!

Reageren

Inloggen om te reageren