[WEB4LIB] CSS navigation bar question

[Thomas Dowling]

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:

   li.first-tab{
     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