CSS Navigation Question

Discussion in 'Web Design & Programming' started by Mofrait, Mar 12, 2007.

  1. Mofrait

    Mofrait Geek Trainee

    Likes Received:
    0
    Trophy Points:
    0
    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>
     
  2. edijs

    edijs Programmer

    Likes Received:
    9
    Trophy Points:
    38
    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
     
  3. Matt555

    Matt555 iMod

    Likes Received:
    98
    Trophy Points:
    48
    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.
     
  4. edijs

    edijs Programmer

    Likes Received:
    9
    Trophy Points:
    38
    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.
     
  5. Matt555

    Matt555 iMod

    Likes Received:
    98
    Trophy Points:
    48
    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?
     
  6. Mofrait

    Mofrait Geek Trainee

    Likes Received:
    0
    Trophy Points:
    0
    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.
     
  7. Matt555

    Matt555 iMod

    Likes Received:
    98
    Trophy Points:
    48
    The a:active state is only that colour when the mouse clicks on the link, not when the link is being viewed.
     

Share This Page