Help
So here's something that took me a long time to crack using css only and when i finally found the solution, I couldn't believe how simple it was!!
If the title doesn't describe the technique well enough, let me clarify it for you.
When visiting a website, I always find it really handy if the navigation reflects what page i'm currently on, i.e if you are on the "about us" page of a site for example, isn't it cool when the "about us" link in the navigation is highlighted or is different to the other ones to indicate that this is where you currently are...? Well, in theory, the a:active should do it for you, now I don't know about you but it never worked for me... So I use to use php to replicate the effect but I knew deep down that there was a way round it with css, and then I found it.
Now I don't know if any of you use this.
When writing semantic code, the goal is to use markup in a efficient way thus limiting the amount a pointless tags. One thing a lot of people don't think of is assigning an id (or class) to the <body> tag.
Having an id on your body tag allow you some pretty cool stuff which I won't talk about in this post as it would be beside the point. However, adding an id to your <body> is the essence of this tutorial. So now... let's get coding!
Create a new html page and paste the code below in it
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>tutorial 01</title> <link href="default.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body id="index"> <ul id="navigation"> <li class="index"><a href="index.html">index</a></li> <li class="page2"><a href="second_page.html">second page</a></li> <li class="page3"><a href="third_page.html">third page</a></li> </ul> </body> </html>
Save this page as index.html now do file>save as re-save it as second_page.html but amend the <body> id to "page2" instead of "index" finally, repeat the operation(file>as) this time saving it as third_page.html and amend the <body> id to page3.
So now you should have 3 .html document called respectively index.html, second_page.html and third_page.html. Next, create a new document and paste the code below:
ul {
list-style:none;
}
ul li a {
color:#0066CC;
}
ul li a:hover {
color:#cc0000;
}
#index #navigation .index a,
#page2 #navigation .page2 a,
#page3 #navigation .page3 a {
color:#f4cb17;
padding-left: 10px;
text-decoration: none;
}Now if you open you open index.html in your browser and click on each link, you'll see that the navigation reflects what page you are on.
You can go here for a working example of this code.
I could spend ages trying to explain the code but i'm sure it will speaks for itself however, if you need an explanation, give me a shout and I'll help you out
Hope this will be helpful!
Bonsoir
Olivier
