February 27, 200719 yr Hello! 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
March 2, 200719 yr Wow, you really craked it. I was actually wondering how to do such thing using css. To agree with you a:active only showed me links I visited before and almost never what I was on. Yes its strange but thats the truth. What I used to do was simply make the links different color manually and it took way too much time. Now I don't have to. Thank you soo much. You saved me great deal of time. I'm bowing down to your supperiority. **bow** Great tutorial.
March 2, 200719 yr Hey Thanks for the info - I'm sure that's what I used to do, but now that I've started using images + css lists to do my nav I've reverted back to PHP and give each page a specific name and this is reflected with the IDs I give each navigation element.
December 18, 200718 yr Do you need the class on the second and third links? They seem a bit redundant if you're not using them for styling...or am I missing something? Couldn't get the demo to work to test it you see.
April 21, 200818 yr I took this code, then duplicated index.html twice calling the duplicates second_page.html and third_page.html, but the code does not work on anything but index.html ? Am I to change a class or id somewhere per document ?
April 21, 200818 yr Just to clarify: The :active pseudo-class isn't suppose to work like you're thinking. It is applied when the element is being 'activated' i.e when the mouse button is clicked. (when the mouse button is released, the element isn't active anymore) Similar to onMouseDown in javascript.
Create an account or sign in to comment