Forums

jackmutter

I've tried everything I can think of to get this to center without breaking it. Any ideas?


<html>
<head>
<style type=\"text/css\">

#tabs
{
	float:left;
	width:100%;
}

#tabs ul
{
	margin:0;
	list-style:none;
}

#tabs li
{
	display:inline;
	margin:0;
	padding:0;
}

#tabs a
{
	float:left;
	background:url(\"tableft.gif\") no-repeat left top;
	margin:0;
	padding:0 0 0 4px;
	text-decoration:none;
}

#tabs div
{
	float:left;
	background:url(\"tableft.gif\") no-repeat left top;
	margin:0;
	padding:0 0 0 4px;
	text-decoration:none;
}

#tabs div span
{
	float:left;
	display:block;
	background:url(\"tabright.gif\") no-repeat right top;
	padding:17px 11px 5px 6px;
	color:#FFF;
}

#tabs a span
{
	float:left;
	display:block;
	background:url(\"tabright.gif\") no-repeat right top;
	padding:17px 11px 5px 6px;
	color:#FFF;
}

#tabs a:hover span
{
	background-position:100% -42px;
}

#tabs a:hover
{
	background-position:0% -42px;
}

#tabs a:hover span
{
	background-position:100% -42px;
}


</style>
</head>

<body>

<div id=\"tabs\">
	<ul>
		<li><a href=\"#\" title=\"home\"><span>home</span></a></li>
		<li><a href=\"#\" title=\"freebies\"><span>freebies</span></a></li>
		<li><a href=\"#\" title=\"links\"><span>links</span></a></li>
		<li><a href=\"#\" title=\"faq\"><span>faq</span></a></li>
		<li><a href=\"#\" title=\"contact\"><span>contact</span></a></li>
		<li><a href=\"#\" title=\"about\"><span>about</span></a></li>
		<li><a href=\"#\" title=\"rss\"><span>rss</span></a></li>
		<li><div><span>login: </span></div></li>
	</ul>
</div>

</body>
</html>

chriscoyier

Centering a horizontal list with items of variable length has LONG been a problem. Just recently Stu Nicholls posted a solution for this I thought was amazingly clever:

http://www.cssplay.co.uk/menus/centered.html

treehouse : what would you like to learn today?

Forums

Trouble centering a list.