Centering menus — float: left causing problems

[bbruno]

I have searched high and low through all the center menu topics…what is the best practice for centering the pixopoint menu? Basically so it builds menus from center of page out.

I have tried a bunch of different ideas/css..nothing has really worked.

Love the plugin…be great to fix this one issue…

[imported_Ryan]

Using a fixed width (say 800px) to the containing block (often #suckerfishnav) and applying margin: 0 auto to it (to center it) should do the trick.

[bbruno]

hhmmm…I will have to try that again. Did not seem to work for me. But will give it another shot.

[Dr.Wily]

I have the same problem. Drop down menu is not centered with main menu.

The CSS

[code:zw9f087w]#suckerfishnav {
    background: url("../multi-level-navigation-plugin/images/menu_bg.gif") repeat-x;
    font-size:18px;
    font-family:verdana,sans-serif;
    font-weight:bold;
    width:800px;
    margin:0 auto;
    }
#suckerfishnav, #suckerfishnav ul {
    float:left;
    list-style:none;
    line-height:1;
    padding:0;
    border:1px solid #ffffff;
    margin:0 auto 1em auto;
    width:50em;
    }
#suckerfishnav a {
    display:block;
    color:#ffffff;
    text-decoration:none;
    padding:0px 10px;
    }
#suckerfishnav li {
    background: url(../multi-level-navigation-plugin/images/menu_bd_left.gif) no-repeat;
    float:center;
    padding:0;
    }
#suckerfishnav ul {
    background: url(../multi-level-navigation-plugin/images/menu_bd_left.gif) no-repeat;
    position:relative;
    left: 25%;
    height:auto;
    width:0px;
    font-weight:normal;
    margin:0;
    line-height:1;
    border:0;
    border-top:0px;
    }
#suckerfishnav li li {
    background: url("../multi-level-navigation-plugin/images/menu_bg.gif") repeat-x;
    width:100px;
    border-bottom:1px solid #000000;
    border-left: url(../multi-level-navigation-plugin/images/menu_bd_left.png) no-repeat;
    border-right: url(../multi-level-navigation-plugin/images/menu_bd_right.png) no-repeat;
    font-weight:bold;
    font-family:verdana,sans-serif;
    }
#suckerfishnav li li a {
    padding:4px 4px;
    width:10px;
    font-size:12px;
    color:#FF0000;
    }
#suckerfishnav li ul ul {
    margin: 0px 0 0 5px;
    }
#suckerfishnav li li:hover {
    background: url(../multi-level-navigation-plugin/images/menu_bd_left_over.gif) no-repeat;
    }
#suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {
    color: url(../multi-level-navigation-plugin/images/menu_bd_left_over.gif) no-repeat;
    }
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
    color: url(../multi-level-navigation-plugin/images/menu_bd_left_over.gif) no-repeat;
    }
#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
    color: url(../multi-level-navigation-plugin/images/menu_bd_left_over.gif) no-repeat;
    }
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {
    left:-900em;
    }
#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {
    left:center;
    width:0px;
    background: url(../multi-level-navigation-plugin/images/menu_bd_left_over.gif) no-repeat;
    }
#suckerfishnav li:hover, #suckerfishnav li.sfhover {
    background: url(../multi-level-navigation-plugin/images/menu_bd_left_over.gif) no-repeat;
    }[/code:zw9f087w]

Help is very apreciated  ” title=”Wink” />

[imported_Ryan]

That’s a different issue you have there. That’s the dropdowns alignment and will be caused by a clash with your themes CSS. Can’t help without seein the code though.

[brlbeagle]

OK, admitted noob here.
Website is http://www.beaglerescueleague.org
LOVE the plugin – so easy I can kiss you. BUT (you knew that was coming) I can’t figure out 2 things – how to center it without a CSS degree (I really am new) and how to drop it so that I don’t cut off my logo (which as you can see I did)…

HELP – I’m totally lost ” title=”Smiley” />

[imported_Ryan]

Hi,
Sorry for the ridiculously long wait time before I have replied.

Menus can be centered by applying margin: 0 auto along with a fixed or variable width to the menus containing block. Sorry, but there’s no simple way to do this otherwise I’d have incorporated it as an option into the plugin already. You may experience some technical glitches in the process too as there are a few potential incompatibilities you may stumble across as well.

[Author]

Posts