Solved

navigation buttons on mouseover with css

Posted on 2010-09-22
5
278 Views
Last Modified: 2012-05-10
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

0
Comment
Question by:webdott
  • 2
  • 2
5 Comments
 
LVL 6

Accepted Solution

by:
Ryan Smith earned 250 total points
Comment Utility
the link, visited, hover and active have to be in that order.  when using class= use a div tag.
<!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:hover     { color:#000000; text-decoration:none ; font-family:Arial, Helvetica, sans-serif; font-size:15pt; background-color:#CCCCCC; filter:alpha(opacity=70); opacity:0.7;  }
.nav:active    { color:#000000; text-decoration:none ; font-family:Arial, Helvetica, sans-serif; font-size:15pt;  }



</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 style="text-align: center">
<a href="opac.html"><div class=nav>hello</div></a></td>
<td style="text-align: center"><div class=nav><a href="opac.html">hello</a></div></td>
</tr>
</table>

</td>
</tr>
</table>

</body>

</html>

Open in new window

0
 
LVL 6

Expert Comment

by:Ryan Smith
Comment Utility
of couse put the div before the anchor tags :)
0
 

Author Comment

by:webdott
Comment Utility
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
0
 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 250 total points
Comment Utility
The 'pseudo-class' are used with 'a' for anchor.  http://www.w3schools.com/css/css_pseudo_classes.asp  The order is important, 'active' must come after 'hover'.
<!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 a:link      { color:#99CC00; text-decoration:none ; font-family:Arial, Helvetica, sans-serif; font-size:15pt;  }
.nav a:visited   { color:#99CC00; text-decoration:none ; font-family:Arial, Helvetica, sans-serif; font-size:15pt;  }
.nav a: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;  }
.nav a:active    { color:#99CC00; text-decoration:none ; font-family:Arial, Helvetica, sans-serif; font-size:15pt;  }
 
 
</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

0
 

Assisted Solution

by:webdott
webdott earned 0 total points
Comment Utility
Thanks for all the help. I did make a mistake with the order of the link styles, but the opacity
issue still existed on the links making them opac as well.

I ended up having to create 2 opac .png images that would change when moused over
to create what i wanted. I am going to reward points to both due to the "psuedo-class" order.

They both would work if I did not want to have links or text in the picture.

Below is the code that I finally used. Remember, that I used Transparent Opac images to create this.
The navon.png is just a transparent image with a gray of 50% opacity.
The navonON.png is also a transparent image with a gray of 70% opacity.

I did not use the psuedo-class for my site because I ended up having the colors change on mouseover,
but i included it in the first link just in case someone wanted to see how to do that instead.
I would not recommend using it because it is just code not needed, you could save that
for your links in the page instead, but that is up to them.

thanks again

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">















                        
                                                
                                                Link
                                                
                                                two
                                                
                                                three
                                                
                                                four
                                                
                                                five
                        











<!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" />


<style type="text/css">

.nav		   { 
				background-image:url('images/navon.png'); 
				background-repeat:repeat-x; 
				font-family:Arial, Helvetica, sans-serif; 
				font-size:15pt; 
				font-weight:bold; 
				color:#FFFFFF
				}
.nav:hover     { 
				background-image:url('images/navonON.png'); 
				background-repeat:repeat-x;
				font-family:Arial, Helvetica, sans-serif; 
				font-size:15pt; 
				font-weight:bold; 
				color:#000000}

a   {color: #FFFFFF; text-decoration:none}
a:visited {color: #FFFFFF; text-decoration:none}
a:active {color: #FFFFFF; text-decoration:none}
a:hover {color: #E8FFD9; text-decoration:none}

</style>


</head>

<body style="background-color: #6698C1">

<table style="width: 625px; height: 65px" cellpadding="0" cellspacing="0" align="center" >
				<tr>
								<td class="nav" onClick=location.href="default.htm" style=" width:125px" align="center">
								<a href="default.htm">Link</a></td>
								<td class="nav" onClick=location.href="default.htm" style=" width:125px" align="center">
								two</td>
								<td class="nav" onClick=location.href="default.htm" style=" width:125px" align="center">
								three</td>
								<td class="nav" onClick=location.href="default.htm" style=" width:125px" align="center">
								four</td>
								<td class="nav" onClick=location.href="default.htm" style=" width:125px" align="center">
								five</td>
				</tr>
</table>




</body>

</html>

Open in new window

0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Form submit issue 11 51
Animate a Title 7 33
Image decoding from Camera 3 42
C3-->D3 Line Chart 4 16
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now