How do i change tab colour

[speed1972]

www.elitetradesmen.com

Above is a link to my site, in respects of design i think its pretty much done. The one thing i'm struggling with is that i want the tabs at the top which show the links to pages to change colour depending on what page your on. So lets say i'm on the area page the area tab at the top will be a dark grey the same as the page and all other tabs will be a lighter colour.

One problem i see though is that not all my pages have a tab at the top. How do i get round this as when i'm on when of these pages i'm not sure what to do with the tabs.

[Four Staples]

Just apply a .current class to the tab that matches the page you're on, and style it with a different background image.

By the way, those links should be in a list! A List Apart: Taming Lists

EDIT: And if you're on a page that doesn't really fall under any of the tab categories, just don't use .current on any of the tabs.

[brianh00]

add to styles.css

#nav a.current {
	background-image:url(./images/current.gif);
	color:#918A70;
}

#nav  a.current:hover {
	color:#918A70;
}

add to each of your pages:

	<div id="nav">
		<a href="index.html">Home</a>
		<a href="quotes.html">Submit Quote</a>
		<a href="registration.html">Registration</a>
		<a href="quotes.html">Our Policies</a>
		<a class="current" href="contact.html">Contact Us</a>
</div>

Where class="current" is on the page that you are adding.

Put this image in your images directory:
http://icandobetter.110mb.com/images/current.gif

[brianh00]

Also, not sure if you have noticed, but your NAV links are not in good shape. Should be the same 5 tabs up there on each page.

http://www.elitetradesmen.com/searchtrades1.html
Has "Our policy" tab linked to trades.html

It is very confusing for users to have those tabs changing.

And just a design fyi, the graphic in the bottom left should not be black on such a dark background. Would look better if the whole graphic was the same color as the "I" in that graphic.

[speed1972]

Still trying to work out how to make my tabs stand out when i'm on a certain page. Here is the code i've come up with but i've clearly done something wrong as it doesn't work.

css.

#nav a {
background-image:url(images/menu.gif);
width:90px;
height:19px;
display:inline;
float:left;
font-family: Verdana;
font-size: 10px;
text-align:center;
padding-top:6px;
text-decoration:none;
color:#e9e4d0;
font-weight:bolder;
}

#nav a.current {
background-image:url(images/menu2.gif);
color:#918A70;
}

#nav a.current:hover {
color:#918A70;
}


html.

<div id="wrapper">
<h1>Elite tradesmen</h1>
<div id="nav">
<a href="index.html">Home</a>
<a href="quotes.html">Submit Quote</a>
<a class="menu2" href="registration.html">Registration</a>
<a href="policies.html">Our Policies</a>
<a href="contact1.html">Contact Us</a>
</div>

[brianh00]

<div id="wrapper">
<h1>Elite tradesmen</h1>
<div id="nav">
<a href="index.html">Home</a>
<a href="quotes.html">Submit Quote</a>
<a class="menu2" href="registration.html">Registration</a>
<a href="policies.html">Our Policies</a>
<a href="contact1.html">Contact Us</a>
</div>

Change menu2 to current