[WEB4LIB] CSS navigation bar question

Thomas Dowling tdowling at ohiolink.edu
Thu Jul 1 21:03:04 EDT 2004

Stringer-Hye, Suellen wrote:
> Here's a CSS question for you.
> I have a "navbar" made from applying styles to the <ul> tag.
> <http://staffweb.library.vanderbilt.edu/testweb/navbar.html>
> <http://staffweb.library.vanderbilt.edu/testweb/navbar.css>
> Now what I want to do is apply a different style to each of the 
> list elements and <a> tags to make the background and hover colors 
> different. Is this possible and if so, how would you do it?

One problem you need to fix is that your web server is sending your 
stylesheet with the wrong MIME type.  It's sending it as 
"application/x-pointplus" and it needs to be "text/css".  Non-IE 
browsers are likely not to apply your stylesheet at all; my copy of 
Mozilla doesn't.

Also, validate your HTML before you go to far with the stylesheet.  It 
can affect things.  At the moment, you aren't closing your <a> tags.

Beyond that, you will need to assign unique class or id attributes to 
the list items you want to style:

   <li class="first-tab">...</li>
   <li class="second-tab">...</li>

Then in your stylesheet:

     background: ... ; color: ... ; }
   li.first-tab a:link {
     background: ... ; color: ...; }
   li.first-tab a:hover { ... }

   li.second-tab { ... }
   li.second-tab a:link { ... }

Go easy on the multiple colors though; each navigation tab needs to be 
immediately recognizable as a link.

Thomas Dowling
tdowling at ohiolink.edu

More information about the Web4lib mailing list