View Full Version : How can I center the top menu?

05-23-2010, 06:39 PM

I want to center the top menu in my site, currently it is aligned to the left.
In the CSS file the line that controls the menu is:


I tried adding:


but it didn't help.

Link to my site:

How can I center this menu?

Thank you for your help :)

05-23-2010, 06:42 PM
Try adding text-align:center; to the relevent DIV.


05-23-2010, 07:06 PM
I tried adding to the relevant DIV:

<div id="navigation" style="text-align:center;"><jdoc:include type="modules" name="user3" style="xhtml" /></div>

It didn't help, still aligned to the left...

05-24-2010, 01:35 AM
Hello gamestoenjoy,
That's a bit of divitis (http://ahsanity.wordpress.com/2007/05/15/divitis-and-classitis-two-new-words-in-my-css-vocabulary/) there, you should also know that tables are not the way to build websites. See the link about tables in my signature line below.

I understand that's a template though and you can still center your menu a number of ways. Based on this example (http://nopeople.com/CSS/menu-h_centered-ul/index.html), your's centers with this bit of CSS:

.sidebar1 .module div div div,.sidebar .module_menu div div div,.sidebar .module_text div div div{width:122px;overflow:hidden;background:none;padding:3px 3px 10px!important;}

position: relative;
#schriftzug{width:100%;height:65%;background-color:#339999;float:left;font-size:30px;padding:0 0 0 0;}
#navigation {
height: 35%;
margin-top: 1px;
font-size: 12px;
background: #E5F0FA;
overflow: hidden;
width: 100%;
clear: both;
#mainlevel-nav {
float: left;
position: relative;
left: 50%;
#mainlevel-nav li {
float: left;
position: relative;
right: 50%;

#navigation ul,#navigation li{list-style-type:none

05-24-2010, 03:51 AM
Thanks a lot Excavator.

Your CSS code works perfectly on Firefox, and the menu is indeed centered.
However on IE 8 with this CSS, the header is shown as blank.
What is missing so it will also work with IE?

05-24-2010, 04:07 AM
Managed to solved it.

Without the change in #header, meaning keeping it:


It works perfectly on both browsers.

I definitely learned from your solution.
CCS has a lot of power I wasn't aware of :thumbsup: