HTML Forum

**speed1972** · 06-07-2009, 07:19 PM

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.

**World** · 06-07-2009, 09:34 PM

Have you tried giving each tab an id and use pseudo classes?

PS: in the book "Bulletproof Web Design" is a nice case on how to do tabbed pages.

**skywind** · 06-08-2009, 03:40 AM

define in style file (css)

**bindassdelhiite** · 06-08-2009, 10:31 AM

Better assign each page a unique ID for its <body> tag and also assign unique Ids for Tab Links and assign a common CSS class for Tab Links.

After doing that declare different colors for your tabs which are particular to their page, that is, their <body> Ids.

For example in your CSS stylesheet you may code like this..

Code:

a.tab-links { color: #FFFFFF; } /* defines same color for all the tab links */

body#home a#home-tab { color: #333333; } /* define Gray color for HOME link only on Home Page */

body#quote a#quote-tab { color: #333333; } /* define Gray color for SUBMIT QUOTE link on Submit Quote Page */

and so on..

I hope that this will be helpful to you.

Thanks,
Bindass Delhiite

enjoy

**speed1972** · 06-08-2009, 05:29 PM

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>

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!