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