Support » Themes and Templates » Center menu help
Center menu help
-
hi,
i want to center menu and the code is given below. the menu is not moving to center http://www.aeos.ws
/********** Header **********/
#menu{
top:6px;
left:8px;
margin:0 0 0 0;
padding:0;
width:600px;
clear: both;
float: none;
height:33px;
z-index: 50;
position: relative;
text-align: center;}
.menu{ text-align:center; }#menu ul {
overflow:hidden;
margin:0;
padding:0;
height: 33px;
text-align: center;
}
#menu li {
display:inline;
font-size: 11px;
font-family:Arial,Verdana;
font-weight: bold;
height:33px;
margin:0px;
position:relative;
text-align: center;
float: none;
}#menu ul li a {
float: left;
display: block;
height:23px; /*33*/
line-height:11px;
color: #667F87;
text-align:center;
padding:10px 20px 0px 20px;
margin:0 0px 0 -14px;
text-decoration:none;
background:url(images/bg_menu.gif) no-repeat top left;
text-align: center;}
#menu ul li a:hover, #menu ul li.current_page_item a{
color:#3E4D52;
background:url(images/bg_menu_hover.gif) no-repeat top left;
}#menu ul li:hover ul { display: block; }
#menu ul li:hover ul ul { display: none; }
#menu ul ul { position:absolute; top:33px; left:50px; background:#fff; display:none; list-style:none; margin:0;padding:0; border-top: 1px solid #aaa; width:130px;}
#menu ul ul li {position:relative; border:1px solid #aaa; border-top: 0;width:159px; margin:0; padding: 0; background: none;}
#menu ul ul li a {display:block; padding:0 7px 0 12px; color: #3E4D52; background-color:#fff; border-right: 0; font-size: 11px; font-family:Arial, Verdana; }
#menu ul ul li a:hover {background-color:#eee}
#menu ul ul li:hover ul { display: block; }
#menu ul ul ul { left:159px; top:-1px; display: none; }#menu .lastmenu:hover{
background:url(images/bg_menu.gif) no-repeat top left;
}
-
Have a read through this document on centring things http://www.w3.org/Style/Examples/007/center.en.html
yes but it does not help can you please let me know where my code is wrong
i gave text-align:center; as well..
Where are you getting the
.menu
styles from? There’s no HTML classed or ID of ‘menu’.#sub-navigation { display: table; margin: auto; }
Ronangelo,
Is that a solution to expanding menus, i.e when you change the name of a menu item, the menu automatically centres accordingly?You mean a menu that has a dynamic width? Yes.
It centers whether you add or remove menu items.Nice work.
thankyou so muchhhhhhh
Do you have any idea how to reduce distance between text widgets
For general CSS queries, try a general CSS forum http://csscreator.com/forum
Hi,
One problem I have encountered is that;
When i use the code below the menu gets centered but when i hover over the dropdown menu it disappears before I can go to the third fourth category in the sub menu. How to resolve it ?
#sub-navigation { display: table; margin: 0 auto; } The previous code used was #sub-navigation { top:2px; left:122px; /* width:700px;*/ clear: both; float: left; padding-top: 0px; margin-top:3px; height:33px; z-index: 50; position: relative; }
Can anyone suggest changes?
Thankfully
MJYou probably removed the z-index. You were just supposed to add the
display: table; margin: 0 auto;
Then remove this
left: 122px; float: left;
#sub-navigation { display: table; margin: 0 auto; z-index: 50; }
#sub-navigation {
display: table;
margin: 0 auto;
z-index: 50;
}is not working too… I changed z index several times as well…
working now thanks 🙂
Thankyou for so much help
HAPPY NEW YEAR
- The topic ‘Center menu help’ is closed to new replies.