PDA

View Full Version : nav

sb4short
07-28-2008, 12:44 AM
Why is hover not working.


<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Welcome to Streams of Dreams Fly Shop - NJ's premier fly fishing source!</title>

<style type="text/css">

#wrapper {margin: 0px auto; padding: 0px; width: 850px; text-align: center; }

#banner {width: 850px; height: 135px; }
#banner img {width: 850px; height: 135px; }

#nav {width: 850px; height: 32px; }
#nav ul {margin-left: 0px; padding-left: 0px; list-style: none; float: left; width:100%; }
#nav ul li {float: left; }
#nav ul li a {width: 85px; display:block; ; border-bottom: none; padding: 0px; margin-right: 0px; background-color:#ffffff; text-decoration:none; color: #333; text-align: center; }

a.nav:link { color: #000000; }
a.nav:visited { color: #a1b2c3; }
a.nav:hover { color: #b2c3a1; }
a.nav:active { color: #c3a1b2; }

#content1 {width: 850px; height: 20px; vertical-align: top; }
#content2 {width: 850px; height: 306px; vertical-align: top; }
#content3 {width: 850px; height: 250px; vertical-align: top; }

#copyrite {width: 850px; height: 72px; }
#copyrite img {width: 850; height: 72px; }


.style1 {color: #663333}





</style>

</head>

<body>

<div id="wrapper">
<div id="banner">
<img src="Images/Banners/bannerNW.gif" alt="bannernw" width="850" height="135" /></div>

<div id="nav">

<ul class="nav">
<li><a href="index.html">Home</a></li>
<li><a href="flyshopt.html">Fly Shop</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="speycast.html">Spey</a></li>
<li><a href="destinations.html">Destinations</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="lessons.html">Lessons</a></li>
<li><a href="bios.html">Bios</a></li>
<li><a href="history.html">History</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul></div>

<div id="content1"></div>
<div id="content2"></div>
<div id="content3"></div>
<div id="copyrite"><img src="Images/Banners/copyrightbar.jpg" alt="CopywriteBar" /></div>

</div>

</body>

</html>
JoeyD
07-28-2008, 01:20 AM
.nav li a:link { color: #000000; }
.nav li a:active { color: #c3a1b2; }
.nav li a:hover { color: #b2c3a1; }
.nav li a:visited { color: #a1b2c3; }

also this...

#nav ul li a {width: 85px; display:block; ; border-bottom: none; padding: 0px; margin-right: 0px; background-color:#ffffff; text-decoration:none; color: #333; text-align: center; }

..overides your hover.

Cheers,
sb4short
07-28-2008, 01:47 AM
Thanks, I appreciate the help.
Pegasus
07-28-2008, 01:54 AM
Joey, you've got the order messed up a bit. It's link, visited, hover then active.
JoeyD
07-28-2008, 10:51 AM
Funny how much stuff we gotta keep in our brains. What i said up ^^there is especially goofed up b/c it was late but i've been going by logical progression of events, i mean it's not visited until after its been active.

So for fancy nav bars i've been saying stuff like this for ages...

a, a:link, a:active, a:visited{
color: #3300FF;
background: none;
border: 0;
}

...and it never occured to me i was doing something wrong because the active and visited states are identical to the default state and the hover follows in its own definition so it works.

:eek:

Now i've gotta go through all my sites and see what my standard links are doing. Thanks.

Why don't the CSS validator complain? Because it's my problem? *grumble*
Pegasus
08-01-2008, 09:13 PM
Ah, but :link and :visited are static states for the link. :hover and :active are dynamic states. Something is happening while you're hovering or when the link is clicked. First the page shows up and the link is passively waiting for you to do something. Then you hover over it, change the state without changing the page, then you click on the link, activating it. Once you return to the page, the link is marked as having been followed, but again, it's in the passive state. You can hover over a visited link and it will change state again.