SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard Keriam's Avatar
    Join Date
    Jun 2003
    Location
    Colorado, USA
    Posts
    1,178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,492
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •