trying to center ul inside of #menu help

csphard · Jul 28, 2009

I have #menu and I would like the ul inside of it to be centered. I have tried usind the following
margin:0 auto; and text-align:center; on #menu thinking that this would center everything inside it
but it did not.

What do I do.

Howard

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><title></title>
<stylE>
body {background: url(images/background.gif) no-repeat;font-size: .75em; font-family: arial;margin:0;padding:0;text-

align:center;}
body,h1,h2,h3,h4,ul,li {margin:0;padding:0;}
#container {width: 900px; margin:0 auto;text-align:left; }
#header {height: 200px;}
#menu {height: 75px; border: 1px solid black;}
#menu ul {list-style: none; width: 568px; height: 75px; }
#menu li {float: left; background-color: white; text-align: center; border: 1px solid gray; margin-right: 5px; text-

decoration: none; color: black;padding: 25px;text-transform: uppercase;}
#sidebar {float: left; padding-left: 10px; padding-bottom: 20px;}
#sidebar ul {list-style: none;text-decoration: none; }
#sidebar li a:link,a:visited { text-transform: uppercase; text-decoration: none; font-size: 10px;}
#sidebar li a:hover {color: black; text-decoration:underline;}
#content {clear:both;background-color: WHITE; width: 100%;height: 300px;}

</style></head><body><div id="container">

<div id="header"><h1><span>Logo</span></h1>
<div id="menu"><ul><li>1</li><li>2</li><li>3</li></ul></div>
</div> 
<div id="content">
<div id="sidebar">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">TEST1</a></li>
<li><a href="#">TEST1</a></li>
<li><a href="#">TEST1</a></li>
<li><a href="#">TEST1</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</div> 

<div id="col1">information</div> 
</div> 

<div id="footer">footer </div> 
</div> 
</body></html>

Vragabond · Jul 28, 2009

Your menu has three items with no set width, padding of 25px on each side and just a number inside. They are all floated to the left. Assuming that the number would take up 10px or less, each button takes up 60px, all three 180px. Your #menu, on the other hand, is 568px wide. 568px are centered, but the 180px that the buttons take up are not. Here are your options:

1. Give the ul inside the #menu [tt]text-align: center;[/tt] and remove the float (and add [tt]display: inline;[/tt]) from list items. This will make list items display in one line just like regular text and will adhere to the text-align attribute.

2. Set the width of the ul to me closer to the width of all its children. It is unfortunate that you cannot set the width to auto and just have it adjust it, but if you would (in your scenario) set it to 180px, it would immediately be more centered.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

trying to center ul inside of #menu help

csphard

Programmer

Vragabond

Programmer

Similar threads

Part and Inventory Search

Sponsor