hello,
I am working on a page and i want to center the navigation. right now its showing to left side. i tried couple of things but failed. what am i missing or have that isn’t letting in center of the div? www[dot]genuinelyjanestudios[dot]ammarworx[dot]com/
There are some fancy centering tricks around the place, but with a fixed width setup like you have, you might as well just put a bit of left margin on the UL and be done with it. E.g.
nav ul {margin-left: 38px;}
You could use inline-block to center the menu items instead of using float:
.nav-container ul.top-nav{
text-align:center;
float:none;
display:block;
}
.nav-container ul.top-nav li{
float:none;
display:inline-block;
*display:inline;/* ie6/7 hack*/
zoom:1.0;
vertical-align:top;
}
However as Ralph said if your menu is fixed at that width then just use a margin to push it over a bit.
thanks guys for both ways. but when i do as ralph told me, the submenu that is visible now takes the margin-left also i see the whole tab isn’t a full block level whereas i did display block
HI,
Yes just make it specific to the top level.
e.g.
ul.top-nav{
margin-left:5px;
}
Ralph’s code will hit all nested uls as well but I guess he didn’t realise that there were drop down menus inside.
Indeed. Sorry about that.