Positioning radio buttons

Solved/Closed
BrianGreen Posts 1005 Registration date Saturday January 17, 2015 Status Moderator Last seen September 30, 2021 - Updated by BrianGreen on 15/03/17 at 06:48 AM
BrianGreen Posts 1005 Registration date Saturday January 17, 2015 Status Moderator Last seen September 30, 2021 - Mar 15, 2017 at 10:03 AM
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.
I really appreciate thank you messages as a payment for solving issues   :o)
Related:

1 response

BrianGreen Posts 1005 Registration date Saturday January 17, 2015 Status Moderator Last seen September 30, 2021 150
Mar 15, 2017 at 10:03 AM
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 :^)
0