...

View Full Version : Resolved CSS hover effect will not work



Xellic
11-18-2012, 11:31 PM
Its very strange, I had it working for a little while and then all of the sudden it stopped working. I'm pretty sure I didn't touch any of my code relating to my navigation bar. If anyone can let me know what is wrong that would be greatly appreciated. Heres my code. (The hover effect is not working for my navigationbar)


<!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-Type" content="text/html; charset=utf-8" />
<title>Revision 2</title>

<style type="text/css">
body{
width:90%;margin:auto;min-width:600px;max-width:5000px;
background-image: url('background3.jpg')
}
#header {
position:absolute;
}
#logo {
position:absolute;
top: -70px;
left: -70px;
z-index: 2;
}
#mainContent {
position:absolute;
top: 155px;
width: 915px;
height: 800px;
background-color: #CCF;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
overflow: hidden;
}
#mainNavigationBar {
position:absolute;
top: 100px;
width: 913px;
height: 45px;
background-color: #CCF;
overflow: hidden;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border: solid 1px white;
}
#mainNavigationBar a {
color: #666;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
text-decoration: none;
display: inline-block;
line-height: 45px;
padding-left: 10px;
padding-right: 10px;
}
#mainNavigationBar a: hover {
color: #0C6;
background-color: #0CF;
}
</style>
</head>

<!------------------------------------------------------------------------>

<body>
<div id="wrapper"> <!--Wrapper containing all website elements-->
<div id="header">
<a href="#"><img src="header3.jpg" /></a>
</div>
<div id="logo">
<a href="#"><img src="logo.png" /></a>
</div>
<div id="mainContent"> <!--This is the main box of the site-->
</div>
<div id="mainNavigationBar">
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
</div>

</div> <!--Final wrapper div-->

</body>
</html>

elhippie
11-19-2012, 01:09 AM
take away this here'm


#mainNavigationBar a {
color: #666;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
text-decoration: none;
display: inline-block;
line-height: 45px;
padding-left: 10px;
padding-right: 10px;
}
#mainNavigationBar a: hover {
color: #0C6;
background-color: #0CF;
}

Excavator
11-19-2012, 01:20 AM
Hello Xellic,
You have a space where one does not belong. You can find little mistakes like that by validating your code. See the links in my signature line about validation.

#mainNavigationBar a: hover should look more like this -

#mainNavigationBar a:hover {

Xellic
11-19-2012, 02:01 AM
Hello Xellic,
You have a space where one does not belong. You can find little mistakes like that by validating your code. See the links in my signature line about validation.

#mainNavigationBar a: hover should look more like this -

#mainNavigationBar a:hover {

Okay well this is very strange. I have fixed that error and for some reason the first 5 pages do not have the hover effect. However, any pages after this first 5 do have the effect. o.o

Xellic
11-19-2012, 02:56 AM
Hmm nevermind, it seems that I managed to get it working when I added a 'z-index'.

Excavator
11-19-2012, 03:16 AM
You don't need all that absolute positioning. See the pitfalls of absolute positioning (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/).
You might consider just letting the document flow naturally instead. Floats and margins will make your layout look just fine.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum