HTML / CSS question

[zoidberg]

NB: Please ignore spaces after leading < (it's to stop it parsing it to HTML)

I have a nav menu made from a list and css. Here is the HTML that builds the menu:

html said:

< div id="nav-menu">
< ul>
< li>< a href="page1.htm">page one< /a>< /li>
< li>< a href="page2.htm">page two< /a>< /li>
< /ul>
< /div>

...and here are the relevant bits of the css:

css said:

#nav-menu ul {
list-style: none;
padding: 0;
margin: 0;
}

#nav-menu li {
float: right;
margin: 0 2px;
}

#nav-menu li a {
background-color: #B3A48F;
display: block;
color: #FFFFFF;
}

#nav-menu li a:hover {
background-color : #95A8B9;
color: #FFFFFF;
}

This works fine. The background of the links are coloured #B3A48F and change to #95A8B9 when you hover on them.

However, the question is, if I am on a certain page, how do I change the link in the nav menu to be the hover over colour (i.e. so it looks "active"?
I've tried adding an item to the css called li a:active but it doesn't work. Do I need to write in the HTML something like < li class="blue">< a href="page2.htm">page two< /a>< /li> ?

Hope this is clear! Cheers.

Edited by zoidberg on Wednesday 22 November 18:44

[judas]

Yep - you'll need to define it explicitly unless you use something server-side to muck about with things. The html/css has no way of knowing what page it's on.

[zoidberg]

judas said:

Yep - you'll need to define it explicitly unless you use something server-side to muck about with things. The html/css has no way of knowing what page it's on.

Cool. Any idea how ?

[Plotloss]

zoidberg said:

judas said:

Yep - you'll need to define it explicitly unless you use something server-side to muck about with things. The html/css has no way of knowing what page it's on.

Cool. Any idea how ?

Use a specific class for the item you want to change colour.

So #body ul li a.classname

Then in the HTML explicity refer to that classname in the class= tags

I think.

Did my website a year ago and things get very hazy, very quickly...

[judas]

Is the site you're building static html or will it use any kind of server-side scripting such as PHP or ASP?

[zoidberg]

Site is in static HTML unfortunately. Otherwise would use url params.

Thanks for help so far, will try defining a new class.

[zoidberg]

Blundered my way through and it seems to work...

html said:

< div id="nav-menu">
< ul>
< li>< a href="page1.htm">page one< /a>< /li>
< li>< a href="page2.htm" id="current">page two< /a>< /li>
< /ul>
< /div>

css said:

#nav-menu li a:hover, #nav-menu li a#current {
background-color : #95A8B9;
color: #FFFFFF;
text-decoration: none;
}

Thanks all.

Edited by zoidberg on Wednesday 22 November 21:33

[Leithen]

The trick here is to give each page a different body id ie <body id="home">

Then you can target all the different page id's in one css rule.