Navigation Bar With CSS
HTML Code
<div id=”navigation”>
<ul>
<li><a href=”index.html”><div id=”home”>Home</div></a></li>
<li><a href=”news.html”><div id=”news”>News</div></a></li>
<li><a href=”#”><div id=”how”>How it works</div></a></li>
<li><a href=”#”><div id=”affiliated”>Affiliated membership</div></a></li>
<li><a href=”#”><div id=”location”>our location</div></a></li>
<li><a href=”#”><div id=”about”>about us</div></a></li>
<li><a href=”#”><div id=”stuff”>hot stuff</div></a></li>
<li><a href=”#”><div id=”contact”>contact us</div></a></li>
</ul>
</div>
CSS Code
#navigation ul
{
margin-left:-40px!important;
margin-left:0;
}
#navigation ul li
{
display:inline;
list-type-style:none;
margin:0;
text-align:left;
}
#navigation ul li a #home
{
background: url(“images/btn_home.png”) no-repeat scroll left center;
height:28px;
width:70px;
float:left;
text-indent:-2000px;
}
#navigation ul li a:hover #home, #home-page #navigation ul li a #home
{
background: url(“images/btn_home.png”) no-repeat scroll right center;
height:28px;
width:70px;
float:left;
text-indent:-2000px;
}
Output
Auto Centered WIth CSS
<html>
<head>
<body>
<div style = “margin: auto;
border: 1px solid red;
text-align: center;
margin-top: 10px;
width: 900px;”
>
Sample page layout
</div>
</body>
</head>
</html>
GOOD………..!!
By: prasun on August 17, 2007
at 12:31 pm