Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Adjusting column widths – help please!

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • February 22, 2010 at 7:28 pm #28114
    Alison556
    Participant

    Hi all,

    New to the forum and to CSS. I’ll be honest – I could never, in a month of Sundays sit down and create CSS from scratch but I’m sort of learning enough to be able to customise existing CSS script – more often than not from these freebie generators you get.

    I’ve been trying to do a navigation menu and I think I’m getting there, but I’m finding that the columns are wider than they should be but if I try to reduce the number of pixels, then I lose a column and instead of being three columns, it goes to two columns.

    Can anyone point me in the direction of what it is I need to change (and gentle critisism would be fine too!). Is it possible to have the column automatically size for the text contained? Oh and in case it’s not obvious, it’s a drop down menu with multiple columns in the drop down box.

    Code:
    #dropList
    {
    height:30px;
    width:100%;
    background:#FE9A2E repeat-x left center;
    position:relative;
    font-family:arial, verdana, sans-serif;
    font-size:14px;
    font-weight:bold;
    z-index:500;
    border:1px solid #6C3600;
    border-width:1px 1px 1px 1px;
    }

    #dropList ul#menu
    {
    margin:0;
    padding:0 0 0 60px;
    list-style:none;
    white-space:nowrap;
    }

    #dropList ul#menu li.level1-li
    {
    float:left;
    height:29px;
    padding-top:1px;
    margin-right:1px;
    }

    #dropList ul#menu li.level1-li a.level1-a
    {
    display:block;
    height:26px;
    float:left;
    padding:0 10px 0 10px;
    text-decoration:none;
    line-height:30px;
    white-space:nowrap;
    font-weight:bold;
    color:#FFFFFF;
    }

    #dropList ul#menu li.sub a.level1-a
    {
    color:#FFFFFF;
    }

    #dropList ul#menu li.level1-li:hover, #dropList ul#menu li.level1-li a.level1-a:hover
    {
    position:relative;
    }

    #dropList ul#menu li.level1-li a.level1-a:hover, #dropList ul#menu li.level1-li:hover a.level1-a
    {
    border-left:1px solid #6C3600;
    border-right:1px solid #6C3600;
    color:#6C3600;
    background:#FE9A2E;
    }

    #dropList ul#menu li.sub a.level1-a:hover
    {
    height:29px;
    color:#6C3600;
    background:#FE9A2E;
    }

    #dropList ul#menu li.sub:hover > a.level1-a
    {
    height:29px;
    color:#6C3600;
    background:#FE9A2E;
    }

    #dropList ul#menu li div.listHolder
    {
    position:absolute;
    left:-9999px;
    top:29px;
    background:#FFFFFF;
    border:1px solid #6C3600;
    border-width:1px 1px 1px 1px;
    padding:0;
    }

    /* IE6 only */

    #dropList table
    {
    border-collapse:collapse;
    margin:-1px -10px;
    font-size:1em;
    font-weight:bold;
    width:0;
    height:0;
    }

    #dropList ul#menu :hover div.listHolder
    {
    left:0;
    }

    #dropList ul#menu a:hover div.listHolder
    {
    left:-1px;
    }

    #dropList ul#menu div.col1
    {
    width:200px;
    }

    #dropList ul#menu div.col2
    {
    width:500px;
    }

    #dropList ul#menu div.col3
    {
    width:675px;
    }

    #dropList ul#menu a:hover div.left1, #dropList ul#menu :hover div.left1
    {
    left:-141px;
    }

    #dropList ul#menu div.listHolder div.listCol
    {
    display:block;
    float:left;
    padding:10px;
    margin:0;
    width:200px;
    }

    #dropList ul#menu div.listHolder div.listCol h5
    {padding:5px 0 0 0;
    margin:0;
    font-size:13px;
    line-height:30px;
    }

    #dropList ul#menu div.listHolder div.listCol ul
    {
    padding:0;
    margin:0;
    list-style:none;
    }

    #dropList ul#menu div.listHolder div.listCol ul li
    {
    line-height:20px;
    padding:0;
    margin:0;
    }

    #dropList ul#menu div.listHolder div.listCol ul li a
    {
    color:#069;
    text-decoration:none;
    padding-left:10px;
    font-weight:normal;
    }

    #dropList ul#menu div.listHolder div.listCol ul li a:hover
    {
    text-decoration:underline;
    }

    And the HTML

    Code:

    Really grateful for any advise received.

    thanks

    Alison

    February 23, 2010 at 11:23 am #71357
    Alison556
    Participant

    http://www.dogsandco.110mb.com

    The first drop down, the third column has an awful big space at the end. The second drop down is OK, the third drop down again has a huge space at the end of the second column and the fourth drop down is maybe a bit tight on space. I’m not sure how to even that out.

    Thanks for looking – oh, and I know that the bottom is all gobbeldy gook but that’s only because I didn’t upload the footer file to this temporary host cos I know that works OK>

    February 23, 2010 at 5:31 pm #71473
    Alison556
    Participant

    I initially tried that but if I set them to 200, 400 and 600, column 3 on the first drop down jumps down to under column 1 and column 2 on the 3rd drop down jumps to under column 1. The only way I’ve managed to overcome that is to have them as 200, 450 and 675 but the "margins" on the right still look awful big.

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.