styling one <li> in an <ol>

code blue

05-05-2006, 07:43 AM

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.

_Aerospace_Eng_

05-05-2006, 07:46 AM

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.
<!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>

ronaldb66

05-05-2006, 07:49 AM

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.

Beaten again... :rolleyes:

code blue

05-05-2006, 08:26 AM

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 :rolleyes:

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