CSS navigation bar question

Jim Brucker jimb at northwestern.edu
Fri Jul 2 10:28:08 EDT 2004


You might also want to define your media in that link tag.  This usually 
isn't needed unless you're working with an alternative media, such as 
"print", but I found that some non-IE browsers were getting a little funny 
when I didn't explicitly define the media as this: media="screen".  This 
might seem redundant, but it is also a good habit and will validate.  Has 
anyone else had this issue, having to include a media attribute for screen 
displays?
-Jim


At 08:12 PM 7/1/2004, Thomas Dowling 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

- - - - - - - - - - - - - - - - - - - - - - -
Jim Brucker
Education Assistant
Galter Health Sciences Library
Northwestern University
303 E. Chicago Ave.
Chicago, IL 60611 




More information about the Web4lib mailing list