CSS Navigation Question

M

Mofrait

Geek Trainee
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.
 
You must log in or register to reply here.
Back
Top