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 7 of 7

Thread: Centering Menu

  1. #1
    Regular Coder
    Join Date
    Mar 2006
    Posts
    187
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Centering Menu

    I have the following code in a file called index.htm. Everything is working ok, except i want to centre the menu, have you got any ideas how i can do this? I'm kinda new to using css for page layout.

    Thanks

    Code:
    <html>
    <head>
    <style>
    body {
    	margin: 0px;
    	padding: 0px;
    	text-align: center; /*So that IE Will Center Container DIV On Page*/
    	background-image: url('../images/bg.gif');
    	background-repeat: repeat
    	}
    
    #container {
    	margin-left: auto;
    	margin-right: auto; /* By setting Left and Right margins to auto, it centers it on the page Doesnt Work in IE*/
    	height: 100%;
    	width: 600px;
    }
    
    #main_nav_cont{
    	margin-left: auto;
    	margin-right: auto; /* By setting Left and Right margins to auto, it centers it on the page Doesnt Work in IE*/
    	background-color: 000;
    	}
    
    ul#main_nav {
    	list-style-type: none;
    	padding: 0; /* For uniformity accross browsers remove padding and margin */
    	margin: 0;
    
    	float: left;
    	width: 100%;
    	}
    	
    ul#main_nav li {
    	display: inline;
    	}
    	
    ul#main_nav li a {
    	float: left;
    	width: 5em;
    	color: #000;
    	background-color: ffa;
    	padding: 0.2em 1em;
    	}
    	
    ul#main_nav li a:hover {
    	background-color: #000;
    	color: #ffa;
    	}
    </style>
    </head>
    <body>
    <div id="container">
    <ul id='main_nav'>
    <li><a href='index.htm' class='ml' onMouseOver='HideMenu()'>Home</a></li>
    <li><a href='index.htm' class='ml' onMouseOver="ShowMenu('ProductsMenu')" onMouseOut='tHide()'>Products</a></li>
    <li><a href='gallerie.htm' class='ml' onMouseOver='HideMenu()'>Gallery</a></li>
    <li><a href='links.htm' class='ml' onMouseOver="ShowMenu('LinksMenu')" onMouseOut='HideMenu()'>Links</a></li>
    <li><a href='mailto:chantrybee@blueyonder.co.uk' class='ml' onMouseOver='HideMenu()'>Email</a></li>
    </ul>
    </div>
    </body>
    </html>

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,742
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there phill_ridout,

    try it like this...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    body {
    	margin: 0px;
    	padding: 0px;
    	text-align: center; /*So that IE Will Center Container DIV On Page*/
    	background-image: url('../images/bg.gif');
    	background-repeat: repeat
    	}
    
    #container {
    	margin-left: auto;
    	margin-right: auto; /* By setting Left and Right margins to auto, it centers it on the page Doesnt Work in IE*/
    	height: 100%;
    	width: 600px;
    }
    
    #main_nav_cont{
    	margin-left: auto;
    	margin-right: auto; /* By setting Left and Right margins to auto, it centers it on the page Doesnt Work in IE*/
    	background-color: #000;
    	}
    
    ul#main_nav {
    	list-style-type: none;
    	padding: 0; /* For uniformity accross browsers remove padding and margin */
    	margin: 0;
    
    	float: left;
    	width: 100%;
    	}
    	
    ul#main_nav li {
    	display: inline;
    	}
    	
    ul#main_nav li a {
    	float: left;
    	width: 5em;
    	color: #000;
    	background-color: #ffa;
    	padding: 0.2em 1em;
    	}
    	
    ul#main_nav li a:hover {
    	background-color: #000;
    	color: #ffa;
    	}
    </style>
    </head>
    <body>
    <div id="container">
    <ul id='main_nav'>
    <li><a href='index.htm' class='ml' onMouseOver='HideMenu()'>Home</a></li>
    <li><a href='index.htm' class='ml' onMouseOver="ShowMenu('ProductsMenu')" onMouseOut='tHide()'>Products</a></li>
    <li><a href='gallerie.htm' class='ml' onMouseOver='HideMenu()'>Gallery</a></li>
    <li><a href='links.htm' class='ml' onMouseOver="ShowMenu('LinksMenu')" onMouseOut='HideMenu()'>Links</a></li>
    <li><a href='mailto:chantrybee@blueyonder.co.uk' class='ml' onMouseOver='HideMenu()'>Email</a></li>
    </ul>
    </div>
    </body>
    </html>
    All the modifications have been highlighted.

    coothead

  • #3
    Regular Coder
    Join Date
    Mar 2006
    Posts
    187
    Thanks
    5
    Thanked 0 Times in 0 Posts
    thanks for the pointers, it has sorted out one problem i was having. but unfortunately it has not centred the menu

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,742
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there phill_ridout,
    ....but unfortunately it has not centered the menu
    It centers the menu in Firefox, Opera, IE6 and IE7.
    In what browser does it fail to do this for you?

    coothead

  • #5
    Regular Coder
    Join Date
    Mar 2006
    Posts
    187
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Firefox. If you resize the window so that the left lines up with the edge of the window, you will see that it is not quite central! If you remove some of the menu items, you will see this more clearly.

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,742
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there phill_ridout,
    Firefox. If you resize the window so that the left lines up with the edge of the window, you will see that it is not quite central!
    The reason for this is that you have not made the li elements fill the ul element.
    I suggest that you change this...
    Code:
    ul#main_nav li a {
    	float: left;
    	width: 5em;
    	color: #000;
    	background-color: #ffa;
    	padding: 0.2em 1em;
    	}
    ...to this...
    Code:
    ul#main_nav li a {
    	float: left;
    	width: 120px;
    	color: #000;
    	background-color: #ffa;
    	padding: 0.2em 0;
            text-align:center;
    	}
    coothead

  • #7
    Regular Coder
    Join Date
    Mar 2006
    Posts
    187
    Thanks
    5
    Thanked 0 Times in 0 Posts
    thanks for that soloution. if i add annother item to the menu, i would then need to adjust the width of the li, yeah?

    iv'e just found a different soloution here, i'll have a play with both, to see which one i can get the look i want with. - http://cssplay.co.uk/menus/centered.html

    Thanks very much for your help


  •  

    Posting Permissions

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