have the following css to put a top bar menu on the page
but cant get the menu to center in the page
it uses 140px in this line
...to start the menu 140pixels from left - but i want the menu to center in the page - have tried float:center all over the place but doesnt help, any ideas welcome
css look like
html
but cant get the menu to center in the page
it uses 140px in this line
Code:
padding:5px 5px 0 140px;
...to start the menu 140pixels from left - but i want the menu to center in the page - have tried float:center all over the place but doesnt help, any ideas welcome
css look like
Code:
#tabs2 {
float:center;
width:100%;
font-size:93%;
line-height:normal;
border-bottom:1px solid #84776B;
}
#tabs2 ul {
margin:0;
padding:5px 5px 0 140px;
list-style:none;
}
#tabs2 li {
display:inline;
margin:0;
padding:0;
}
#tabs2 a {
float:left;
background:url("images/tableft2.gif") no-repeat left top;
margin:0;
padding:0 0 0 2px;
text-decoration:none;
}
#tabs2 a span {
float:left;
display:block;
background:url("images/tabright2.gif") no-repeat right top;
padding:2px 10px 2px 6px;
color:#84776B;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs2 a span {float:none;}
/* End IE5-Mac hack */
#tabs2 a:hover span {
color:#74675B;
}
#tabs2 a:hover {
background-position:0% -42px;
}
#tabs2 a:hover span {
background-position:100% -42px;
}
#tabs2 #current a {
background-position:0% -42px;
}
#tabs2 #current a span {
background-position:100% -42px;
}
html
Code:
<div id="tabs2">
<ul>
<li id = "current"><a href="#"><span>HOME</span></a></li>
<li><a href="#">
<li><a href="#"><span>ABOUT US</span></a></li>
<li><a href="#"><span>SPECIAL OFFERS</span></a></li>
<li><a href="#"><span>CAREERS</span></a></li>
<li><a href="#"><span>CONTACT US</span></a></li>
</ul>
</div>