...

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



gamestoenjoy
05-23-2010, 06:39 PM
Hi,

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:

#navigation{height:35%;margin-top:1px;font-size:12px;background-color:#E5F0FA;overflow:hidden;width:100%;float:left;}

I tried adding:

margin-left:auto;margin-right:auto;

but it didn't help.

Link to my site:
http://www.gamestoenjoy.com

How can I center this menu?

Thank you for your help :)

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

Frank

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

Excavator
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;}


#header{
/*height:135px;
display:block;*/
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%;
/*float:left;*/
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

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

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

Without the change in #header, meaning keeping it:

#header{height:135px;display:block;}

It works perfectly on both browsers.

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum