PDA

View Full Version : centering navigation tabs



jugganaut
Nov 15th, 2006, 07:45 PM
could you guys help me? New to CSS, I just want to center the navigation tabs (the entire navigation block) in the middle of the page. How do I do that?

you can view this at http://www.scooterhack.com/nav/navigation_header.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
body {
margin:0;
padding:0;
font: bold 12px/1.5em Verdana;
}

h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}
img {
border: none;
}


/*- Menu Tabs--------------------------- */


#tabs {
float:center;
background:#BBD9EE;
font-size:93%;
line-height:normal;
}
#tabs ul {
margin:0;
padding:25px 10px 0 50;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("tableft.gif") no-repeat left bottom;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("tabright.gif") no-repeat right bottom;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#FF9834;
}
#tabs a:hover {
background-position:0% +42px;
}
#tabs a:hover span {
background-position:100% +42px;
}
</style>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div id="tabs">
<ul>
<li><a href="#" title="Link 1"><span>Posters</span></a></li>
<li><a href="#" title="Link 2"><span>Help</span></a></li>
<li><a href="#" title="Link 3"><span>About Us</span></a></li>
<li><a href="#" title="Link 4"><span>Contact Us</span></a></li>
<li><a href="#" title="Link 5"><span>My Account</span></a></li>
<li><a href="#" title="Link 6"><span>Sign In</span></a></li>
</ul>
</div>

</body>
</html>

_Aerospace_Eng_
Nov 15th, 2006, 07:49 PM
Well there is no such thing as float:center, you have float:left, float:right, or float:none. I suggest you do some more css tutorials to get a grasp on the terms. You should read this as well. http://www.cssplay.co.uk/menus/centered.html

truviet911
Nov 15th, 2006, 07:50 PM
<div id="tabs" align="center">
<ul>
<li><a href="#" title="Link 1"><span>Posters</span></a></li>
<li><a href="#" title="Link 2"><span>Help</span></a></li>
<li><a href="#" title="Link 3"><span>About Us</span></a></li>
<li><a href="#" title="Link 4"><span>Contact Us</span></a></li>
<li><a href="#" title="Link 5"><span>My Account</span></a></li>
<li><a href="#" title="Link 6"><span>Sign In</span></a></li>
</ul>
</div>

just messing around with the div attributes.