[WEB4LIB] CSS navigation bar question

Stringer-Hye, Suellen suellen.stringer-hye at vanderbilt.edu
Fri Jul 2 10:33:07 EDT 2004


Thomas,

You have solved two problems for me! Are you saying that you can 
configure the server to interpret the stylesheet correctly? So far, 
I've only been able to effect this by changing the doctype 
declaration.

The <a> tag closing was a stupid oversight born of a long day of 
coding frustration:>) Yes of course the <a> tags need closing.

And thanks also for the tip about colors. There is a special reason 
in this case why I need to use multiple colors but in general I 
agree with your caution.

---Suellen

--On Thursday, July 01, 2004 9:03 PM -0400 Thomas Dowling 
<tdowling at ohiolink.edu> wrote:

> 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
>



---------------------------------------
Stringer-Hye, Suellen
Vanderbilt University
Email: suellen.stringer-hye at Vanderbilt.Edu



More information about the Web4lib mailing list