PDA

View Full Version : Text Hover Doesnt Work But Did Before


louis bloomfield
04-05-2011, 11:32 PM
Hi all,

I'm in the midst of doing my website... right at the beginning. In the navigation bar i have my text links. I started with my index.html page, and added the css code so that the links changed when the mouse is hovered over it. (i used a dummy to temporarily set them up as links using '#', my plan was to change them when the corresponding page was created)

So, for example...
my links were... Projects, Clients, Portfolio, About, Contact.

(all with temporary links as '#' with hover working fine in preview)

I then finished my contact page, and proceeded to change the link from '#' to 'contact.html'.

Since doing this the hover effect does not work on the contact link on my navigation bar...? And its totally baffling me.

The same thing happened when i finished my clients page.

Here is my code from my index.html page regarding the hover section.
(hover css works for only the dummy links)

<title>Index</title>
<style type="text/css">
body {
background-color: #FFF;
}
.linkstyle {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000;
text-decoration: none;
}
.linkstyle a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000;
text-decoration: none;
}
.linkstyle a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #00F;
text-decoration: none;
}
.linkstyle a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000;
text-decoration: none;
}
.linkstyle a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000;
text-decoration: none;
}
</style>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="logo"><a href="index.html"><img src="images/logo.jpg" width="250" height="35" alt="logo" /></a></div>
<div id="copyright">All Images Louis Bloomfield Photography 2011</div>
<div id="navigation">
<p class="linkstyle"><a href="#">Projects</a> <a href="clients.html">Clients</a> <a href="#">Portfolio</a> <a href="#">About</a> <a href="contact.html">Contact</a></p>
</div>
<div id="headerImg"></div>
<div id="bodyArea">
</div>
</div>
</body>
</html>

DWcourse
04-05-2011, 11:39 PM
For starters you need to have the a:hover rule AFTER the a:visited rule.

louis bloomfield
04-06-2011, 01:03 AM
dude. your ace...
Im not really quite sure how i got this wrong i was following a TUTvid tutorial on youtube. Must've just pooped somewhere.

Anyway, thankyou for you advice, its worked perfectly.

Can i buy you a boat?

DWcourse
04-06-2011, 01:54 AM
Can i buy you a boat?

A small sail boat would be nice: http://www.elmarine.com/images/maltese-falcon-yacht-main.jpg

gentleone
04-06-2011, 12:16 PM
Im not really quite sure how i got this wrong i was following a TUTvid tutorial on youtube.
Don't rely too much on YouTube tuts or even better don't rely at all on them... YouTube is not the right place to learn web design/development.

Just go to http://www.w3schools.com/ if you're a beginner, but if you have trouble with written tutorials and rather prefer vids then lynda.com is a much better place then YouTube.
http://www.lynda.com/Dreamweaver-training-tutorials/185-0.html