semantic code for radio buttons help.

[bazz]

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]

<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]

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]

Originally Posted by bazz

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]

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]

Thanks all of you. workin' a treat now.

bazz