Can’t center UL menu with 100% width and display: block

@patrickagJan 09.2011

I just spent all day trying to center this navigation menu. I’m able to center it by setting “display: inline;” but this keeps me from being able to specify the height or set a background image.

Here is the CSS. The markup is at the end.

#nav {
overflow: hidden;
min-width: 65em; /* PREVENT OVERLAP 1040 px / 16 px = 65em */
margin: 0;
padding: 0;
list-style: none;
font-family: “DAX-Medium”, Verdana, Arial Black, Gadget, sans-serif;
font-size: .8em; /* 12.8px / 16px = .8em */
background: #B5B5B5 url(/Epic/Menu/Menu_Off66px.jpg) repeat-x top left;
}
#nav li {
float: left;
margin: 0;
padding: 0;
}
#nav a {
display: block;
padding: 3em 1em 0 1em;
text-decoration: none;
color: #000000;
background: #B5B5B5 url(/Epic/Menu/Menu_Off66px.jpg) repeat-x top left;
}
#nav a:hover, body#intro #t-intro a {
background: #B4CCCC url(/Epic/Menu/Menu_On66px.jpg) repeat-x top left;
}

HTML

<body id=”intro”>
<ul id=”nav”>
<li id=”t-intro”><a href=”/”>HOME</a></li>
<li id=”t-about”><a href=”#”>OPTION 1</a></li>
<li id=”t-news”><a href=”#”>OPTION 2</a></li>
<li id=”t-sponsors”><a href=”#”>OPTION 3</a></li>
<li id=”featured”><a href=”#”>OPTION 4</a></li>
<li id=”market”><a href=”#”>OPTION 5</a></li>
<li id=”blog”><a href=”#”>OPTION 6</a></li>
<li id=”about”><a href=”#”>OPTION 7</a></li>
</ul>
</body>

to post a comment

CSS

11 Comments(s) _↴

@jwitt98Jan 10.2011 — #have you tried margin: auto;

[CODE]
 #nav {
 overflow: hidden;
 min-width: 65em; /* PREVENT OVERLAP 1040 px / 16 px = 65em */
 margin: 0 auto; /*<--------HERE
 padding: 0;
 list-style: none;
 font-family: "DAX-Medium", Verdana, Arial Black, Gadget, sans-serif;
 font-size: .8em; /* 12.8px / 16px = .8em */
 background: #B5B5B5 url(/Epic/Menu/Menu_Off66px.jpg) repeat-x top left;
 }
 [/CODE]

@patrickagauthorJan 10.2011 — #Thanks jwitt. That was one of the first things I tried. For some reason setting the margin to "0 auto" has no impact on the menu. I've also tried other variations such as setting "margin-left: auto" and "margin-right: auto".

@jwitt98Jan 10.2011 — #Whoops, I think you have to assign a static width to the ul for margin: auto to work.

@patrickagauthorJan 10.2011 — #Unfortunately using a static width is not an option. I need the background of the menu to fully stretch across.

@jwitt98Jan 10.2011 — #Can you place the menu inside a div with 100% width and apply the background to the div instead of the ul? Maybe I'm not picturing what you are trying to do.

Also, you may be able to achieve what you are trying to do with display: inline-block.

@patrickagauthorJan 10.2011 — #Thanks jwitt.

I'll try to draw what I'm trying to accomplish. Even though my menu doesn't have a border, the equal sign "=" delineates the beginning and end of the menu. The "|" delineates the beginning and end of the screen. When you hover over one of the menu options the area around the option is highlighted in blue and it stretches to the top, where the menu area begins.

|==================================================================================|

| (3 em of padding at the top)

|---------------------------------------------------------------------------------------------------------|

|------------------------------OPTION 1 OPTION 2 OPTION 3 OPTION 4------------------------------------|

|==================================================================================|

Setting display to inline-block and "text-align: center" doesn't have any effect. The menu remains to the far left instead of being centered. I tested it in IE, Firefox, and Chrome.

Using the inline option and setting the background to the surrounding div allows me to center the menu, and to display the background correctly, but the hover effect doesn't work as intended. The hover background only appears directly behind the text and doesn't stretch accross to the top. I also tested it in IE, Firefox, and Chrome.

@jwitt98Jan 11.2011 — #I don't know of any way to center something in a container like that without assigning a static width to it.
The hover background only appears directly behind the text and doesn't stretch accross to the top.[/QUOTE]
Maybe try adding the 3em padding to the top of the a tags instead of the ul.

It's just too hard for me to envision your background scheme.

@patrickagauthorJan 11.2011 — #When I tried your sugestion of using "display: inline" I had to set the padding in the div surrounding the UL in order to correctly display the background of the menu. But that doesn't have any effect on the hover event.

The background scheme is just a simple jpg that is 10 pixels in width and 66 pixels in heigh that repeats across from the far left to the far right of the screen. The difficult part is centering the text, which I thought would be something trivial to do in CSS but apparently not.

@jwitt98Jan 11.2011 — #OK, so it took your code, modified it and uploaded to my testing directory here:

http://www.midwestwebtrends.com/testing/centered-menu.html

The only way you are going to center the menu is to assign it a static width. If you want the li's centered, they too will need a static width.

Wrapping the menu in a div and applying a background image to the div did not affect the a:hover function so I'm not sure why you had problems with that.

Here is the modified code:

[code=html]
 <!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>Centered Menu Bar</title>
 <style type="text/css">
 #wrapper{
 width: 100%;
 background: #B5B5B5 url(images/off.jpg) repeat-x top left;
 }
 #nav {
 overflow: hidden;
 width: 64em; /* PREVENT OVERLAP 1040 px / 16 px = 65em */
 margin: 0 auto;
 padding: 0;
 list-style: none;
 font-family: "DAX-Medium", Verdana, Arial Black, Gadget, sans-serif;
 font-size: .8em; /* 12.8px / 16px = .8em */
 background: #B5B5B5 url(images/off.jpg) repeat-x top left;
 }
 #nav li {
 width: 8em;
 float: left;
 margin: 0;
 padding: 0;
 }
 #nav a {
 display: block;
 padding: 3em 1em 0 1em;
 text-decoration: none;
 color: #000000;
 background: #B5B5B5 url(images/off.jpg) repeat-x top left;
 text-align: center;
 }
 #nav a:hover, body#intro #t-intro a {
 background: #B4CCCC url(images/on.jpg) repeat-x top left;
 }
 </style>
 </head>
 
 <body id="intro">
 <div id="wrapper">
 <ul id="nav">
 <li id="t-intro"><a href="/">HOME</a></li>
 <li id="t-about"><a href="#">OPTION 1</a></li>
 <li id="t-news"><a href="#">OPTION 2</a></li>
 <li id="t-sponsors"><a href="#">OPTION 3</a></li>
 <li id="featured"><a href="#">OPTION 4</a></li>
 <li id="market"><a href="#">OPTION 5</a></li>
 <li id="blog"><a href="#">OPTION 6</a></li>
 <li id="about"><a href="#">OPTION 7</a></li>
 </ul>
 </div>
 </body> 
 
 </html>
 [/code]

@patrickagauthorJan 12.2011 — #Thanks jwitt. I appreciate all the time you spent on this.

@bestwebdesignFeb 07.2011 — #Hi,

Use text align property
#nav {

overflow: hidden;

min-width: 65em; /* PREVENT OVERLAP 1040 px / 16 px = 65em */

margin: 0;

padding: 0;

list-style: none;

[B]text-align:center;[/B]

font-family: "DAX-Medium", Verdana, Arial Black, Gadget, sans-serif;

font-size: .8em; /* 12.8px / 16px = .8em */

background: #B5B5B5 url(/Epic/Menu/Menu_Off66px.jpg) repeat-x top left;

}
[/QUOTE]

Also in #CSS _↴

Background Images In Netscape/Firefox Can you stop IE adding space ...browser-based css within a sheet

Success!

Help @patrickag spread the word by sharing this article on Twitter...

Tweet This

Can’t center UL menu with 100% width and display: block

11 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Can’t center UL menu with 100% width and display: block

11 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #CSS _↴