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.
<!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>
Full Version: Css Navigation Question
Perhaps use onclick instead?
I think this is what you want, but I'm not sure.
CODE
#navcontainer a:active {
background-color: #993300;
color: #FFFFFF;
}
background-color: #993300;
color: #FFFFFF;
}
Ooh, I didn't think of that. Probably a better solution than mine. 
If the hover and active are both the same, save space and time by combining them.
And another thing - if you're going to be using XHTML with CSS, you might want to use XHTML Strict DOCTYPE instead of Transitional. It's not required, but it's best to use Strict when using CSS extensively.
CODE
#navcontainer a:hover, #navcontainer a:active {
background-color: #993300;
color: #FFFFFF;
}
background-color: #993300;
color: #FFFFFF;
}
And another thing - if you're going to be using XHTML with CSS, you might want to use XHTML Strict DOCTYPE instead of Transitional. It's not required, but it's best to use Strict when using CSS extensively.
Thanks to everyone, I'll definitely give it a shot!
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.