View Full Version : CSS navigation tabs

11-28-2005, 05:03 AM
What I want to do here is have one of the navigation tabs basically be different than the others based on the page that is showing. I have it working for a side menu (not tabs) but I think this one doesn't work due to the properties being set already for the same item (basically two different styles on the same item and one must be over riding the other)

Basically what I'm trying to accomplish is the same as what's shown on trick number 10 on this page http://www.sitepoint.com/article/top-ten-css-tricks

Ok so what i have for my style sheet so far is:

#menu2 {
margin:0 auto;
#menu2 li {
* html #menu2 li {
#menu2 a {
padding:2px 10px;
border:1px solid #fff;
* html #menu2 a {
#menu2 a:hover {

.container {clear:both; text-decoration:none;}
* html .container {display:inline-block;}

A.newmenu {
text-decoration: none;
color: black;
display: block;
font-family: Arial;
font-weight: bold;
font-size: 8pt;
text-indent: 8px;

A.newmenu:hover {
background-color: #FFFFFF;
color: blue;

B.topleftnav {
background-color: #E5E5E5;
font-family: Arial;
font-weight: bold;
font-size: 9pt;
display: block;


#home .home, #gethelp .gethelp, #forum .forum, #contact .contact, #techshop .techshop
color: blue;

and my side menu WORKS using this html:

<b class="topleftnav home">Home</b>
<a class="newmenu" href="#nogo">Home Page</a>
<b class="topleftnav gethelp">Get Help</b>
<a class="newmenu" href="#nogo">Software</a>
<a class="newmenu" href="#nogo">How to's</a>
<a class="newmenu" href="#nogo">Online Support</a>
<b class="topleftnav forum">Forum</b>
<a class="newmenu" href="#nogo">Register</a>
<a class="newmenu" href="#nogo">View</a>
<b class="topleftnav contact">Contact</b>
<a class="newmenu" href="#nogo">About</a>
<a class="newmenu" href="#nogo">Feedback</a>
<b class="topleftnav techshops">Tech Shops</b>
<a class="newmenu" href="#nogo">Search</a>
<a class="newmenu" href="#nogo">Show All</a>
<a class="newmenu" href="#nogo">Top Rated</a>
<a class="newmenu" href="#nogo">Most Popular</a>

This is the html that I am having the problems with:

<del class="container">
<ul id="menu2">
<li class="home"><a href="#nogo">Home</a></li>
<li class="gethelp"><a href="#nogo">Get Help</a></li>
<li class="forum"><a href="#nogo">Forum</a></li>
<li class="contact"><a href="#nogo">Contact Us</a></li>
<li class="techshop"><a href="#nogo">Tech Shops</a></li>


So if someone can get what happening in my side menu to work with the tabs on the top of my page, it would be great. Hope it was not too confusing. Thanks in advance.

I also have the body tag currently like this

<body id="home">

11-28-2005, 08:27 AM
To change the color of the link you have to select the link. So instead of this:

#home .home, #gethelp .gethelp, #forum .forum, #contact .contact, #techshop .techshop {
color: blue;

Try this:

#home .home a, #gethelp .gethelp a, #forum .forum a, #contact .contact a, #techshop .techshop a {
color: blue;

11-28-2005, 05:00 PM
Although I'm not quite getting what problems you run into, it seems like you're wrestling with the specificity of the style rules for both your menus; also, there seems to be an overlap between both that puzzles me slightly, but never mind that.

If you want to be able to address the elements within each menu with sufficient specificity you can make use of an id on the container that holds each menu: for the "menu2" one you've already got this covered; for the first menu, there doesn't yet seem to be such a container.

To achieve this you could restructure this menu--which is quite poorly structured as it is--using unordered lists like you did with the first one; the list(s) automatically function(s) as container(s) and ids provide the necessary style "hooks".

A general selector for an item in the second menu would be "#menu2 li" or something--to address all list elements in the menu--and "#menu2 li.gethelp" to specifically address the gethelp li; "#gethelp #menu2 li.gethelp" would single out the gethelp li provided the body id "gethelp" is set, etc, etc.

11-29-2005, 03:26 AM
Thanks Span that worked great!
and i'll take your comments into consideration as well Ronald :thumbsup: