Results 1 to 11 of 11

Thread: horizontal alignment of checkboxes in a form - Solved

  1. #1
    User
    Join Date
    02-01-10.
    Posts
    111

    Default horizontal alignment of checkboxes in a form - Solved

    I am trying to align three checkboxes horizontally on a form. On this page http://dsweb2.oed.umn.edu/doc-con-submit-files.html I would like the checkboxes for Kurzweil, RTF and Other to show up on one line on after the other. How could I accomplish this?

    I also noticed that there is a "Group" checkbox in the backend next to each option. I am not entirely sure what checking this box means.

    Thanks for any hints.

  2. #2
    User
    Join Date
    10-16-10.
    Posts
    279

    Default Re: horizontal alignment of checkboxes in a form

    This string is screwing up the output of your checkboxes:
    Code:
    #contact_us_form label{
    width:130px;
    float:left;
    display:block;
    margin:5px 0 0;
    padding:0;
    text-align:right;}
    Not gonna break it down for you though XD

  3. #3
    User
    Join Date
    10-16-10.
    Posts
    279

    Default Re: horizontal alignment of checkboxes in a form

    wild guess would be either/or the width, float, and text-align...

  4. #4
    User
    Join Date
    02-01-10.
    Posts
    111

    Default Re: horizontal alignment of checkboxes in a form

    thanks for the pointers! I will dig into it.

  5. #5
    User
    Join Date
    06-29-09.
    Posts
    271

    Default Re: horizontal alignment of checkboxes in a form

    ps, mechaflash lost his money... :lol:

  6. #6
    User
    Join Date
    10-16-10.
    Posts
    279

    Default Re: horizontal alignment of checkboxes in a form

    :cry: (display :?: ) don't make me screw with it and waste a bunch of time :D

  7. #7
    User
    Join Date
    10-16-10.
    Posts
    279

    Default Re: horizontal alignment of checkboxes in a form

    It has to do with the width and margins set to input and label. If you remove the margins, you'll notice that the checkboxes begin to line up. Since label and input are shared and there are tons of CSS strings pointing to to those elements... you may want to just go ahead and be more specific on the CSS targeting and isolate them to manipulate their positioning better.

    EDIT:
    Good enough Vera? XD

  8. #8
    User
    Join Date
    06-29-09.
    Posts
    271

    Default Re: horizontal alignment of checkboxes in a form

    I'll give you half the points :D The margin's don't need to change. It's the widths and two other important part that you didn't name yet

    Although usually I would like people to figure it out themselves using some hints here is an almost complete possible answer:
    Code:
    #contact_us_form #lbl_23_0,
    #contact_us_form #lbl_23_1,
    #contact_us_form #lbl_23_2 {
    width: auto;
    display: inline;
    float: none;
    }
    
    #contact_us_form #opt_23_0,
    #contact_us_form #opt_23_1,
    #contact_us_form #opt_23_2 {
    width: auto;
    }
    It misses the left margin, but the ts will see that when trying. Perhaps there are other solutions as well, but they all need to change the display, width and possibly the float. :?

  9. #9
    User
    Join Date
    10-16-10.
    Posts
    279

    Default Re: horizontal alignment of checkboxes in a form

    eh... i'm only about 4 months into CSS... i'll take 75% XD (and i hate tables :? )

  10. #10
    User
    Join Date
    06-29-09.
    Posts
    271

    Default Re: horizontal alignment of checkboxes in a form

    Quote Originally Posted by mechaflash
    eh... i'm only about 4 months into CSS... i'll take 75% XD (and i hate tables :? )
    I love tables. The thing is they are typically not the easiest way to build a layout

  11. #11
    User
    Join Date
    02-01-10.
    Posts
    111

    Default Re: horizontal alignment of checkboxes in a form - Solved

    Thank you Vera, your code did the trick. I would probably not have been able to resolve it on my own.

Bookmarks

Posting Permissions

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