www.webdeveloper.com
Results 1 to 2 of 2

Thread: Centering a menu of buttons

  1. #1
    Join Date
    Mar 2010
    Posts
    55

    Centering a menu of buttons

    I have this menu of buttons that I'm trying to center:
    http://www.mikeglaz.com/test.html

    Now the red div is centered within the page. The green div is centered within the red div but the menu buttons aren't centered and I can't figure out why. Also, in the code I have the buttons inside both divs. Why don't they appear inside the divs? Here's my code:

    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!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>Web Development &amp; Design Foundations CSS Buttons</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    .center {margin: 0 auto;
    			width: 950px;
    			border: 3px solid red;}
    .center2 {margin: 0 auto;
    			 width: 790px;
    			 border: 3px solid green;}
    .example2 li {
    	display:inline;
        list-style-type:none;
    	text-align:center;
    	font-family:Verdana, sans-serif;
    	font-size:10px;
    	line-height:22px;
    	text-decoration:none;
    	color:#ffffff;
    	font-weight:bold;
    	background-color:#000033;
        width:150px;	
    	float:left; 
    }
    .example2 a {	border-top:1px solid #6666ff;
    	border-right:1px outset #444;
    	border-bottom:1px outset #444;
    	border-left:1px solid #6666ff;
    	padding:5px;
    	text-decoration:none;
    	display:block;
    	font-weight:bold;
    	}
    	
    .example2 a:link {
    	color:#ffffff;
    	background-color:#000033;
    }
    .example2 a:visited {
    	color:#cccccc;
    	background-color:#000033;
    }
    .example2 a:hover {
    	color:#ffffff;
    	background-color:#2a85c4;
    
    }
    </style>
    </head>
    <body>
    <div class="center">
    <div class="center2">
    <ul class="example2">
      <li><a href="#">Home</a></li>
      <li><a href="#">Products We Offer</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li> 
    </ul>
    </div>
    </div>
    </body>
    </html>
    thanks,
    mike

  2. #2
    Join Date
    Mar 2011
    Posts
    1,145
    Try setting the margin on .example2 to 0. I've found that browsers set the margins on <ul>s to some very unexpected values by default, and every one is different.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles