Navigation bar query - using <li>

[zaniac]

Hi guys and gals.I am setting up a home page with a navigational bar running just underneath my header. It's done in the form of a list, for a screen resolution of '1024x768' using CSS below:#nav li{background: url(menu.gif); list-style: none; font-family: myriad pro, tahoma, arial; font-size: 20px; font-weight: bold; float: left;} #nav li a{text-decoration: none; padding: 11px 54px 4px; display: block; float: left;}I'm having a problem with setting it up properly, although currently I do have the bar reaching both sides of the screen. I want to know if it's possible to lock the length of the bar into position, so it does not collapse into pieces when in a smaller screen. I'm not sure if this is possible. However if anyone has better ways of setting up a navigation bar please-please-please let me know :)Any help you guys can give is greatly appreciated

[jlhaslip]

Try this:Wrap it in a div and give the div a specified width. Center the div.

[zaniac]

Try this:Wrap it in a div and give the div a specified width. Center the div.

Hi Jlhaslip!Thanks for the reply and advice. I gave it a go, but it hasn't displayed how I would have wanted it to, so I'm now modifying the bar so it does not need to go all the way across. Thanks for your help once again though, it was greatly appreciated

[zaniac]

Ok this is a different display issue, but still in relation to my navigation bar. I have gone a way from using the <ul> rule and gone for standard <a> elements on their own, for my navigation bar (#nav)This morning I downloaded Opera9.7 and Firefox2, as I wanted to see how my page displayed through these browsers. I admit I designed my page using IE6 as a guide (not sure if that is the best method when designing a web page). Everything is more-or-less fine in IE6 and with the page displaying how I would like it to. However when the page is displayed in Firefox2 and Opera9.7, it seems my one CSS rule for a url background image does not display. Am I correct in thinking that background: url(pic.gif) CSS rule does not work in Firefox and Opera? #nav {vertical-align: top; height: 20px; background: url(menu.gif); } #nav a{ float: right; font-family: arial, sans serif; font-size: 20px; font-weight: bold; text-decoration: none; padding: 2px 25px 2px;} h3{font-weight: bolder; color:#FF0000; padding: 3% 0% 0% 4%; width: 60%;}Another display issue on Firefox 2 and Opera9.7 is that my simple <h3> element which should be displayed below my navigation bar and on the left side of the page (as it does in IE6), is now positioned on the same line, to the left of my navigation bar. How can I seperate the above #nav from my <h3> element? The <h3> element is the only element which is not in a <div>. Could this be a factor?All help is greatly appreciated

[ste]

you have to clear the float before the h3. in your css put h3 {clear: both;}also try background-image: url(menu.gif);

[zaniac]

Hi Ste, thanks for your advice and quick reply. I'll have a go and see what happens

[zaniac]

Ok, the {float: clear;} command has resolved the issue with my <h3> element. The {background-image: url(menu.gif);} command unfortunately still does not display the image for the #nav.

[zaniac]

I have now resolved the issue for the #nav. By adding {clear: both;} command, I have managed to get the navigation bar to display across the screen on both Firefox and Opera. I'm now a happy chappy Thanks again for you guys who helped me in this thread