"a:hover"

Tygra · 3 Weeks Ago

Hi all, just doing another practise page and just experimenting with navigation bars, and in the CSS I'm setting two different properties for the "a:hover" element. However, I'm getting some of the effects from the first a:hover on the second and don't know how to correct this.

The code...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>Navigation Bars</title>

<style type="text/css">

.scott {margin-left: 10px;}

#nav li {display: inline;
padding-right: 3em;
padding-left: 3em;
padding-top: 10px;
padding-bottom: 4px;
background-color: black;
color: white;
font-size: 22px;}

a:link, a:visited {color: white;
text-decoration: none;}

a:hover {border: 1px dotted #800517;
color: red;
background-color: white;}

.a {background-color: #747170;
border-style: outset;
color: black;
font-size: 25px;
width: 150px;
text-align: center;
margin-bottom: 7px;}

.a a:link, a: visited {color: black;}

.a a:hover {color: white;
text-decoration: none;
background-color: #747170;}

</style>

</head>

<body>

<div class="scott">

<table>

<tr>

<td>

<ul id="nav">
<li><a href="home.htm">Home</a></li>
<li><a href="author.htm">The Author</a></li>
<li><a href="downloads.htm">Downloads</a></li>
<li><a href="contact.htm">Contact</a></li>
</ul>

</div>

<div class="a">

<a href="home.htm">Home</a></div>

<div class="a">
<a href="author.htm">The Author</a></div>

<div class="a">
<a href="downloads.htm">Downloads</a></div>

<div class="a">
<a href="contact.htm">Contact</a></div>

</div>

</body>

</html>

It's in the div class that I simpy named "a" that is still getting the effects from the first "a:hover" in the CSS list like the 1px dotted border with the #800517 colour.

I'm not sure how to correct this.

Thanks in advance!!

smokeycheech · 3 Weeks Ago

Hello Tygra - Welcome back!

I have opened your thread so as to get some useful input for you

Regards,

Smokeycheech

upgrader · 3 Weeks Ago

Hi Tygra,

Add "border: 0px" to the .a a:hover, that will sort it. However, the best method would be to put the top navigation links into a separate class too (or use #nav a:hover) as that would isolate the code.

Tygra · 3 Weeks Ago

Thanks Smokeycheech; and thanks Upgrader that has sorted the problem.

Upgrader, I don't suppose you know how to do drop down menus do you? As this is something I'd like to be able to do.

upgrader · 3 Weeks Ago

Try a google search for "css drop-down menus", you should get loads of results. If you get stuck with any tutorials, just ask

Tygra · 2 Weeks Ago

Upgrader, I found a tutorial, copied out and it worked, however I don't understand all of it, and I would'nt be sure how to make my own drop down menus with my own layout.

Here is the link to the tutorial page
CSS Pop-Out Menu Tutorial Page 1

Basically I understand everything up to "Absolutely Positioning, Relatively speaking". I understand some of it, but I need some help with the order that the "ul, ul, ul, li:hover, ul," etc, etc go in, I don't understand why they go in the orders that they do, and that's what I need to understand.

Tygra · 2 Weeks Ago

Upgrader, are you there mate?

3 Weeks Ago	#1
Tygra Silver Member Join Date: Dec 2007 Posts: 137 PC Experience: Experienced	"a:hover" Hi all, just doing another practise page and just experimenting with navigation bars, and in the CSS I'm setting two different properties for the "a:hover" element. However, I'm getting some of the effects from the first a:hover on the second and don't know how to correct this. The code... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head><title>Navigation Bars</title> <style type="text/css"> .scott {margin-left: 10px;} #nav li {display: inline; padding-right: 3em; padding-left: 3em; padding-top: 10px; padding-bottom: 4px; background-color: black; color: white; font-size: 22px;} a:link, a:visited {color: white; text-decoration: none;} a:hover {border: 1px dotted #800517; color: red; background-color: white;} .a {background-color: #747170; border-style: outset; color: black; font-size: 25px; width: 150px; text-align: center; margin-bottom: 7px;} .a a:link, a: visited {color: black;} .a a:hover {color: white; text-decoration: none; background-color: #747170;} </style> </head> <body> <div class="scott"> <table> <tr> <td> <ul id="nav"> <li><a href="home.htm">Home</a></li> <li><a href="author.htm">The Author</a></li> <li><a href="downloads.htm">Downloads</a></li> <li><a href="contact.htm">Contact</a></li> </ul> </div> <div class="a"> <a href="home.htm">Home</a></div> <div class="a"> <a href="author.htm">The Author</a></div> <div class="a"> <a href="downloads.htm">Downloads</a></div> <div class="a"> <a href="contact.htm">Contact</a></div> </div> </body> </html> It's in the div class that I simpy named "a" that is still getting the effects from the first "a:hover" in the CSS list like the 1px dotted border with the #800517 colour. I'm not sure how to correct this. Thanks in advance!!

3 Weeks Ago	#2
smokeycheech Mod Team Leader Join Date: Dec 2005 Location: Skynet HQ (kinda near PCHF bunker) Posts: 2,183 PC Experience: Learning more every day!	re: "a:hover" Hello Tygra - Welcome back! I have opened your thread so as to get some useful input for you Regards, Smokeycheech __________________ Prework~Speedfan~CCleaner~Rules~CCCP~BSOD *If an elephant never forgets, how come they never win mastermind?*

3 Weeks Ago	#3
upgrader Site Manager Join Date: Jul 2006 Location: /home/upgrader/ Posts: 7,250 PC Experience: Some Experience	re: "a:hover" Hi Tygra, Add "border: 0px" to the .a a:hover, that will sort it. However, the best method would be to put the top navigation links into a separate class too (or use #nav a:hover) as that would isolate the code. __________________ PCHF Rules--PCHF Prework--PCHF Downloads

3 Weeks Ago	#4
Tygra Silver Member Join Date: Dec 2007 Posts: 137 PC Experience: Experienced	re: "a:hover" Thanks Smokeycheech; and thanks Upgrader that has sorted the problem. Upgrader, I don't suppose you know how to do drop down menus do you? As this is something I'd like to be able to do.

3 Weeks Ago	#5
upgrader Site Manager Join Date: Jul 2006 Location: /home/upgrader/ Posts: 7,250 PC Experience: Some Experience	Re: "a:hover" Try a google search for "css drop-down menus", you should get loads of results. If you get stuck with any tutorials, just ask __________________ PCHF Rules--PCHF Prework--PCHF Downloads

2 Weeks Ago	#6
Tygra Silver Member Join Date: Dec 2007 Posts: 137 PC Experience: Experienced	Re: "a:hover" Upgrader, I found a tutorial, copied out and it worked, however I don't understand all of it, and I would'nt be sure how to make my own drop down menus with my own layout. Here is the link to the tutorial page CSS Pop-Out Menu Tutorial Page 1 Basically I understand everything up to "Absolutely Positioning, Relatively speaking". I understand some of it, but I need some help with the order that the "ul, ul, ul, li:hover, ul," etc, etc go in, I don't understand why they go in the orders that they do, and that's what I need to understand.

2 Weeks Ago	#7
Tygra Silver Member Join Date: Dec 2007 Posts: 137 PC Experience: Experienced	Re: "a:hover" Upgrader, are you there mate?

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode