'Home' tab appears always active - problem with CSS style sheet?

I'm am struggling to stop the 'Home' tab appearing active on all pages

[stephenc]

I'm playing about with a template site I was given but am struggling as when I navigate through the site, the 'Home' tab appears always active and is very off putting

Im thinking its something to do with the CSS but am stumped

The site has been uploaded to < sorry, no personal urls >

Any help appreciated thanks

Stephen

[edited by: tedster at 11:18 pm (utc) on Sep. 2, 2008]

[swa66]

Personal URLs are frowned upon out here. Normaly we'd ask to please post relevant code instead

In your html the different elements making up the tabs use a different class for the active tab.

<a class="activenavitab" href="index.html">Home</a>
<a class="navitab" href="rates.html">Rates</a>

Changing the class name there is all that you'd need to do.

Or you could change the active one onto the page you're displaying.

[stephenc]

Apologies for using the URL here; it was the only way I felt I could describe the problem and I kept it as text as opposed to a clickable link but I do accept the frowned comment

I'm new to CSS having been brought up on tables. Using a template was my solution but its created more problems than its solved. With that in mind, could I ask you for the actual code you'd advise that I place in the html to make this work as I'm afraid I don't fully understand what you mean by 'changing the class name' or 'change the active one'

Many thanks, Stephen

[Marcia]

>>I'm afraid I don't fully understand what you mean by 'changing the class name' or 'change the active one'

Stephen, in that case you'll have to delve into the CSS documentation, or some tutorials, on using CSS selectors and pseudo-classes. There's more, here's just one page:

[w3.org...]

[stephenc]

Thanks marcia, but in an effort to get this sorted quickly, could I ask for help in the actual coding change please. I know I'm going to have to spend time learning CSS but would like to get this problem sorted first

[SuzyUK]

Marcia is correct, there's a lot to learn.. How are you coding the pages, are they static or is it via a CMS/Blog software (Wordpress?)

The reason is that if they are static you will have to manually change the class name via the HTML for each of your navigation links depending on their section.. or if they're dynamically produced using some software application then you may need to delve into the PHP or the likes in order to change the HTML that's produced

However in the interest of answering your basic question using the code above.. There is no problem with the stylesheet (it appears it is applying the correct style to the correct class) it maybe more that you think CSS should know the page has changed.. however that's not what is does ;)

<a class="activenavitab" href="index.html">Home</a>
<a class="navitab" href="rates.html">Rates</a>

That is the HTML; the class is assigned VIA the HTML (red bit) - the blue bits are the actual class names, and the bits that will match a selector in the CSS file

Somewhere in your CSS File there will be selectors that look (or contain) something like these:

a.activenavitab {}
a.navitab {}

They are selecting, targeting and applying styles to
<a> class activenavitab
<a> class navitab

(in CSS the dot(.) means class a hash(#) means ID)

So if you want the active tab to flip depending on page you have the apply the different class name to the appropriate link via the HTML (that's the bit that CMS/Blog software generally does for you these days!)

You need the class name to be "activenavitab" on the relevant HTML link - whenever you are on the currently active page

i.e. if "Rates" is your currently active page the above code should likely need to change to:

<a class="navitab" href="index.html">Home</a>
<a class="activenavitab" href="rates.html">Rates</a>

hth and good luck

[stephenc]

Thanks Susy, I really appreciate your help here. I'm rushing out to work now but will try to get onto it tonight or tomorrow

Thanks again, Stephen