Hi, I have created quite a few very simple sites for people, and for the latest one I decided to use CSS for the navigation, basically so the block changes color when rolled-over. I didn't really think it through, because I want the block to remain the roll-over color once clicked - and since I'm using <ul>, I can't just change the bg color of one block.. If I'm making any sense. Here's the code I'm using, which if you copy/paste it all should work to show you the navigation. The goal is to change the background of just one link to #993300. Anyone know how to do this? If not, I can always use images, but this would be easier & less hassle I think. Thanks so much for any input. HTML: <!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> <title>Horizontal Navigation Bar w/Rollover Effect</title> <style type="text/css"> #navcontainer ul { margin: 0px; padding: 0; list-style-type: none; } #navcontainer li {margin: 0 0 1px 0; } #navcontainer a { display: block; color: #ffffff; background-color: #999999; text-decoration: none; width: 150px; padding-top: 8px; padding-bottom: 8px; } #navcontainer a:hover { background-color: #993300; color: #FFFFFF; } .links { font-family: Arial, Helvetica, sans-serif; font-size: 12px; vertical-align: middle; text-indent: 10px; text-align: left; } </style> </head> <body> <div id="navcontainer"> <ul class="links"> <li><a href="index.html">About Us</a></li> <li><a href="#">Sponsers</a></li> <li><a href="#">Memberships</a></li> <li><a href="#">News and Events</a></li> <li><a href="#">Race Results</a></li> <li><a href="#">Photo Gallery</a></li> <li><a href="#">Dory Personals</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> </body> </html>
I think that the only option here is to define a new class like Code: .visited a:visited{ /*style defs*/ } Or if this is not appropriate, you can try and take a look in here! Good luck1
That'll leave all visited links the same colour - I think if you want just the link that you're currently on to be coloured you'll have to use code other than (x)HTML.
Thanks for the note, Matt555. That's right. I apologise for this incorrect statement. But for the sake of faster implementation time, I'd say, go with the images.
If you're using a different static HTML page for each link the you could ahve a new class for the one 'active' link - on each page just set that list element as the 'active' class, that'd work right?
I posted this as well on bleepingcomputer forums - this is the code I was suggested to use: HTML: #navcontainer a:active { background-color: #993300; color: #FFFFFF; } Which is I think what Matt was implying I use? I'm going to give it a shot, thanks for all the responses, very helpful - I'll let you know how it turns out, case anyone else turns up w/this question.
The a:active state is only that colour when the mouse clicks on the link, not when the link is being viewed.
