Centering a horizontal spy menu bar
by Lee Margolies
on
Nov 5, 2009 at 9:34:32 pm
I'm trying to center a horizontal spy menu bar on a page. For some reason IE, FF and Safari are all left justifying the menu and if I don't have a padding property (see below) in the ul.MenuBarHorizontal it shifts the entire bar about 20 pixels to the right.
Any help you can offer is appreciated...
Thanx,
lm
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
width: 666px;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
list-style-type: none;
font-size: 100%;
position: relative;
line-height: -15;
cursor: pointer;
width: 133.2px;
float: left;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
left: -1000em;
width: 160px;
position: absolute;
background-color: #005dab;
color: #fff;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
width: 160px;
border-width: 1px 2px 1px 2px;
border-style: solid;
border-color: #005dab;
background-color: transparent;
float: none;
margin: 0 0 0 -1.5%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #FFF;
padding: 0.5em 0.75em;
color: #005dab;
text-decoration: none;
text-align: center;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #005dab;
color: #FFF;
}
ul.MenuBarHorizontal ul a {
text-align: left;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
text-decoration: none
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
}
}
Re: Centering a horizontal spy menu bar by Fernando Mol on Nov 6, 2009 at 3:39:14 pm
You need to play with your widths.
Now, the whole width of your menu doesn't divide itself in the number of menu elements you have. Remember, screens measures in pixels.
Change the width of your center column (where you have your menu fitted) and make it a width that can be divided into 5, the number of menu items you have. Then, play with the width of your list items and borders to fit it.
I hope this helps
*Remember to share a link to your site and to rate the posts. This is a free service for you and for us.
Re: Centering a horizontal spy menu bar by Lee Margolies on Nov 6, 2009 at 10:45:55 pm
Thanks for the help...
I tried adjusting the width and it still comes up either too small or too long. Since the spry is nested in a div tag (navbar), do I need to only adjust that div's width to a multiple of 5 or do I need to go further up the chain?
thanks again!
lm
Lee Margolies
http://www.lmcreativemotion.com
Twitter: @LMCreativeMotio
