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>

You don't have anything with the 'current' class applied to it. E.g.

<a href="quotes.html" class="current">Submit Quote</a>

 

Are you using JavaScript to create the tabs, or plain HTML, or PHP?

You don't have anything with the 'current' class applied to it. E.g.

<a href="quotes.html" class="current">Submit Quote</a>

 

Are you using JavaScript to create the tabs, or plain HTML, or PHP?

 

Just plain html as far as i know. I've changed the code to this:

 

 

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

background-image:url(images/menu2.gif);

width:90px;

height:19px;

display:inline;

float:left;

font-family: Verdana;

font-size: 12px;

text-align:center;

padding-top:6px;

text-decoration:none;

color:#e9e4d0;

font-weight:bolder;

}

 

 

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 href="registration.html" class="selected">Registration</a>

<a href="policies.html">Our Policies</a>

<a href="contact1.html">Contact Us</a>

</div>

In this case, your CSS should be:

#nav .selected {

The . signifies that it's a class name that you're trying to style, followed by the name of the actual class itself - in this case 'selected'

Cheers, i've finally managed to get it to work on one page. Now to try and do the rest of the site.

Ok so one more thing while i'm at it. How do i change the colour of the rollover text on the highlighted tab. I'm assuming i can do this.

Add this to your CSS

#nav a.selected:hover {color:#cccccc;}

Change the cccccc to the colour of your choice