Centering orizontal menu - HTML Forums

samiel · 02-22-2008, 07:42 PM

I have to create an orizontal menu. The code is the following one:

Code:

#navbarwrapper {clear:both; width:98%; height:50px; margin:0 auto; background-color:#1E247C}
#navbar ul{height:50px; list-style:none; margin:0 auto; text-align:center; background-color:#1E247C}
#navbar li{display:inline; padding:4px 5px; background:white; color:#E03011}
#navbar a{background:white; color:#1E247C; text-decoration:none}
#navbar a:hover{background:white; color:black; text-decoration:underline}

You can see the result at this page: http://samiel.netsons.org/
However, I'd like to have the menu just in the middle of the page
and the <ul> vertically just in the middle of <navbarwrapper>.
Some suggestions? Thanx!
M.

rangana · 02-22-2008, 07:58 PM

Which menu do you mean??Is it the one that is contained on the leftnav div?
I just went through your page and it's completely perfect

samiel · 02-22-2008, 08:02 PM

I mean the orizontal menu in the header.
I'ts not really orizontal centered in the page
and the menu voices are not vertically in the middle
of the blue area...

M.

rangana · 02-22-2008, 08:08 PM

Just add

Code:

line-height:50px;

in your #navbar ul.

See if it helps

samiel · 02-22-2008, 08:23 PM

It's seems to wirk u the menu,
but If u visit again the page,
u'll see that now <content> override the navbar!
Moreover, the <navbar> is too on tje right
and not just in the (orizontal) center

Thanz!
M.

rangana · 02-22-2008, 08:25 PM

What is <content>??..I tried it with IE7 and FF, but it did not override the div that holds

Quote:

Un classico
non ha mai finito di dire
quello che ha da dire

Italo Calvino

samiel · 02-22-2008, 08:53 PM

I'm using Firefox. Witrh this code
#navbarwrapper {clear:both; width:98%; height:50px; margin:0 auto; background-color:#1E247C}
#navbar ul{height:50px; line-height:50px; list-style:none; margin:0 auto; text-align:center; background-color:#1E247C}
#navbar li{display:inline; padding:4px; background:white; color:#E03011}
the menu boxes are on the bottom of the navbar,
and not in the middle.
Morevoer, as I told over, the blue menu
is not really in the middle of the page
If u control wuth Webdeveloper,
u'll see that there is an overlap.
The top of the content overlap the navbar...

M.

rangana · 02-22-2008, 09:48 PM

Now...looking at your page..I'm certain that is already vertically and horizontally in the middle of the bluish navbar. Can't figure out what's causing the mess