Report

Positioning radio buttons [Solved]

Ask a question BrianGreen 904Posts Saturday January 17, 2015Registration date ModeratorStatus March 15, 2017 Last seen - Last answered on Mar 15, 2017 at 10:03 AM by BrianGreen
Hi all,

I'm not sure if this question belongs here or in the Programming section, but as my last question in the Programming section met with no responces I thought I'd try here.

Unfortunately I have run out of virtual beer as I drowned my sorrows of not getting a reply last time and drank it all.

Anyway, to the problem ...

I'm having trouble positioning radio buttons in my new web site. I can create the majority of it and can position the radio button itself, but the label refuses to stay with the button. What I am trying to achieve is this:


the code I have so far (for this bit) is:

HTML
<category>
<p>Category</p>
<form>
<label for='Password'> Password</label>
<input type='radio' id='password' name='category' value=1><br>

<label for='subs'> Subs</label>
<input type='radio' id='subs' name='category' value=2><br>

<label for='user_setup'> User Setup</label>
<input type='radio' id='user_setup' name='category' value=3><br>

<label for='add_operator'> Add Operator</label>
<input type='radio' id='add_operator' name='category' value=4><br>
</form>
</category>


CSS:
main {
background-color: #a8d9f7;
font-family: segoe ui;
position: relative;
}

category p {
position: absolute;
left: 53px;
top: 231px;
}

input[id=password] {
resize: none;
position: absolute;
left: 173px;
top: 231px;
}

label[id=password] {
resize: none;
position: absolute;
left: 183px;
top: 231px;
}

input[id=subs] {
resize: none;
position: absolute;
left: 173px;
top: 270px;
}

label[id=subs] {
resize: none;
position: absolute;
left: 183px;
top: 270px;
}


Just did a couple of "buttons" in the CSS so you get an idea of where I am. I know I have no action in place yet - that is a problem I am putting off until the whole form is designed (I think I will have another problem ther as I have several forms that I want to submit to a database all on the press of one button, but that is a fight for another day!)

The "main" CSS entry is for the section that hounses all of the forms I have for this bit of the project.

Can anyone point me in the right direction to get the text and radio buttons to marry up with each other please?

Thanks.
See more 
Helpful
+0
plus moins
Yipeeeeeeee!!!

I found it by accident.

my code is now:

HTML
<category>
<p>Category</p>
<form>
<passw0rd><input type='radio' id='password' name='category' value=1> Password</passw0rd>
<subs><input type='radio' id='subs' name='category' value=2> Subs</subs>
<user_setup><input type='radio' id='user_setup' name='category' value=3> User Setup</user_setup>
<add_operator><input type='radio' id='add_operator' name='category' value=4> Add Operator</add_operator>
</form>
</category>

CSS
category passw0rd {
position: absolute;
left: 173px;
top: 231px;
}

category subs {
position: absolute;
left: 300px;
top: 231px;
}

category user_setup {
position: absolute;
left: 173px;
top: 251px;
}

category add_operator {
position: absolute;
left: 300px;
top: 251px;
}


I award myself a REAL beer ...
... and as its my birthday a large shot of rum.

I will leave this one open for a bit in case anyone has some improvements to my code :^)
Leave a comment

Member requests are more likely to be responded to.

Members can monitor the statuses of their requests from their account pages.

A CCM membership gives you access to additional options.

Not a member yet?

Sign up now. It takes less than a minute and is completely free!