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 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2006
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts

    styling one <li> in an <ol>

    Hi everyone - long time browser, first time poster.

    I'm trying to put together a site at the moment where accessibility and useability are key factors, but the client still wants to work to a fairly rigid design. the problem is they have a horizontal nav bar, where i need to be able to set the width of each navigational link. Im trying to do this using an unordered list for the navigation items, but im having trouble styling individual <li>s (i'd like to be able to control the width of each <li seperately>).

    navbar code is very straight forward:
    <div id="navBar">
    <ul>
    <li class="home">Home</li>
    <li class="products">Depend Products</li>
    <li class="prof">For Professionals</li>
    </ul>
    </div>

    as is css:
    #navBar ul {
    list-style-type: none;
    display: inline;
    padding: 0;
    margin: 0;
    }
    #navBar li {
    display: inline;
    padding: 0;
    margin: 0;
    text-align: center;
    height: 1.6em;
    }
    #navbar ul .home{
    width: 100px;
    }
    #navbar ul .products{
    width: 150px;
    }

    the problem is - the widths (or any other property i attach) aren't being applied to the <li>s themselves. i have done this before in a vertical list, and it worked, is the problem just because this is a horizontal list using display:inline ?

    any suggestions would be much apprecaited.

    cheers.

  • #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
    CSS is case sensitive and when you make them display:inline; without floating them you can't set a width to them becaue inline elements technically can't have width, margin, or padding applied to them.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    #navBar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    }
    #navBar li {
    display: block;
    float:left;
    padding: 0;
    margin: 0;
    text-align: center;
    height: 1.6em;
    }
    #navBar ul .home{
    width: 100px;
    background-color:#F00;
    }
    #navBar ul .products{
    width: 150px;
    background-color:#00F;
    }
    </style>
    </head>
    
    <body>
    <div id="navBar">
    <ul>
    <li class="home">Home</li>
    <li class="products">Depend Products</li>
    <li class="prof">For Professionals</li>
    </ul>
    </div>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Case

    CSS is case sensitive; when you name an id "navBar", the selector "#navbar" won't select it.
    Otherwise: yeah, giving each list item it's own class, or even id, would be about the only way to tackle this.

    Edit:
    Beaten again...
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #4
    New Coder
    Join Date
    Apr 2006
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts

    brilliant

    thanks very much guys!

    i was scratching my head why you kept mentioning that css is case sensitive - i know that... i just didnt realise i'd made the selectors lower case in my css

    but the whole inline vs floating<li> stuff makes perfacte sense. thanks!


  •  

    Posting Permissions

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