Horizontal menu help

[droverholidays]

Hi all

We have a horizontal menu across the top of our pages with links to the various sections of our site.

It's created as an unordered list of links, with css controlling the formatting.

What I want to do is make some of the titles longer. This will mean they need to split over two lines so that they fit within the 750px width of the <div>. E.g. where we have "WALKING" I'd like to have "WALKING HOLIDAYS" instead, with the word "HOLIDAYS" underneath the word "WALKING".

My question is - is there a way to do this without using tables?

The relevant code is:

CSS

#topnav {
margin:0 auto;
width:750px;
}

#navlist
{

margin: 0px;
margin-bottom: 0px;
padding: 0px;
padding-left: 5px;
background-color: #98C574;
font-family: verdana, lucida, sans-serif, Geneva, Arial, Helvetica,;
padding-bottom: 10px;
padding-top: 10px;
text-align: center;
}

#navlist a, #navlist a:link, #navlist a:visited
{
border: 1px solid #98C574;
padding: 1px;
padding-left: 0.5em;
padding-right: 0.5em;
color: #007827;
font-weight: normal;
text-decoration: none;
}

#navlist a:hover, #navlist a:active, #navlist a:focus
{
border: 1px solid #007827;
padding: 1px;
padding-left: 0.5em;
padding-right: 0.5em;
text-decoration: none;
}

#navlist li
{
padding-right: 1px;
display: inline;
font-size: 13px;
}

#navlist ul
{
margin: 0px;
padding: 0px;
}

#navlist #active a { color: #E1EED7; }
[/code]

HTML

<div id="topnav">
<ul id="navlist">
<li><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT&nbsp;US</a></li>
<li id="active"><a href="cycling-holidays.html">CYCLING</a></li>

<li><a href="walking-holidays.html">WALKING</a></li>
<li><a href="bike-hire.html">BIKE&nbsp;HIRE</a></li>
<li><a href="contact.html">CONTACT &amp; LOCATION</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="links.html">LINKS</a></li>
</ul>
</div>
[/code]

Thanks in advance for any help!

[MichaelBluejay]

walking<br>holidays

?

[droverholidays]

Thanks - that was what I had hoped would do it. It's the first thing I tried - but, BIKE HIRE then continues on the next line (level with HOLIDAYS), then you get CONTACT &<br /> LOCATION and FAQ down one line again.

I think I've sorted it now - I knew that adding float:left; would help, but then I was getting everything lined up on the lhs - as these menus often are. We wanted it centred and evenly spaced, though, and the only way I found to do that was to specify fixed pixel widths for each of the <a> items. Since the width of the div is also fixed and the font size specified in pixels, hopefully that should be OK. I've tested in IE and FF and it seems to work, but would be grateful for any comments about whether the current solution is considered compliant and good practice etc or if anyone can see problems with it.

<snip>

[edited by: limbo at 7:40 pm (utc) on Jan. 17, 2010]

[MichaelBluejay]

Okay, a few things. First, I forgot what we're supposed to so to all first-time posters here: Hello, and Welcome to WebmasterWorld!

Next, you can't post links to your site here on WW, for a variety of reasons, so expect a mod to come in here and remove your link, and don't be surprised or upset when they do.

Next, whenever you post code, please post the absolute minimum necessary to reproduce your problem. Nobody wants to wage through a page or more of code. And this is good troubleshooting, besides. Once you've pared down a test file to about 10 or fewer lines, often you'll find that it actually works the way you want it. At that point you can start slowly adding all the other stuff back to the file, testing it periodically, and when it fails again, then you'll know that the last bit that you added was what broke it, and the problem should be easy to spot.

Okay, onto your problem. Yes, you're right, <BR> doesn't work. I'm used to using tables myself (old habit), so I forgot that won't work with <LI>'s. I checked out your solution and it makes perfect sense. I don't see any reason not to do it that way. It works in Safari, by the way (which is usually the case if it works in both IE and FF). So, it looks like you solved your problem yourself, but that's not such a bad thing. I've solved many problems myself during or just after posting about them here, since the posting process helps me think about the problem.

[droverholidays]

Hi Michael, and thanks for your post.

Thanks for the comments too - all duly noted. I don't see a way to go back and edit my previous post, or I'd remove the link myself, but assume a mod will do the honours shortly. Sorry, I didn't realise that wasn't allowed.

Thanks for checking it out for me. I did use a table initially but thought I'd try to find a css-only way to do it. Will try to test it in a few other browsers but as you say it seems to work.