CSS Navigation Trouble!

[ianv2@aol.com]

Hi

Can anybody help me with my CSS navigation. I want it to appear on one
line - horizontally, but the menu items are displayed under one
another?

Any ideas from my code where I am going wrong?

<ul class="nav">
<li><a href="index.htm "class="current ">Home</a></li>
<li><a href="services. htm">Services</a></li>
<li><a href="clients.h tm">Clients </a></li>
<li><a href="work.htm" >Work</a></li>
<li><a href="links.htm ">Links</a></li>
<li><a href="quality.h tm">Quality</a></li>
<li><a href="news.htm" >News </a></li>
<li><a href="profile.h tm">Profile</a></li>
<li><a href="contact.h tm">Contact</a></li>
</ul>

ul {margin: 0px 0px 2em 20px; padding: 0px 0px 50px 20px; list-style:
url("bullet.gif "); color: #515752; font:1em Verdana, Arial, Helvetica,
sans-serif; line-height:1.6em;}
#leftcol ul {margin: 0px 0px 2em 20px; padding: 0px 0px 0px 20px;
width: 354px !important; width /**/:374px; list-style:
url("bullet.gif "); color: #515752; font:1em Verdana, Arial, Helvetica,
sans-serif; line-height:1.6em;}
li {margin: 0px 0px 0.2em 0px; padding: 0em 0px 0px 0px;}
ul ul {margin: 0px 0px 0px 0em;}

..nav {list-style: none; list-style-image: none; margin: 0px 0px 30px
0px; padding: 0px; width:182px; border-top: 1px solid #B7BBB7;}
..nav li { margin: 0px; padding: 0px; font:1em Verdana, Arial,
Helvetica, sans-serif; border-bottom: 1px solid #B7BBB7;}
..nav li a, #nav li a:visited {display: inline; color: #cccccc;
text-decoration:none ; line-height: 19px; margin: 0px; padding: 0px
14px; width:154px !important; width /**/:184px; background-image:none;}
..nav li a span {display: none; margin: 0px; padding: 0px;}
..nav li a:hover {color: #ffffff;}
..nav li a:hover span {display: inline; color: #fff;}
..nav li a.current, #nav li a.current:visit ed, #nav li a.current:hover
{background: #625e5a; color: #fff;}
..nav li a.current span, #nav li a.current:visit ed span, #nav li
a.current:hover span {display: none;}

[Steve Pugh]

Re: CSS Navigation Trouble!

ianv2@aol.com wrote:
[color=blue]
>Hi
>
>Can anybody help me with my CSS navigation. I want it to appear on one
>line - horizontally, but the menu items are displayed under one
>another?
>
>Any ideas from my code where I am going wrong?
>
> <ul class="nav">
> <li><a href="index.htm "class="current ">Home</a></li>
> <li><a href="services. htm">Services</a></li>
> <li><a href="clients.h tm">Clients </a></li>
> <li><a href="work.htm" >Work</a></li>
> <li><a href="links.htm ">Links</a></li>
> <li><a href="quality.h tm">Quality</a></li>
> <li><a href="news.htm" >News </a></li>
> <li><a href="profile.h tm">Profile</a></li>
> <li><a href="contact.h tm">Contact</a></li>
> </ul>
>[/color]
[color=blue]
>.nav { width:182px; }[/color]

Other styles removed for clarity.

There's your problem, or at least the first one. How is all that nav
supposed to fit in just 182 pixels?
[color=blue]
>.nav li { margin: 0px; padding: 0px; font:1em Verdana, Arial,
>Helvetica, sans-serif; border-bottom: 1px solid #B7BBB7;}[/color]

And here's your second problem. There's nothing here to tell the list
items not to be displayed as per normal. You need either float: left;
or display: inline; (or one of the fancier options) to get them to
display alongside each other to each other.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>