Is there a way to center <ul> in a <div>?

**Keriam** · Nov 21, 2003 13:11

I have just converted a site to all CSS, made several changes to it thanks to the nice folks in the Site Review area, but have one thing I have not been able to solve. I hope you CSS gurus can help me out.

I want the site banner and navigation to center in the header area. I have gotten the banner image to center, but getting the navigation to center is eluding me and I have tried just about everything, I think.

Here is the applicable CSS:

Code:

.topmenu
{
padding: 10px 0px 10px 0px;
border-top: 6px double #DEEEDC;
border-bottom: none;
}

.menu
{
text-align: center;
}

#topcontainer
{
padding: 5px 5px 10px 5px;
margin-bottom: 0px;
}

#header {
width:100%;
margin: 2px 20px 2px 20px;
background:#293B2A;
font-size:93%;
line-height:normal;
}
  
#header ul
{
margin: 0px auto;
padding:10px 5px;
list-style:none;
}
    
#header li
{
float:left;
background:url("graphics/navbk_a.gif")
no-repeat right top;
margin: 0px auto;
padding:0;
}
    
#header a
{
display:block;
background:url("graphics/navbk_a.gif")
no-repeat right top;
color: #DEEEDC;
border-top: thin solid #527654;
border-bottom: thin solid #DEEEDC; 
font-weight: bold;
text-decoration: none;
padding:5px 10px;
}

#header a:hover
{
display:block;
background: #FFCE63;
border-top: thin solid #527654;
border-bottom: thin solid #527654;
color: #293B2A;
font-weight: bold;
text-decoration: none;
padding:5px 10px;
}

And here is the html:

Code:

<div id="topcontainer">
            <div id="header" class="topmenu menu">
            <img src="graphics/cabinbanner_a.jpg" width="622" height="100"  alt="Secluded beauty in the heart of Colorado's Rocky Mountains">
            
            <ul>
                <li>
                    <a href="index.html" title="Welcome">Welcome</a>
                </li>
                <li>
                    <a href="location.html" title="Location & Driving information">Location</a>
                </li>
                <li>
                    <a href="tour.html" title="Photo tour of cabin">Cabin Tour</a>
                </li>
                <li>
                    <a href="amenities.html" title="Amenities">Amenities</a>
                </li>
                <li>
                    <a href="nearby.html" title="Nearby Activities">Nearby Fun!</a>
                </li>
                <li>
                    <a href="rental.html" title="Rental Information">Rental
                    Information</a>
                </li>
                <li>
                    <a href="contact.html" title="Contact Information">Contact</a>
                </li>
            </ul>
        </div>
	</div>

The site itself is here so you can see how it is behaving now.

Thanks in advance.

**Paul O'B** · Nov 21, 2003 14:43

Hi,

You could put the ul in another div with a specified width then use margin auto to centre it.

You will also need to add a clear both after your floats otherwise the header won't enclose your nav in mozilla. Also take out the 1005 width from the #header as it is messing up mozilla.

Something like this should work.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
.topmenu
{
padding: 10px 0px 10px 0px;
border-top: 6px double #DEEEDC;
border-bottom: none;
}
.menu
{
text-align: center;
}
#topcontainer
{
padding: 5px 5px 10px 5px;
margin-bottom: 0px;
}
#header {
margin: 2px 20px 2px 20px;
background:#293B2A;
font-size:93%;
line-height:normal;
}
 
#header ul
{
margin: 0px auto;
padding:10px 5px;
list-style:none;
display:inline;
}
 
#header li
{
float:left;
background:url("graphics/navbk_a.gif")no-repeat right top;
margin: 0px auto;
padding:0;
}
 
#header a
{
display:block;
background:url("graphics/navbk_a.gif")no-repeat right top;
color: #DEEEDC;
border-top: thin solid #527654;
border-bottom: thin solid #DEEEDC; 
font-weight: bold;
text-decoration: none;
padding:5px 10px;
}
#header a:hover
{
display:block;
background: #FFCE63;
border-top: thin solid #527654;
border-bottom: thin solid #527654;
color: #293B2A;
font-weight: bold;
text-decoration: none;
padding:5px 10px;
}
.centre {width:655px;margin:auto;}
</style>
</head>
<body>
<div id="topcontainer">
			<div id="header" class="topmenu menu">
			<img src="graphics/cabinbanner_a.jpg" width="622" height="100" alt="Secluded beauty in the heart of Colorado's Rocky Mountains">
			<div class="centre">
			<ul>
				<li>
					<a href="index.html" title="Welcome">Welcome</a>
				</li>
				<li>
					<a href="location.html" title="Location & Driving information">Location</a>
				</li>
				<li>
					<a href="tour.html" title="Photo tour of cabin">Cabin Tour</a>
				</li>
				<li>
					<a href="amenities.html" title="Amenities">Amenities</a>
				</li>
				<li>
					<a href="nearby.html" title="Nearby Activities">Nearby Fun!</a>
				</li>
				<li>
					<a href="rental.html" title="Rental Information">Rental
					Information</a>
				</li>
				<li>
					<a href="contact.html" title="Contact Information">Contact</a>
				</li>
			</ul>
		</div>
<br style="clear:both" />
</div>
</div>
</body>
</html>

Hope that helps.

Paul

User Tag List

Thread: Is there a way to center <ul> in a <div>?

Thread Tools

Display

Is there a way to center <ul> in a <div>?

Bookmarks

Bookmarks

Posting Permissions