Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jul 2005
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts

    I can't get checkbox where I want it in a CSS form!

    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-interact...ntactform.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

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    A checkbox is an input element, your less exact CSS
    Code:
    #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.

  • #3
    New Coder
    Join Date
    Jul 2005
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Yep, sorry should have mentioned this before
    Code:
    #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
    Code:
    #contactform label, #contactform input, #contactform select
    {
    	display: block;
            width: 130px;
            float: left;
            margin-bottom: 10px;
    }

  • #5
    New Coder
    Join Date
    Jul 2005
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I've just renamed the page actually to

    http://aeromedicgroup.fresh-interact...quiryform.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.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Yeah I have grasped your problem reread my post before this and then follow what I say here.
    Change this
    Code:
    #contactform label,input,select
    {
    display: block;
    width: 130px;
    float: left;
    margin-bottom: 10px;
    }
    to this
    Code:
    #contactform label, #contactform input, #contactform select
    {
    	display: block;
            width: 130px;
            float: left;
            margin-bottom: 10px;
    }
    Let me explain what is happening again, this code
    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?
    Last edited by _Aerospace_Eng_; 07-13-2005 at 08:24 PM.

  • #7
    New Coder
    Join Date
    Jul 2005
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •