asked on

navigation buttons on mouseover with css

i am trying to create a navigation with the following CSS

the issue is that i want the links to have a certain font-family, font-size, & font color

the background is changing like i want with the opacity,
but the links should be a lime green and change to a bright
they are not changing and they are becoming opac as with the background

anyone know how to change this to work right?

here is the link to what i have:
http://myblankweb.com/opac.html

thanks

<!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> 
<meta http-equiv="Content-Language" content="en-us" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>opacity nav</title> 
 
<style> 
 
.nav:link      { color:#99CC00; text-decoration:none ; font-family:Arial, Helvetica, sans-serif; font-size:15pt;  }
.nav:visited   { color:#99CC00; text-decoration:none ; font-family:Arial, Helvetica, sans-serif; font-size:15pt;  }
.nav:active    { color:#99CC00; text-decoration:none ; font-family:Arial, Helvetica, sans-serif; font-size:15pt;  }
.nav:hover     { color:#99CC00; text-decoration:none ; font-family:Arial, Helvetica, sans-serif; font-size:15pt; background-color:#CCCCCC; filter:alpha(opacity=70); opacity:0.7;  }
 
 
</style> 
 
 
</head> 
 
<body style="margin: 0px; background-image: url('images/bg.png');"> 
 
<table style="width: 100%; height:65px; background-color:#999999; filter:alpha(opacity=50); opacity:0.5;" cellpadding="0" cellspacing="0" align="center"> 
<tr> 
<td> 
 
<table style="width: 975px;height:65px" cellpadding="0" cellspacing="0" align="center"> 
<tr> 
<td class="nav" style="text-align: center"> 
<a href="opac.html">hello</a></td> 
<td class="nav" style="text-align: center"><a href="opac.html">hello</a></td> 
</tr> 
</table> 
 
</td> 
</tr> 
</table> 
 
</body> 
 
</html>

Open in new window

<!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> 
<meta http-equiv="Content-Language" content="en-us" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>opacity nav</title> 
 
<style> 
 
.nav:link      { color:#99CC00; text-decoration:none ; font-family:Arial, Helvetica, sans-serif; font-size:15pt;  }
.nav:visited   { color:#99CC00; text-decoration:none ; font-family:Arial, Helvetica, sans-serif; font-size:15pt;  }
.nav:active    { color:#99CC00; text-decoration:none ; font-family:Arial, Helvetica, sans-serif; font-size:15pt;  }
.nav:hover     { color:#99CC00; text-decoration:none ; font-family:Arial, Helvetica, sans-serif; font-size:15pt; background-color:#CCCCCC; filter:alpha(opacity=70); opacity:0.7;  }
 
 
</style> 
 
 
</head> 
 
<body style="margin: 0px; background-image: url('images/bg.png');"> 
 
<table style="width: 100%; height:65px; background-color:#999999; filter:alpha(opacity=50); opacity:0.5;" cellpadding="0" cellspacing="0" align="center"> 
<tr> 
<td> 
 
<table style="width: 975px;height:65px" cellpadding="0" cellspacing="0" align="center"> 
<tr> 
<td class="nav" style="text-align: center"> 
<a href="opac.html">hello</a></td> 
<td class="nav" style="text-align: center"><a href="opac.html">hello</a></td> 
</tr> 
</table> 
 
</td> 
</tr> 
</table> 
 
</body> 
 
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Ryan Smith

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Ryan Smith

of couse put the div before the anchor tags :)

webdott

ASKER

thanks, but i still have the same thing going on. the font style, color, size is still not correct and
when i mouseover they font becomes opac with the background

SOLUTION

Dave Baldwin

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

webdott

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial