help with semantically correct navigation links [Archive]

Click to See Complete Forum and Search --> : help with semantically correct navigation links

heavenly_blue

12-28-2004, 02:10 PM

So I'm re-doing my navigation. I'm told that navigation links should be a list. I converted my navigation links into a list. It looks fine except for one thing. I want the background color of the navigation menu to extend across the width of the screen. I can't get it to work in FireFox. Here's what I'm using...

Here's the source...

[CODE]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>top nav links</title>
<style type="text/css">
body{
background-color:#fff;
color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin:0 5px 0 5px;
padding:0;}

#menu ul{
list-style-type:none;
margin:0;
padding:0;}

#menu ul li{
background:#000 url('navspace.jpg') right no-repeat;
display:block;
float:right;
height:18px;
overflow:hidden;
padding:0;
margin:0;}

#menu ul li a{
color:#fff;
display:block;
margin:0 18px 0 0;
padding:0;
text-align:right;
text-decoration:none;}
</style>
</head>
<body>
<div id="logo"><img src="online-Logo2.jpg" alt="BuildingBoom On-Line"></div>
<div id="menu"><ul>
<li><a href="contact.asp"> Contact us</a></li>
<li><a href="account.asp"> Account </a></li>
<li><a href="subscribe.asp"> Subscribe </a></li>
<li><a href="faq.asp"> FAQ </a></li>
<li><a href="terms.asp"> Terms </a></li>
<li><a href="why.asp"> Why BuildingBoom? </a></li>
<li><a href="bbsearch.asp"> Search </a></li>
<li><a href="home.asp">Home </a></li>
</ul></div>
</body>
</html>

heavenly_blue

12-28-2004, 02:16 PM

i tried adding something like...

#menu{
background-color:#000;
width:100%;}

...but it doesn't work in Firefox.

Also, I was wondering how to disable the #menu div from wrapping to the next line.

Is there a different / better way to accomplish this in CSS?

baseiber

12-28-2004, 02:53 PM

Maybe I'm mistaken but why would someone use a list for top navigation? I could see using that for left hand navigation. There has to be a better way then that.

rsd

12-28-2004, 04:03 PM

Add
#menu {
background-color:#000;
line-height:1.3em;}

and put a   after your </ul> and before your </div>

heavenly_blue

12-28-2004, 04:37 PM

thanks rsd. here's what I ended up doing -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>top nav links</title>
<style type="text/css">
body{
background-color:#fff;
color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin:0 5px 0 5px;
padding:0;
text-align:left;}

#menu{background-color:#000;}

#menu ul{
list-style-type:none;
height:18px;
margin:0;
overflow:hidden;
padding:0;
white-space:nowrap;}

#menu ul li{
display:inline;
height:18px;
margin:0;
overflow:hidden;
padding:0;}

#menu ul li a{
background:#000 url('navspace.jpg') right no-repeat;
color:#fff;
display:block;
float:right;
height:18px;
margin:0;
overflow:hidden;
padding:0 18px 0 0;
text-align:right;
text-decoration:none;}

#menu ul li a:hover{color:#ff0;}
</style>
</head>
<body>
<div id="menu"><ul>
<li><a href="contact.asp"> Contact us</a></li>
<li><a href="account.asp"> Account </a></li>
<li><a href="subscribe.asp"> Subscribe </a></li>
<li><a href="faq.asp"> FAQ </a></li>
<li><a href="terms.asp"> Terms </a></li>
<li><a href="why.asp"> Why BuildingBoom? </a></li>
<li><a href="bbsearch.asp"> Search </a></li>
<li><a href="home.asp">Home </a></li>
</ul></div>
</body>

Everything works out like I want it to, except for one thing now.

I think it might be a Firefox bug, because Netscape doesn't do it.

When I press 'Ctrl +' or 'Ctrl -' to change the text size, the text gets messed up. This happened in Firefox 1.0, but not Netscape 7.1 - anyone know what's up with that?

Also in Firefox, when a new page loads with the navigation in it - sometimes the text will be messed up. It looks exactly how the text does with the resize bug.

Here's the link to an example... (http://buildingboom.com/beta/header.htm)

In IE 6.0 SP1, there's some wierd flickering with the :hover...

Using this code makes a complete mess in IE 5.0 SP1 and IE 5.5 SP1.

Anyone know how to do this in a more browser-friendly way?