...

View Full Version : Centering Menu



phill_ridout
05-11-2007, 06:13 PM
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



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

coothead
05-11-2007, 06:59 PM
Hi there phill_ridout,

try it like this...

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

phill_ridout
05-11-2007, 07:18 PM
thanks for the pointers, it has sorted out one problem i was having. but unfortunately it has not centred the menu

coothead
05-11-2007, 07:31 PM
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

phill_ridout
05-11-2007, 07:38 PM
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.

coothead
05-11-2007, 07:59 PM
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. :eek:
I suggest that you change this...

ul#main_nav li a {
float: left;
width: 5em;
color: #000;
background-color: #ffa;
padding: 0.2em 1em;
}
...to this...

ul#main_nav li a {
float: left;
width: 120px;
color: #000;
background-color: #ffa;
padding: 0.2em 0;
text-align:center;
}
coothead

phill_ridout
05-11-2007, 08:05 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum