Centering the menu "Simple - Horizontal" on the page

[WebPiet]

Hi, I want to center a horizontal menu on my page.

Code in template:

Code: Select all

{menu template='simple_navigation.tpl' start_level='2'  collapse='1'}

Style sheet "navigation: Simple - Horizontal"

I tried several things, but the menu ul stil still ends at the left side of the page.

I've read some solutions for centering horizontal menus with a fixed numer of menu-items, but these solutions seem not to work with a variable numer of menu-items. Since the horizontal menu starts at level 2, the range will be from zero items tot approximately 5.

Have a look at my test page http://www.reinaert.org/index.php?page=test-fisheye-css-dock-menu and you'll understand what I want to achieve by centering the horizontal menu: a nice aligning with the dock-menu with start_level='1".

All help greatly appreciated.

Piet.

[Dr.CSS]

Sorry the only way to center align a div is to give it a width less than 100%, auto width won't work, then add margin: 0px auto and padding: 0px auto won't work...

[WebPiet]

Mark, thanks for your advice.

But also with giving the div widths less than 100% I still don't get the ul with the menu in the middle. In fact: I get everything centered exept ... the ul with the menu.

It has something to do with the "float:left;" of the li

Code: Select all

/* menu list items */
div#menu_horiz li {
   float: left; /* makes the list horizontal */
   list-style: none; /* hides the list bullet */ 
   margin: 0 ;
   border-right: 1px solid #C0C0C0;
}

When I change this to

Code: Select all

/* menu list items */
div#menu_horiz li {
   list-style: none; /* hides the list bullet */ 
   margin: 0 ;
   border-right: 1px solid #C0C0C0;
}

the menu ul is well centered ... but it became a vertical menu instead of the horizontal menu I have in mind

Look for an example of both the codes on : http://www.reinaert.org/index.php?page=test-fisheye-css-dock-menu

The adjustment of the width% seems only to work well with  menu with almost fixed total width. And in my case the width of each menu on level 2 will be unpredictable.

Since I implemented the css dock menu in a menu manager template (kinda dirty but efficient trick by using the field "titleattribute" for the paths to the images)

Code: Select all

{if $count > 0}
{foreach from=$nodelist item=node}

<a class="dock-item2" href="{$node->url}"><span>{$node->menutext}</span><img src="{$node->titleattribute}" alt="{$node->menutext}" /></a>

{/foreach}
{/if}

It would be an advantage for the enduser not having to concern about how many menu's to use on both levels 1 and 2.

The few "centered horizontal ul" solutions I found on the web or the cmsms forum seem all for a fixed number of li.

So if you or anyone can help ... thanks in advance!

[GraemeS]

the issue itself is not cmsms but with css styles as with divs you cant work centre

i working on a workaround for my site at mo when i get a solution will be able to help

if level two is relative should be able to sort, mine is absolute which is causing headaches

[Dr.CSS]

Like I said there is no way to center it with width set at 100% or by taking the width out all together, it will assume 100% then, if you know the width of the long set of sub menu items you could use it to set your width but the ones with less items will be left more than centered...

Sorry...