...

View Full Version : semantic code for radio buttons help.



bazz
09-06-2010, 11:04 AM
Hi,

I have a 'column' of radio buttons but , as I have coded it, they don't align with each other on the vertical because they position themselves according to where their descriptive word ends.

like this



<td class='rightTd'>
<input type='hidden' name="file_sequence_1" value="1" />
<p>Text: <input type="radio" class='radio_button' name="text_or_list_1" checked='checked' value="text" /></p>
<p>List: <input type="radio" class='radio_button' name="text_or_list_1" value="list" /></p>
</td>



Tempted to put them into a table to lay them out better, I suspect that would be 'wrong'. How would you do it? <dl>, <ul> or does it really matter? It is only for use in a cms where a desktop or laptop would be used to view the pages - if that makes a difference, to your answer.

bazz

abduraooft
09-06-2010, 11:08 AM
<label>Text: <input type="radio" class='radio_button' name="text_or_list_1" checked='checked' value="text" /></label>
<label>List: <input type="radio" class='radio_button' name="text_or_list_1" value="list" /></label>
and then specifically set display:block; to these labels.

bazz
09-06-2010, 11:45 AM
Thanks Abduraooft.

However, that only makes the display the same as when I used the <p> tags.

I am trying to make the radio buttons align vertically with each other. here's am image, if I can work out how to publish it ;)


bazz

VIPStephan
09-06-2010, 11:57 AM
I am trying to make the radio buttons align vertically with each other.

Then change the markup to this:


<label for="radio1">Text:</label> <input type="radio" id="radio1" class='radio_button' name="text_or_list_1" checked='checked' value="text" />
<label for="radio2">List:</label> <input type="radio" id="radio2" class='radio_button' name="text_or_list_1" value="list" />


And float the labels to the left (don’t forget to clear) and apply the same width to both of ’em.

SB65
09-06-2010, 12:02 PM
Something like:


<label>Text: </label><input type="radio" class='radio_button' name="text_or_list_1" checked='checked' value="text" />
<label>List: </label><input type="radio" class='radio_button' name="text_or_list_1" value="list" />

with


label{float:left;clear:left;width:100px}
input{float:left}

would work.

EDIT: Ha, too slow....

bazz
09-06-2010, 12:29 PM
Thanks all of you. workin' a treat now.:thumbsup:

bazz



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum