- 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;
positionbsolute;
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.
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;
positionbsolute;
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.