PDA

View Full Version : links?

Sue
02-21-2004, 11:41 PM
ok so i have my style sheet set up so my links change background color when u hover on them. but i dont want my navigation links to do that because im using images. how do i over ride that?
bourdelson
02-21-2004, 11:53 PM
You can put your navigation links into a class and give the class different link properties.

a.nav:link { text-decoration: none; color:#000000; }
a.nav:visited { text-decoration: none; color:#000000; }
a.nav:active { text-decoration: none; color: #000000; }
a.nav:hover { color:#000000;text-decoration:none;}
Sue
02-22-2004, 12:25 AM
but then how would it know which are my navigation links?
bourdelson
02-22-2004, 12:30 AM
Well, you would know by putting them in a DIV class, but for some weird reason, I can't get it to work, so I'd disregard that suggestion.

One thing I thought of, though, do your images for your navigation have transparency? Because that's really the only way that anyone will be able to see the background color, is if you can see through the image. If you don't have transparency, I wouldn't worry about the background color on the hover.
Sue
02-22-2004, 12:38 AM
i think their transparent

http://www24.brinkster.com/lamargsa/home.shtml
bourdelson
02-22-2004, 12:52 AM
Yeah, they're transparent.


<html>
<head><title>Lamar GSA</title>
<LINK href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="layer1" style="position:absolute;
top:20px; left:0px; width:200px; height:400px; z-index:1; padding:0px;">
<a href="links.shtml" title="Links" border="0"><img src="links.gif"></a>
<br>
<a href="interact.shtml" title="interact" border="0"><img src="interact.gif"></a>
</div>
</body>
</html>

There was an unnecessary </center> tag below your DIV tag.

Anyway, for your links, you could try putting this in your external style sheet:


.nav A:link { text-decoration: none; color:#000000; }
A:visited { text-decoration: line-through; color:#000000; }
A:active { text-decoration: line-through; color:#000000; }
A:hover { color:#000000;text-decoration:none;}

Then for your DIV that you have your links in:


<div class="nav" style="position:absolute;
top:20px; left:0px; width:200px; height:400px; z-index:1; padding:0px;">
<a href="links.shtml" title="Links" border="0"><img src="links.gif" border="0" /></a>
<br>
<a href="interact.shtml" title="interact" border="0"><img src="interact.gif" border="0" /></a></div>