This is my Style Sheet:
body {
margin: 0px;
padding: 0px;
background-color: #CCCCCC;
font-family: Trebuchet MS, Arial, Helvetica, Sans-serif;
}
#wrapper {
margin: 0 auto;
padding: 0;
width: 800px;
}
#top.home {
background-image: url(images/top_bg.jpg);
background-repeat: no-repeat;
width: 800px;
height: 103px;
}
#menu {
width: 450px;
padding-top: 70px;
padding-left: 330px;
}
ul#nav_styled {
width: 353px;
height: 19px;
margin:0;
padding:0;
background: url(images/menu.gif);
position:relative;
}
ul#nav_styled li {
display:block;
height:19px;
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
ul#nav_styled li a {
display:block;
height:19px;
text-indent: -9000px;
}
li#i1 {
left: 0px;
width: 66px;
}
li#i2 {
left: 66px;
width: 70px;
}
li#i3 {
left: 136px;
width: 68px;
}
li#i4 {
left: 204px;
width: 69px;
}
li#i5 {
left: 273px;
width: 80px;
}
#i1 a:hover, #i1.over {
background: url(images/menu.gif) 0 -21px no-repeat;
}
#i2 a:hover, #i2.over {
background: url(images/menu.gif) -66px -21px no-repeat;
}
#i3 a:hover, #i3.over {
background: url(images/menu.gif) -136px -21px no-repeat;
}
#i4 a:hover, #i4.over {
background: url(images/menu.gif) -204px -21px no-repeat;
}
#i5 a:hover, #i5.over {
background: url(images/menu.gif) -273px -21px no-repeat;
}
This is my HTML:
<body>
<div id="wrapper">
<div id="top" class="home">
<div id="menu">
<ul id="nav_styled">
<li id="i1"><a href="index.html">Home</a></li>
<li id="i2"><a href="news.html">News</a></li>
<li id="i3"><a href="mag.html">Mag</a></li>
<li id="i4"><a href="link.html">Links</a></li>
<li id="i5" class="over"><a href="contact.html">Contact</a></li>
</ul>
</div>
</div> |
