Page 1 of 1
Centering the CSSMenu [Solved]
Posted: Wed Feb 07, 2007 4:56 pm
by Nullig
I have changed the Navigation: CSSMenu - Horizontal style to center the menu by changing the following:
Code: Select all
#primary-nav, #primary-nav ul {
list-style: none;
padding: 0px;
width: 50%;
margin: 0 auto;
}
This has caused a minor annoyance in Firefox. When I hover on the last two menu items on the right, the bottom scrollbar appears. It is particularly annoying when the page content is close to filling the browser window, as this then causes the right-hand scrollbar to appear, shifting the page content left.
Any ideas as to what I can change to affect this behavior?
Nullig
Re: Centering the CSSMenu
Posted: Wed Feb 07, 2007 8:17 pm
by tsw
try wrapping the menu in a extra div with style="margin:0 auto;"
dunno if it helps, but its worth trying
Re: Centering the CSSMenu
Posted: Wed Feb 07, 2007 9:44 pm
by Nullig
No... didn't work.
I suspect it has something to do with the menu levels and may not be easily fixed. It doesn't happen in IE, only FF.
Anyone else have any ideas?
Nullig
Re: Centering the CSSMenu [Solved]
Posted: Sun Feb 11, 2007 12:03 am
by Nullig
OK, I think I've solved the problem - it has to do with the 100% width in FF.
So, in my template, I added a div around the horizontal menu to preserve the background color and made the menu smaller with a wider margin.
The template changes:
Code: Select all
<!-- Start Navigation -->
<div style="background-color: #ECECEC;width: 100%;"> <!-- Wrapped in a new div to preserve bg color -->
<div id="menu_horiz">
<h2 class="accessibility">Navigation</h2>
{menu template='cssmenu.tpl' start_level='2' start_element='1.1' show_root_siblings='1'}
<hr class="accessibility" />
</div>
</div> <!-- End of new div -->
<!-- End Navigation -->
and the CSSMenu - Horizontal changes:
Code: Select all
#menuwrapper {
/* Fix for Opera 8 */
/* overflow: hidden; */
background-color: #ECECEC;
border-bottom: 1px solid #C0C0C0;
margin: 0 0 0 23%; <!-- These need to be adjusted according -->
width: 75%; <!-- to the width of your menu -->
text-align: left;
}
This seems to have done the trick. You have to play around with the margin percentages to get the "pseudo-centering" effect, but it eliminates the annoying horizontal scrollbar in FF popping on and off.
Nullig