...

View Full Version : How can I centre the menu bar?



effpeetee
03-02-2009, 10:25 PM
I would appreciate some help with this code.
I want to centralise the menu bar <ul>. Margin:0 auto; does not seem to work and I cannot understand why.

Getting passed my 'Sell by date' I expect.:eek:

Frank


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">



*{
padding:0;
margin:0;
}

body html{
width:100%;
height:100%;
}

#wrap{
width:100%;
}



ul{
list-style-type: none;
width:90%;
margin:0 auto;

text-align:center;
}

ul li{
display: inline;
width:12em;

}

a{
float: left;
width: 100px;
text-decoration: none;
color: white;
font-size:12px;
font-weight: bold;
background: #999900;
padding: 5px;
border-right: 1px solid #FFFFFF;
}

a:hover{
background: #CCCC00;
}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>CSS horizontal menu</title>
</head>

<body>
<div id="wrap">
<ul>
<li><a href="#">Css</a></li>

<li><a href="#">Flash</a></li>

<li><a href="#">ActionScript</a></li>

<li><a href="#">Javascript</a></li>

<li><a href="#">SQL Server</a></li>

<li><a href="#">PHP</a></li>
</ul>
</div>
</body>
</html>

Killermud
03-02-2009, 11:01 PM
Try changing the css by adding this to the ul.


ul{
position:relative;
top:5px;
left:-100px;
list-style-type: none;
width:90%;
margin:0 auto;

text-align:center;
}
and change the variable 'left:-100px' to the ammount to get it centre, hope this helps!

effpeetee
03-02-2009, 11:08 PM
Thanks, but I really need it to work at all resolutions.
margin:0 auto; should work; I can't understand why it doesn't.

Frank

Excavator
03-02-2009, 11:57 PM
Hello Frank,
How's life?

Your menu is not centering because of the float:left; on the a. Try making your CSS look like this:
*{
padding:0;
margin:0;
}

body, html{ /*need a comma betweent these*/
width:100%;
height:100%;
}
#wrap{
width:100%;
overflow: auto; /*you may need this too...*/
}
ul{
list-style-type: none;
width:90%;
margin:0 auto;
text-align:center;
}
ul li{
display: inline;
}
a{
width: 100px;
text-decoration: none;
color: white;
font-size:12px;
font-weight: bold;
background: #999900;
margin: 0-2px;
padding: 5px 20px;
border-right: 1px solid #FFFFFF;
}

a:hover{
background: #CCCC00;
}

effpeetee
03-03-2009, 11:45 AM
Hello Excavator.

Doing as well as can be expected for an old fogey.

Thanks for the code. It works fine. The only other thing that I have been unable to do is to get all the buttons the same size. I'm beginning to think that I need a brain transplant.:eek: My mind is a complete blank on this. I have tried adding a width to everything in turn with no success.:(

Any pointers gratefully followed.:D

I've put it here. (http://exitfegs.co.uk/horimenu.htm)

Frank

abduraooft
03-03-2009, 12:16 PM
I'm beginning to think that I need a brain transplant. My mind is a complete blank on this. I have tried adding a width to everything in turn with no success.

Any pointers gratefully followed. For that you need to set a width for your anchor after changing it's display behaviour. But, when we turn them block, they will stretch automatically to the entire width and thus they will become vertical rather than horizontal.

Then, we need to set float:left; to them, but as a result they will be aligned left, instead of centre.


a {/*horimenu.htm (line 30)*/
background:#999900 none repeat scroll 0;
border-right:1px solid #FFFFFF;
color:white;
font-size:12px;
font-weight:bold;
margin:0 -2px;
padding:5px 20px;
text-decoration:none;
float:left;
width:100px;
}

Considering the above facts, I believe in the method used in the http://www.cssplay.co.uk/menus/centered2.html would be the effective solution.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>CSS horizontal menu</title>
<style type="text/css">

*{
padding:0;
margin:0;
}

body, html{
height:100%;
}
#wrap{
width:100%;
}
.menu {
display:table; /* ignored by IE */
padding:0;
list-style-type:none;
white-space:nowrap; /* keep text on one line */
margin:0 auto;
}
.menu li {
display:table-cell; /* ignored by IE */
}
.menu a, .menu a:visited {
display:block; /* for all browsers except IE */
text-decoration: none;
color: white;
font-size:12px;
font-weight: bold;
background: #999900;
/*margin: 0 -2px;*/
padding: 5px 20px;
border-right: 1px solid #FFFFFF;
width:100px;
}
.menu a:hover {
background: #CCCC00;
}


</style>
<!--[if lte IE 7]>
<style type="text/css">
.menu {
display:inline-block; /* for IE only */
width:1px; /* IE will expand 1px width to fit menu width */
padding:0 2px; /* fix bug in IE to get border spacing correct */
}
.menu li {
display:inline; /* for IE only */
}
.menu a, .menu a:visited {
display:inline-block; /* for IE only */
margin:0 -2px; /* to correct an IE bug that doubles the border width */
}
</style>
<![endif]-->

</head><body>
<div id="wrap">
<ul class="menu">
<li><a href="#">Css</a></li>

<li><a href="#">Flash</a></li>

<li><a href="#">ActionScript</a></li>

<li><a href="#">Javascript</a></li>

<li><a href="#">SQL Server</a></li>

<li><a href="#">PHP</a></li>
</ul>
</div>
</body></html>

effpeetee
03-03-2009, 01:21 PM
Thanks abduraooft, but the menu bar is now not centred. I cannot find a way to do it. Obviously, it's not my day today.

Frank

abduraooft
03-03-2009, 01:32 PM
Oh... I'd tested it in IE6, FF2-3 and it was fine. But it is pushed to the right in IE7. Argg!

If you are making them all equal width, then it's easy to calculate the effective width of the <ul> and then set a margin:0 auto; to it like

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>CSS horizontal menu</title>
<style type="text/css">

*{
padding:0;
margin:0;
}

body, html{
height:100%;
}
#wrap{
width:100%;
}
.menu {
padding:0;
list-style-type:none;
white-space:nowrap;
margin:0 auto;
width:846px; /*6X(100+20+20+1) */

}
.menu li{
float:left;
}
.menu a, .menu a:visited {
text-decoration: none;
color: white;
font-size:12px;
font-weight: bold;
background: #999900;

padding: 5px 20px;
border-right: 1px solid #FFFFFF;
float:left;
width:100px;

}
.menu a:hover {
background: #CCCC00;
}


</style>

</head><body>
<div id="wrap">
<ul class="menu">
<li><a href="#">Css</a></li>

<li><a href="#">Flash</a></li>

<li><a href="#">ActionScript</a></li>

<li><a href="#">Javascript</a></li>

<li><a href="#">SQL Server</a></li>

<li><a href="#">PHP</a></li>
</ul>
</div>
</body></html>

effpeetee
03-03-2009, 02:24 PM
Many thanks abduraooft. Why didn't I think of that?
Css still frightens me a little. It seems so easy to upset it and I often land up by using a "suck it and see" process. Not very efficient.

I have six books on CSS and not one of them helped me with this problem.

Frank

Why does a small tax increase cost you two hundred dollars and a substantial tax cut save you thirty cents? - Peg Bracken



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum