Help
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>
Page 1 of 1
Css Navigation Question bg color on blocks
Back to top
#2
- Hail Groovicus!
-
- Group: Moderator
- Posts: 9,605
- Joined: 05-June 04
- Gender:Male
- Location:Centerville, SD
Posted 12 March 2007 - 12:35 AM
Perhaps use onclick instead?
"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens
#3
- Forum Regular
-
- Group: Members
- Posts: 159
- Joined: 09-December 06
- Gender:Male
- Location:Somewhere East of Where You Are (think about it)
Posted 12 March 2007 - 11:21 AM
I think this is what you want, but I'm not sure.
#navcontainer a:active {
background-color: #993300;
color: #FFFFFF;
}
#4
- Hail Groovicus!
-
- Group: Moderator
- Posts: 9,605
- Joined: 05-June 04
- Gender:Male
- Location:Centerville, SD
Posted 12 March 2007 - 12:28 PM
Ooh, I didn't think of that. Probably a better solution than mine. 
"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens
#5
- Forum Regular
-
- Group: Members
- Posts: 159
- Joined: 09-December 06
- Gender:Male
- Location:Somewhere East of Where You Are (think about it)
Posted 12 March 2007 - 05:19 PM
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.
#navcontainer a:hover, #navcontainer a:active {
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.
#6
- New Member
-
- Group: Members
- Posts: 2
- Joined: 11-March 07
Posted 12 March 2007 - 09:57 PM
Thanks to everyone, I'll definitely give it a shot!
Share this topic:
Page 1 of 1