ok now I'm having another problem. I took the code from that page and put it into my index page and the navigation doesn't seem to be showing. I put borders around where it should be and the page wrapper. Any help?
Link: http://www.acousticresources.net/redesign
HTML:
<!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>Acoustic Resources | Classroom Noise Reduction Product</title>
<link rel="stylesheet" type="text/css" href="css/acoustic-styles.css" />
</head>
<body>
<div id="wrapper">
<div id="navigation">
<ul id="navmenu">
<li id="about"><a href="#" title="About"></a></li>
<li id="why"><a href="#" title="Why"></a></li>
<li id="testimonials"><a href="#" title="Testimonials"></a></li>
<li id="purchase"><a href="#" title="Purchase"></a></li>
<li id="contact"><a href="#" title="Contact"></a></li>
</ul>
</div><!--end of navigation-->
<img class="banner" src="img/main-banner.gif" alt="Is this the only time when things quiet down in your classroom?" />
</div>
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document
Background: #7BC2E0
Content: #85C6E2
Footer & Nav: #17302D
Hover: #8ECAE4
*/
body {
background:#7BC2E0;
}
#wrapper {
margin:0 auto;
width:960px;
border:1px solid green;
}
img.banner {
padding: 50px 130px;
}
/*-----Navigation-----*/
a:link {
color:#CC0000;
font-weight:bold;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a:visited {
color:#CC0000;
font-weight:normal;
text-decoration:none;
}
div#navigation {
margin-top: 50px;
float:right;
}
ul#navmenu {
width:750px;
height:24px;
margin:0;
padding:0;
background:url(img/navigation.jpg) no-repeat;
position:relative;
border:1px solid red;
}
#navmenu li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navmenu li,#navmenu a {
height: 24px;
display: block;
}
img {
border:none;
}
#navmenu a{
text-decoration:none;
}
#navmenu a i {
visibility: hidden;
}
#about, #aboutcurrent {left: 0; width: 108px;}
#why, #whycurrent {left: 108px; width: 196px;}
#testimonials, #testimonialscurrent {left: 304px; width: 164px;}
#purchase, #purchasecurrent {left: 468px; width: 182px;}
#contact, #contactcurrent {left: 650px; width: 99px;}
#about a:hover,#about a:active, #aboutcurrent a {
background:transparent url(img/navigation.jpg) 0 -24px no-repeat;
}
#why a:hover,#why a:active, #whycurrent a {
background:url(img/navigation.jpg) -108px -24px no-repeat;
}
#testimonials a:hover,#testimonials a:active, #testimonialscurrent a {
background:url(img/navigation.jpg) -304px -24px no-repeat;
}
#purchase a:hover,#purchase a:active, #purchasecurrent a {
background:url(img/navigation.jpg) -468px -24px no-repeat;
}
#contact a:hover,#contact a:active, #contactcurrent a {
background:url(img/navigation.jpg) -650px -24px no-repeat;
}
/*-----Navigation End-----*/