Problem with UL menu

[pazuzulu]

Im trying to define a navigation using an unordered list.

I need to be able to specify exactly how wide each of the menu items are (which ive done) but the last one wraps to the bottom line, even though there is room to fit it on the original line. There is no extra padding or margin, so i cant figure out why its doing it.

Any help would be greatly appreciated!

HTML:

<div id="navcontainer">
<ul>
<li class="home"><a href="home.htm">Home</a></li>
<li class="aboutus"><a href="home.htm">About Us</a></li>
<li class="ebusiness"><a href="home.htm">E-Business</a></li>
<li class="services"><a href="home.htm">Services</a></li>
<li class="portfolio"><a href="home.htm">Portfolio</a></li>
<li class="email"><a href="home.htm">Email Marketing</a></li>
<li class="web"><a href="home.htm">Web Conference</a></li>
<li class="partners"><a href="home.htm">Partners</a></li>
<li class="contact"><a href="home.htm">Contact&nbsp;Us</a></li>
</ul>
</div>

CSS:

#navcontainer ul
{
vertical-align:bottom;
padding:0;
margin:0;
background-color: #036;
color: White;
width: 697px;
font-family: arial, helvetica, sans-serif;
}

#navcontainer ul li { display: inline;
}
.home a{padding-left:13px;padding-right:13px;}
.aboutus a{padding-left:13px;padding-right:12px;}
.ebusiness a{padding-left:13px;padding-right:12px;}
.services a{padding-left:11px;padding-right:10px;}
.portfolio a{padding-left:12px;padding-right:13px;}
.email a{padding-left:17px;padding-right:18px;}
.web a{padding-left:19px;padding-right:21px;}
.partners a{padding-left:12px;padding-right:12px;}
.contact a{padding-left:5px;padding-right:5px;}

#navcontainer ul li a
{
background-color: #036;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}

#navcontainer ul li a:hover
{
background-color: #369;
color: #fff;
}

[Rambo Tribble]

On my display (1024x768), there isn't room to display the items as a single line until navcontainer is set to 912px. Before then one or more elements wrap to the second line.

I suppose, in theory, a max-height setting with overflow:visible might work to contain the display to a single line, but IE doesn't support max-height.

I'm curious, since you aren't using the formatting that a list provides, why bother with it? Wouldn't <span>'s do the job with less fuss?

[4css]

Not sure if this will help you, however, I just recently read this on a menu tutorial.

In your #nav ul, try white-space: nowrap;

hth!

[pazuzulu]

Rambo, you're absolutely right.
Thank you both for your help!

[SuzyUK]

I'm curious, since you aren't using the formatting that a list provides, why bother with it? Wouldn't <span>'s do the job with less fuss?

This (horizontal navigation) is a good example of when CSS should be used to seperate presentation from content.

The content in this case is a list of links, the presentation is a pretty horizontal banner..

And it's not just how to get it to display on your screen (users may not all be browsing at that resolution anyway).. more importantly, text browsers, PDA's and screenreaders will still "read" an HTML list better than a line of spans (especially if there are no seperators put in between the spans)

Turn off the CSS to see the markup difference, is it still "legible" in a non-CSS environment, and what do you prefer..

Suzy

[pazuzulu]

Ok, new problem, ive gone and done what I needed to do with <span> tags and I can now get the precise width I wanted. Now i've got the problem that the rollover effects only work on part of the link item.

Ive tried to set the <a> tags to display:block; and the spans to display:inline;, but they display vertically despite the inline tag. Is this something I am going to be able to do? Or should I resign myself to just text rollover effects?

Thanks again if you can help me!

[edited by: pazuzulu at 11:59 am (utc) on April 4, 2004]

[pazuzulu]

Suzy, will screen readers not read the span links from left to right? Im not sure how in this case it would differ from reading a list.

I am trying to make this and all my sites more accesible in future, do you think in this case this is possible keeping in mind the design I am trying to acheive?

[aus_dave]

Welcome [webmasterworld.com] to WebmasterWorld, pazuzulu :). You should read the Terms of Service of these boards - no URLs are allowed for site reviews.

That being said, your site doesn't look right in Safari and Mozilla on the Mac, both of which are pretty good with CSS (I assume your header graphic is supposed to be centered, it appears top left). If you are developing a CSS site it is better to get it looking good in Mozilla etc. first rather than Internet Explorer. Tweaking/hacking for IE is the next step ;).

[pazuzulu]

Sorry Dave, I took the link out.

Thanks for the welcome, I usually do develop in IE and Firefox at the same time, i just hadnt installed firefox on my new pc!

[Rambo Tribble]

It's the display:block that is causing your elements to align vertically. Unless absolutely positioned or in table cells, block elements aren't supposed to display on the same line (though the special case of a floated block element is something of an exception, as well).

I'd suggest trying a containing div around your elements that have a block display and absolutely positioning them from left. If you give the div a display width wide enough to hold all the elements on one line, you'll have a unit you can move around without any problem of line breaks.

[py9jmas]

Rambo:
If I understand this correctly, you're recommending using generic <span>s around each item, inside a generic <div>?

Surely it would be better to use <li>s inside a <ul>? <li> and <ul> convey far more information about the text than the generic <span> and <div> can. It seems to me the CSS would probably be the same in either case to achieve the look pazuzulu is after.

Jon

[Rambo Tribble]

Depending on the semantic context pazuzulu wants to achieve, it's his choice. I simply suggested spans as a way to reduce the amount of markup.

In either case a display:block will cause the elements to render vertically unless absolutely positioned.