...

View Full Version : I can't get checkbox where I want it in a CSS form!



coderchap
07-12-2005, 01:05 AM
Hi, I'm trying to write a CSS-based form, having followed a couple of tutorials online. I've lined up the labels and form controls, but I'm not having any success with the checkbox near the bottom. I just want it to follow the word 'information' on the same line.

http://aeromedicgroup.fresh-interactive.co.uk/contactform.html

You can see in the source that I've taken the checkbox out of the DIV that formats the text boxes and select drop-downs. I thought............

<span class="check"><label for="17-sendinfo"></label><input type="checkbox" name="17-sendinfo" id="17-sendinfo" value="no" /></span>

might do the job but no joy.

My CSS for the form is:


#contactform{

}
#contactform label,input,select
{
display: block;
width: 130px;
float: left;
margin-bottom: 10px;
}
#contactform label {
text-align: right;
width: 130px;
padding-right: 10px;
}

#contactform br {
clear: left;
}

.check{
display:inline;
}


Can anyone help?

Thanks :)

_Aerospace_Eng_
07-12-2005, 10:02 AM
A checkbox is an input element, your less exact CSS

#contactform label,input,select
{
display: block;
width: 130px;
float: left;
margin-bottom: 10px;
}
overrides any classes or ids given to the checkbox, therefore the checkbox is 130px wide and display:block; meaning it will never be on the line as another element unless it is floated. So if you don't make it display block and a width of 130px it should move to the line you want it on, it will also have the 10px margin unless you take that out.

coderchap
07-12-2005, 06:28 PM
Thanks, but if you see in the HTML, I've moved the input tag for the checkbox outside the #contactform DIV so that it shouldn't take the

{ display: block; width: 130px; float: left; margin-bottom: 10px; }

behaviour.


But it still seems to behave the same way. Any ideas?

_Aerospace_Eng_
07-12-2005, 11:11 PM
Yep, sorry should have mentioned this before

#contactform label,input,select
{
display: block;
width: 130px;
float: left;
margin-bottom: 10px;
}
You need to be a bit more exact when it comes to see putting the id in for the label tells all labels to be display block but leaving it out for the input and select means ALL inputs and selects will still display block and at a width of 130px try this

#contactform label, #contactform input, #contactform select
{
display: block;
width: 130px;
float: left;
margin-bottom: 10px;
}

coderchap
07-13-2005, 03:09 PM
I've just renamed the page actually to

http://aeromedicgroup.fresh-interactive.co.uk/enquiryform.html

Thanks. I still don't think you've quite grasped what my problem is. The labels and input text boxes on the form now are as I want them, and they are in the DIV called "contactform".

It's the checkbox I'm struggling with. I've coded the HTML so the input checkbox is situated outside the "contactform" form, so it shouldn't be affected by the code that refers to the #contactform ID.

I removed it from the DIV, so that I could have control over it. I want it to line up alongside the line "Please check the following box if you do not wish to receive this information".

can you help?

My code again:
#contactform{

}
#contactform label,input,select
{
display: block;
width: 130px;
float: left;
margin-bottom: 10px;
}
#contactform label {
text-align: right;
width: 130px;
padding-right: 10px;
}

#contactform br {
clear: left;
}

.check{
display:inline;
}



Many Thanks.

_Aerospace_Eng_
07-13-2005, 08:15 PM
Yeah I have grasped your problem reread my post before this and then follow what I say here.
Change this

#contactform label,input,select
{
display: block;
width: 130px;
float: left;
margin-bottom: 10px;
}
to this

#contactform label, #contactform input, #contactform select
{
display: block;
width: 130px;
float: left;
margin-bottom: 10px;
}
Let me explain what is happening again, this code

#contactform label,input,select
{
display: block;
width: 130px;
float: left;
margin-bottom: 10px;
}
is telling ALL (meaning on the ENTIRE page, including your checkbox) inputs and labels to be display:block; floated left and a width of 130px. Making the changes I suggested will only make ALL labels, inputs, and selects INSIDE #contactform 130px in width, display:block; and float:left;
Any questions?

coderchap
07-14-2005, 11:22 AM
That's fantastic, thanks so much. It works, obviously! I now fully understand(!) what you were getting at, and that my 'loose' code intoduced the error. :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum