CSS Navigation Question

Mofrait · 12-03-2007, 05:16 AM

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 Code:

<!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>

edijs · 12-03-2007, 10:05 AM

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

Matt555 · 12-03-2007, 11:35 AM

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.

edijs · 12-03-2007, 08:40 PM

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.

Matt555 · 12-03-2007, 08:43 PM

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?

Mofrait · 13-03-2007, 02:57 AM

I posted this as well on bleepingcomputer forums - this is the code I was suggested to use:

HTML Code:

#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.

Matt555 · 13-03-2007, 08:24 AM

The a:active state is only that colour when the mouse clicks on the link, not when the link is being viewed.

12-03-2007, 10:05 AM	#2 (permalink) Top
edijs Programmer Join Date: Sep 2006 Age: 22 Male Posts: 519 Times Helpful: 16 My Mood: Busy Status: Offline My Computer	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 __________________ Come to Latvia \| Crossfade, Element Eighty, Nickelback \| The Best Series Ever \| Love the classics: PlayStationOne \| Works well for me \| Opera rocks \| My Ride

12-03-2007, 11:35 AM	#3 (permalink) Top
Matt555 iMod Join Date: May 2005 Age: 21 Male Posts: 3,844 Times Helpful: 238 My Mood: Happy Status: Offline My Computer	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. __________________

12-03-2007, 08:40 PM	#4 (permalink) Top
edijs Programmer Join Date: Sep 2006 Age: 22 Male Posts: 519 Times Helpful: 16 My Mood: Busy Status: Offline My Computer	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. __________________ Come to Latvia \| Crossfade, Element Eighty, Nickelback \| The Best Series Ever \| Love the classics: PlayStationOne \| Works well for me \| Opera rocks \| My Ride

12-03-2007, 08:43 PM	#5 (permalink) Top
Matt555 iMod Join Date: May 2005 Age: 21 Male Posts: 3,844 Times Helpful: 238 My Mood: Happy Status: Offline My Computer	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? __________________

13-03-2007, 02:57 AM	#6 (permalink) Top
Mofrait Geek Trainee Join Date: Sep 2006 Gender: Male Posts: 34 My Mood: Confused Status: Offline	I posted this as well on bleepingcomputer forums - this is the code I was suggested to use: HTML Code: #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.

13-03-2007, 08:24 AM	#7 (permalink) Top
Matt555 iMod Join Date: May 2005 Age: 21 Male Posts: 3,844 Times Helpful: 238 My Mood: Happy Status: Offline My Computer	The a:active state is only that colour when the mouse clicks on the link, not when the link is being viewed. __________________

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)