473,320 Members | 1,976 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

vertically aligning radio buttons with a header

I'm having difficulty getting the radio buttons to align vertically
with one another and the header (1 2 3 4 5) at the top. Ideally each
radio button will be directly below the one above it and the number 1
will be atop the first radio button starting at the left. Any
thoughts on how to achieve this?

<html>
<head>
<title></title>
<style type="text/css">
label {display:block; float:left; width: 130px; padding: 0;
margin: 5px 0 0; text-align: right;}
#categories {border:1px solid #000; text-align:center; font-
weight:bold;
letter-spacing:0.55em; }
#rank-input {text-align:center; border:1px solid #000; padding-left:
1em;
width:100%; height:3.0em; vertical-align:middle;}
</style>
</head>
<body>
<div id="categories">1 2 3 4 5</div>
<label for="test">Test1:</label>
<div id="rank-input">Bad&nbsp;
<img src="images/frown.gif" title="bad" />
<input type="radio" value="1" name="1" />
<input type="radio" value="2" name="1" />
<input type="radio" value="3" name="1" />
<input type="radio" value="4" name="1" />
<input type="radio" value="5" name="1" />
<img src="images/smile.gif" title="good" />&nbsp;Good
</div>
<label for="test">Test2:</label>
<div id="rank-input">Worse&nbsp;
<img src="images/frown.gif" title="bad" />
<input type="radio" value="1" name="2" />
<input type="radio" value="2" name="2" />
<input type="radio" value="3" name="2" />
<input type="radio" value="4" name="2" />
<input type="radio" value="5" name="2" />
<img src="images/smile.gif" title="good" />&nbsp;Better
</div>
<label for="test">Test3:</label>
<div id="rank-input">Terrible&nbsp;
<img src="images/frown.gif" title="bad" />
<input type="radio" value="1" name="3" />
<input type="radio" value="2" name="3" />
<input type="radio" value="3" name="3" />
<input type="radio" value="4" name="3" />
<input type="radio" value="5" name="3" />
<img src="images/smile.gif" title="good" />&nbsp;Great
</div>
</body>
</html>

Feb 17 '07 #1
4 15869
Greg Scharlemann wrote:
I'm having difficulty getting the radio buttons to align vertically
with one another and the header (1 2 3 4 5) at the top.
Use a table

--
Berg
Feb 18 '07 #2
>
Use a table
I am trying to do it using CSS and without having to individually pad
each row on the left side to get the columns to line up. There has
got to be a way...

Feb 18 '07 #3
Scripsit Greg Scharlemann:
>Use a table
I am trying to do it using CSS and without having to individually pad
each row on the left side to get the columns to line up. There has
got to be a way...
What makes you think there has got to be a way? There are myriads of things
that just cannot be done in CSS.

Radio buttons have idiosyncratic renderings. You can apply vertical-align to
them, but you cannot expect consistent results, since you cannot know what
is the widget that you are centering - is it the circle, or a hypothetical
box containing the circle, or something quite different. (There is no
specification of what a radio button _should_ or _shall_ look like.)

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Feb 18 '07 #4
Greg Scharlemann wrote:
>>
Use a table
I am trying to do it using CSS and without having to individually pad
each row on the left side to get the columns to line up.
Rows and columns... sounds like tabular data to me. Use a table.

If you insist on using CSS, then consider what the content will look
like when stylesheets aren't applied. Will it still make sense?

--
Berg
Feb 18 '07 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
by: amith | last post by:
hi, i have some 10 radio buttons meant to take the rating from the user. ex: 1 2 3 4 5 6 7 8 9 10 looks O O O O O O O O O O 1 2 3 4 5 6 7 8 9 10 features O O O O O O O O O O
2
by: Jeff | last post by:
I'm trying to create a dynamic form that can have multiple groups of radio buttons (each group has two buttons) with the same name. Essentially, the form allows a user to enter as many names as...
4
by: Oscar Monteiro | last post by:
I Have to sets of Radio buttons like so: <input type="radio" name=p1 value=1> <input type="radio" name=p1 value=2> <input type="radio" name=p1 value=3> <br> <input type="radio" name=p2 value=1>...
6
by: Craig Keightley | last post by:
I have a page that has n number of radio groups (yes/No) how can i prevent the form being submitted if more than one radio group is not selected? By default all radio groups are unchecked ...
7
by: Scott Teglasi | last post by:
Hi all, I was curious as to how others whom have dealt with this problem have handled it. The problem is that I have a site design of a fixed width and height and want to center that content...
1
by: IchBin | last post by:
I am trying to set the state of a radio button. I do not see what I am doing wrong. Sorry, I am new at this.. I need another set of eyes to look at this snip of code. I am trying to set the radio...
10
by: IchBin | last post by:
I am trying to set the state of a radio button. I do not see what I am doing wrong. Sorry, I am new at this.. I need another set of eyes to look at this snip of code. I am trying to set the radio...
2
by: dpazza | last post by:
Hi, I'm creating a quiz on using a form in VB 2005 express. I have four sets of questions and answers (labels and radio buttons) and I change between which set of questions is currently shown on...
1
by: lolodede | last post by:
i have php page with 4 radio buttons and text box if user chose first two radio buttons then the next page need to display the results depending which radio buttons select but other two depend on...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.