Solution how to center a horizontal Show_Menu2 menu (all css 2)

[Boudi]

Hi there,

On several topics I read there were problems regarding centering a horizontal menu but no solutions.

I did some testing on the SM2 menu of the ALL CSS 2 template and found the solution.

Go to the css and find:

Code: [Select]

#nav {
height: 1.68em;
background: #666;
border-top: 0;
border-bottom: 1px solid #000;
padding:0;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 81%;
text-transform: uppercase;
width: auto;

Change it into:

Code: [Select]

#nav {
height: 34px;
float:right;
position:relative;
        left:-50%;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 11px;
width: auto;
left:50%;
There are 2 real changes (forget the other ones. They're just personal changes):

In #nav put this code:

float:right;
position:relative;   
left:-50%;

In #nav ul put this code:

left:50%;

If you use submenu's then just put in the 2nd Child menu under #nav .menu li ul the following:
left:-25%;

With the submenu's it's just playing with the "left" css style.

Hope this helps for you.

Boudi

[Argos]

I didn't try, and just out of curiousity: isn't it also possible to just add a container DIV around the nav, with style "text-align: center"? Or with style "margin: 0 auto"?

[Boudi]

isn't it also possible to just add a container DIV around the nav, with style "text-align: center"? Or with style "margin: 0 auto"?

First I thought it was indeed that simple but it isn't. I already tried your solutions too but the <div> solutions don't work. They will be overwritten by the css. Besides that you have to deal with the submenu's too when you center the whole thing because they have seperate css calls.

I have a working example [here] (still in testmodus). As you see it's fully centered and the submenu's are too. (even tested with sub-submenu's and that worked great)

Boudi

[Argos]

Nice work! I actually never thought about centering a menu, but it looks nice for a change. How would it look to center the text within the LI's as well? Nice, or a bit messy?

[Boudi]

Thnq

I'm not sure to center the text too. I think I leave it this way but may be I'm thinking different this afternoon *lol* 

Well I acutally build the (external) webshop first. The menu of this shop is centered. After that the client wanted the website build with the same style as the webshop. So I had to center the menu too. So this website and webshop are completely 2 different scripts (WB and Cubecart) but overall they share the same look

[dbs]

something ist wrong with your nav.
firebug says:

Code: [Select]

#nav {
float:left;
height:34px;
}is all you need to center the nav.

but normally ist div with text-align center the right way.
like here: *removed*

dbs

[Boudi]

Hi,

Thnq for responding.

but normally ist div with text-align center the right way.

You're totally right and that was one of my first tries too but it simply doesn't work with the ALL CSS 2 menu and submenu style.

Creating a menu in the center is no problem. Creating one with sub(submenu's) is another thing. And that's why I put this solution down here

Boudi.

[DGEC]

It is centred nicely, congrats on figuring it out.

I do hope that the example site link is not supposed to be all working because the drop-downs seem badly broken in IE7. Not sure, might be just because of the rotating banner.
The "behandelingen" menu somestimes only shows the first item on the drop-down instead of the full drop-down list when the rotating highlight is on the first point and on all of them only the first item on the menu can be picked as the menu disappears when the mouse goes further down.

Can't see the sub-submenu's you mentioned, probably due to the last point.

[Boudi]

because the drop-downs seem badly broken in IE7

You're right. I only checked it with IE8 and FF. But I think this can be easy fixed with a z-index. Thnq for noticing!

Sub-submenu's I did test and it works fine. But for this website They were not needed.

Regarding the sub- and subsubmenu's:

If you use submenu's then just put in the 2nd Child menu under #nav .menu li ul the following:
left:-25%;

With the submenu's it's just playing with the "left" css style.

UPDATE: Works well under IE7 too now (placed a z-index)