0

I'm only adding this code to a few pages. I have the background changing over each linked hover, but is there anyway for me to allow one item remain that background color to indicate which page my visitors are currently on. If you can show me how to do one, I can figure out the rest. Thanks for any help. Code below.

<style type="text/css">
 #menu1 ul { list-style: none; margin: 0; padding: 0; } #menu1 img { border: none; } #menu1 { width: 180px; border: 0px solid #ccc; margin: 10px; } #menu1 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu1 li a:link, #menu1 li a:visited { color: #444444; display: block; background: url(http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/menu1.gif); padding: 8px 0 0 30px; } #menu1 li a:hover, #menu1 li #current, #menu1 li a:active { color: #000000; background: url(http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/menu1.gif) 0 -32px; padding: 8px 0 0 30px; }
</style>

  <div id="menu1"> <ul> <li><a href="#1">Registration</a></li> <li><a href="#2">Change Player</a></li> <li><a href="#3">Past Champions</a></li> <li><a href="#4">Rules</a></li> <li><a href="#5">Other Stuff</a></li> </ul> 
<br>
<ul> <li><a href="#1">Other Links</a></li> <li><a href="#2">Change Player</a></li> <li><a href="#3">Past Champions</a></li> <li><a href="#4">Rules</a></li> <li><a href="#5">Other Stuff</a></li> </ul> 
<br>
<ul> <li><a href="#1">Other Links</a></li> <li><a href="#2">Change Player</a></li> <li><a href="#3">Past Champions</a></li> <li><a href="#4">Rules</a></li> <li><a href="#5">Other Stuff</a></li> </ul> 
</div>
2
Contributors
2
Replies
5
Views
6 Years
Discussion Span
Last Post by jonsan32
1

Hi Jonsan,

Typically, people set a class="selected" on the current menu, eg.:

<a href="#3" class="selected">Past Champions</a>

I generally have to play around with the CSS for a while before it behaves correctly but it will be something like this:

#menu1 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; background: url(http://i40.photobucket.com/albums/e250/jonsan32/New%20Album/menu1.gif); padding: 8px 0 0 30px; } 

#menu1 li a:link, 
#menu1 li a:visited { color: #444444; display: block; background-position: 0 0; } 

#menu1 li a.selected, 
#menu1 li a:hover, 
#menu1 li a:active { color: #000000; background-position: 0 -32px; }

I'm not sure if the a:link and a:visited directives might trump .selected on CSS "specificity" rules. If so, then try:

#menu1 li a.selected:link, 
#menu1 li a.selected:visited, 
#menu1 li a:hover, 
#menu1 li a:active { color: #000000; background-position: 0 -32px; }

I'm also not sure about display:block in your post, but I have left it in there.

Regards
Airshow

Edited by Airshow: n/a

Votes + Comments
Another perfect answer. Thanks!
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.