Need Help Centering UL CSS menu

Discussion in 'Web Design and Development' started by screensaver400, Dec 27, 2012.

  1. macrumors 6502a

    Joined:
    Jan 28, 2005
    #1
    I've been trying to modify a CMS template to meet my needs and couldn't get it to work, so I decided to just start from scratch to figure it out... And I still can't get it to work. I want three links arranged on each side of a logo image (which descends lower than the navigation), with the whole thing centered on the page. I don't want to specify a width for the UL because of possible differences in how fonts are rendered.

    I tried the text-align:center and display:inline method, but it doesn't seem to allow me to have my logo box in the middle. I tried splitting the navbar into two ULs (with the logo in a div), but couldn't make that work either.

    My code is below. Thanks for any help:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<style type="text/css">
    		div {
    		width:100%; 
    		height:40px; 
    		background-color:black;
    		}
    		ul {
    		list-style: none; 
    		margin:0; 
    		padding: 0;
    		}
    		
    		li {	
    		margin: 0 10px; 
    		float:left;
    		}
    		
    		li a {
    		color:white;
    		}
    	</style>
    </head>
    <body>
    <div>
    <ul>
        <li><a href="/1">Topic 1</a></li>
        <li><a href="/2">Topic 2</a></li>
        <li><a href="/3">Topic 3</a></li>
        <li style="width:150px; height:100px; background-color:blue;"><a href="/index.html"></a></li>
        <li><a href="/4">Topic 4</a></li>
        <li><a href="/5">Topic 5</a></li>
        <li><a href="/6">Topic 6</a></li>
    </ul>
    </div>
    </body>
    </html>
     
  2. macrumors 6502

    Joined:
    Jun 8, 2009
    #2
    try this:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<style type="text/css">
    		div {
    		width:100%; 
    		height:40px; 
    		background-color:black;
                    text-align:center;
    		}
    		ul {
                    display: inline-block;
    		list-style: none; 
    		margin:0 auto; 
    		padding: 0;
    		}
    		
    		li {	
    		margin: 0 10px; 
    		float:left;
    		}
    		
    		li a {
    		color:white;
    		}
    	</style>
    </head>
    <body>
    <div>
    <ul>
        <li><a href="/1">Topic 1</a></li>
        <li><a href="/2">Topic 2</a></li>
        <li><a href="/3">Topic 3</a></li>
        <li style="width:150px; height:100px; background-color:blue;"><a href="/index.html"></a></li>
        <li><a href="/4">Topic 4</a></li>
        <li><a href="/5">Topic 5</a></li>
        <li><a href="/6">Topic 6</a></li>
    </ul>
    </div>
    </body>
    </html>
     
  3. thread starter macrumors 6502a

    Joined:
    Jan 28, 2005

Share This Page