CSS text Navigation Bar question? 1

[zavsays]

Hi there,

Basically, I'm trying to create vertical navigation and although I've succeeded in getting the rollovers to work the way I want ...they lighten up when you mouse over them .... I can't get the current link (in this case aboutus.com) to STAY a lighter color.

http://www.bigbandsandbignames.com/hey/aboutus.html

I want the visitor to know what page they're on in the navigation bar.

Does anyone know how to make this effect happen?

Thanks

Here's the css code ...

@charset "UTF-8";
body {
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.tiny {
font-family: Helvetica, Verdana, Arial, sans-serif;
font-size: 9px;
color: #666666;
}
.bodygray {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1
.em;
color: #333333;
font-size: 9pt;
}
.Title {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 13pt;
color: #FF6600;
}
.arial {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #FF6600;
}
.body1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 9pt;
color: #FF7215;
}
.grayboldBody {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 9pt;
font-weight: bold;
color: #666666;
}
.bodygrayindent {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 9pt;
color: #333333;
text-indent: 12px;
}
.body1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 9pt;
color: #800000;
}
abbr {
border-top-color: #CFC3DF;
border-right-color: #CFC3DF;
border-bottom-color: #CFC3DF;
border-left-color: #CFC3DF;
}
.sidebarhead {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #800000;
}
.sidebarbody {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #333333;
}
#Navigation {
background-color: #CFC3DF;
height: 78px;
list-style-position: inherit;
position: inherit;
z-index: inherit;
}
#nav ul {
width: 165px;
margin-left: -40px;
}
#nav li {
list-style:none;
}
#nav ul li a{
color:#68689c;
background-color: #CFC3DF;
padding:5px 12px 5px 12px;
display:block;
}
#nav ul li a:hover{
background-color:#d9cee7;
}
.menutext {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
color: #68689c;
line-height: 14px;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}

 

[trollacious]

You'll have to do that with either server-side or client-side scripting. I recommend using server side scripting to read the page name and then write an appropriate color in the style for that link.

Lee

 

[ChrisHunt]

You're already most of the way there - I see you've added a class to the current menu item:

<div id="nav">
  <ul>
    <li><a href="certificates.html" class="menutext">CERTIFICATES OF INSURANCE</a></li>
    <li><a href="index.html" class="menutext">HOME</a></li>
    <li class="current"><a href="aboutus.html" class="menutext">ABOUT US</a></li>
    <li><a href="highlights.html" class="menutext">COVERAGE HIGHLIGHTS</a></li>
    <li><a href="eil.html" class="menutext">EIL COVERAGE</a></li>
    <li><a href="compare.html" class="menutext">COMPARE YOUR COVERAGE</a></li>
    <li><a href="claims.html" class="menutext">CLAIMS INFORMATION</a></li>
    <li><a href="risk.html" class="menutext">RISK &amp; LOSS</a></li>
    <li><a href="states.html" class="menutext">COVERAGE STATES</a></li>
    <li><a href="contact.html" class="menutext">FOR MORE INFO/<br />
      CONTACT US</a></li>
  </ul>
</div>

All you have to do is apply some CSS to it:

#nav ul li.current a{
   background-color: #666
}

Incidentally, there's no reason to add a [tt]class="menutext"[/tt] to every line in the menu. Just apply your rules to [tt]#nav li[/tt] instead.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[zavsays]

You ... my friend ... are awesome!!!

I can't tell you how much time I spent on the internet trying to make this simple effect happen.

A star for you Chris .... and many thanks.