Trying to do CSS rollover button image swapping, but failing....

Joined
Mar 12, 2008
Messages
87
Reaction score
0
Points
6
Location
Peoria, IL
Your Mac's Specs
17" MBP, 2.5Ghz Penryn Processor, 4GB of RAM, 200 GB 7200 RPM Hard Drive, High Res LED 17" Screen
I have been familiar with CSS, but this is my first time trying to do the entire site in it. I have the layout all set, but I want to do my navigation in CSS. I basically have different image states for roll over effects, but want to do it with CSS and not javascript. How do I make it work?

Here is my failing HTML and CSS thus far....


<body>
<div id="container">
<div id="top_half">
<div id="navigation">
<div id="home_button">
<a class="home_page" href="http://zumbekmedia.com/index.html"></a>
</div>
</div>
</div>
<div id="bottom_half"> </div>
</div>
</body>
</html>



#navigation {
margin: auto;
width:509px;
height:32px;
overflow:hidden;
position:absolute;
top:152px;
left:259px;
}

#home_button {
width:65px;
height:32px;
}

a.home_page {
background-image: url(images/home_page.jpg);
background-repeat: no-repeat;
}

a.home_page:hover {
background-image: url(images/home_on.jpg);
background-repeat: no-repeat;
}



Nothing shows up at all.
 
OP
DarkKnight369
Joined
Mar 12, 2008
Messages
87
Reaction score
0
Points
6
Location
Peoria, IL
Your Mac's Specs
17" MBP, 2.5Ghz Penryn Processor, 4GB of RAM, 200 GB 7200 RPM Hard Drive, High Res LED 17" Screen
I got it working yesterday....I had to put an   as a place holder for the link to trigger the roll over effects.
 

Shop Amazon


Shop for your Apple, Mac, iPhone and other computer products on Amazon.
We are a participant in the Amazon Services LLC Associates Program, an affiliate program designed to provide a means for us to earn fees by linking to Amazon and affiliated sites.
Top