Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2005
    Location
    Sweden
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts

    horizontal menu center align?

    Hi,

    I have a 100% width div and inside that I want to have buttons that are in the center of my page, the content below is 800-odd pixels and there is 3 columns in that. I have tried and tried to center it but it just doesn't want to happen. Can anyone help?

    Code:
    /* TOP PART OF THE WEBSITE */
    #topheader {
    	background-color: blue;
    	width: auto;
    }
    
    #container {
    	width: 801px;
    	margin: 0 auto;
    	background-color: #cc223c;
    }
    
    #container ul {
    	list-style-type: none;
    	padding: 0;
    	display: inline;
    	text-align: center;
    	width: 60px;
    }
    
    #container a {
    	background-color: #3312aa;
    	float: left;
    	padding: 5px;
    	width: auto;
    }
    
    #container a:hover {
    	background-color: #667aaf;
    	color: #fff;
    }
    /* CONTENT GOES HERE */
    #wrapper {
    	width: 801px;
    	margin: 0 auto;
    	background-color: #9affb3;
    	clear: both;
    }
    Code:
    <div id="topheader">
    	<div id="container">
    		<ul>
    		<li><a href="#">Item 1</a></li>
    		<li><a href="#">Item 1</a></li>
    		<li><a href="#">Item 1</a></li>
    		<li><a href="#">Item 1</a></li>
    		<li><a href="#">Item 1</a></li>
    		<li><a href="#">Item 1</a></li>
    		</ul>
    	</div>
    </div>

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Evening,

    I took a few things out of your code just to try and simplify the process (and to make it easier for me to explain it).

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>???</title>
    <style type="text/css" media="screen">
    
    #container {
    	width: 800px;
    	margin: 0 auto;
    	background: #cc223c;
    	overflow: hidden;
    }
    
    #container ul {
    	list-style: none;
    	padding: 0;
    	margin: 0;
    	text-align: center;
    	float: left;
    	left: 50%;
    	position: relative;
    }
    
    #container ul li {
    	float: left;
    	left: -50%;
    	position: relative;
    	margin: 0 2px;
    }
    
    #container a {
    	background: #3312aa;
    	padding: 5px;
    	color: #ccc;
    	display: block;
    }
    
    #container a:hover {
    	background: #667aaf;
    	color: #fff;
    }
    
    </style>
    	
    </head>
    <body>
    	<div id="container">
    		<ul>
    		<li><a href="#">Item one</a></li>
    		<li><a href="#">Item real long</a></li>
    		<li><a href="#">Item three</a></li>
    		<li><a href="#">Item four</a></li>
    		<li><a href="#">Item longer than the second one</a></li>
    		<li><a href="#">Item six</a></li>
    		</ul>
    	</div>
    
    </body>
    </html>
    I added some more text the the links and some margin between them so you could see that they really are centered.

    On the container I added overflow:hidden so that non-ie browsers will stretch to contain the list. If you're making a drop down out of this, remove that line and use a clearing element.

    First thing is remove the padding and margin of your ul. we'll center the text which gets IE to play along. Well then float it left and give it a left of 50%. This will move the whole ul 50% to the left in the container it's in. position relative is important as well.

    Now well float the li's left so they display horizontally. Now left -50% them all so they all jump back to center.

    I added display:block to your a's because without it, being inline elements, they will honor your padding on the sides but not on the top and bottom.

    That's about it.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Regular Coder
    Join Date
    Dec 2002
    Location
    Minneapolis, MN
    Posts
    208
    Thanks
    0
    Thanked 1 Time in 1 Post
    and here is another example
    Code:
    #nav {
    	margin: 0 auto;
    	padding: 0;
    	width: 800px;
    	list-style-type: none;
    }
    
    #nav li {
    	float: left;
    	margin-right: 1px;
    	padding: 0;
    }
    
    #nav a:link, #nav a:visited {
    	border: 1px solid black;
    	background-color: #ccc;
    	display: block;
    	padding: 10px 0;
    	width: 130px;
    	text-align: center;
    	text-decoration: none;
    	color: black;
    }
    
    #nav a:hover {
    	background-color: #eee;
    }
    
    #nav a:active {
    	background-color: #99f;
    }
    
    hr {
    	clear: both;
    	height: 0;
    	visibility: hidden;
    }
    Code:
    <div id="topheader">
    	<ul id="nav">
    		<li><a href="#">Item 1</a></li>
    		<li><a href="#">Item 1</a></li>
    		<li><a href="#">Item 1</a></li>
    		<li><a href="#">Item 1</a></li>
    		<li><a href="#">Item 1</a></li>
    		<li><a href="#">Item 1</a></li>
    	</ul>
    	<hr />
    </div>
    anthony


  •  

    Posting Permissions

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