Display radio buttons side by side with label underneath

[ethical]

Hi guys,

I am trying to style a radio button group using the form builder and CSS to display a radio button group (of 10 options 1-10) and i want them to appear all on the same line with the label underneath the respective button? Like a survey question/

e.g. (where o = radio button)

o  o  o  o  o  o  o  o  o   o
1  2  3  4  5  6  7  8  9  10

is this possible? also is it possible to add a smiley face at each end of the group?

using the latest formbuilder and 1.0.8 cmsms

OR is it possible to just build my own form using the fckeditor and if so how do i call the mailler?

thanks

john

[LaZzOo]

Does anyone have any input in this matter?
I'm wondering the same thing.. since my css-skills are quite poor..

[SideshowBob]

Hi,

I've never used form builder but the code below will produce what you want. Assuming form builder can create similar code then it's just a case of applying the style.

Code: Select all

<style type="text/css">
div#survey input {margin:0; padding:0;}
div#survey label {width:2em; padding:0; margin:0; float:left; text-align:center}
</style>


</__body>
<div id="survey">

  <label for="RadioGroup1_0">
  <input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_0" /><br />
  1</label>

  <label for="RadioGroup1_1">
  <input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_1" /><br />
    2</label>

   <label  for="RadioGroup1_2" >
    <input  type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_2" /><br />
   5</label>

 <label for="RadioGroup1_3">
    <input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_3" /><br />
  7  </label>

  <label for="RadioGroup1_4">
  <input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_4" /><br />
    8</label>

  <label for="RadioGroup1_5">
  <input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_5" /><br />
    10</label>

</div>
<__body>

You might want to tweak the padding and margins slightly but you get the idea.

HTH,
Bob

[michelG]

Bob,

It's a treat to see CSS applied so nicely. Many would have made it very complicate. Well worth a karma!


Michel

[SideshowBob]

aww, thanks!