Help - Search - Members - Calendar
Full Version: Center the content (<ul>) of a horizontal menu
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
samiel
I created a horizontal menu. This is the code:
CODE
{clear:both; width:98%; height:50px; margin:0 auto;
background-color:#1E247C}
#navbar ul{height:50px; line-height:3.1; list-style:none; margin:0
auto;
text-align:center; background-color:#1E247C}
#navbar li{display:inline; margin:0 auto; padding:4px 6px;
background:white;
color:#E03011}
#navbar a{background:white; padding:4px 0 3px; color:#1E247C;
text-decoration:none}
#navbar a:hover{background:white; color:black; text-
decoration:underline}

Strange thing, with IE it's correctly viewed,
but with Firefox and Opera the area of <ul>
is too on the right, and not perfectly in the middle.
How can I center it?
Thanx
M.
pandy
QUOTE
This is the code:

Or part of it.

QUOTE
Strange thing, with IE it's correctly viewed,
but with Firefox and Opera the area of <ul>
is too on the right, and not perfectly in the middle.
How can I center it?

The CSS you posted looks the same in all three mentioned browsers, provided I guessed the HTML right. Could you post the URL to sample page, please?
samiel
This is the whole code of CSS:
CODE
/*stili per il layout fluido*/
html{margin:0; padding:0}
html{background-color:#1E247C}
body{font-family:verdana,tahoma,arial,sans-serif; font-size:76%}
div#container{background-color:white; color:#1E247C; line-height:1.4em}

/*stili su header*/
div#header{background-color:white; color:#1E247C}
h1{font:bold 1.6em verdana,tahoma,arial,sans-serif}
h2{font:1.5em}
h3{padding-top:10px}
h3.header{padding-top:1.2em;text-align:center}
h4{padding-top:10px}
img#logoleft{float:left; text-align:left; margin:15px 0 20px 15px}
img#logoright{float:right; text-align:right; margin:15px 15px 0 20px}

/*stili specifici per il layout*/
#leftmenu{float:left; width:140px;\width:150px;w\idth:140px; padding:40px 20px 0; font:0.85em/25px verdana,tahoma,arial,sans-serif}
#rightmenu{float:right; width:140px;\width:150px;w\idth:140px; padding:40px 20px 0}
#content{margin:0 200px; padding:50px 15px 40px; background-color:#F0F0F0; border-right:double #1E247C; border-left:double #1E247C}

/*stili su footer*/
#footer{clear:both; text-align:center; padding:5px 0; background-color:white; color:#1E247C; border-top:double #1E247C}

/*stili per la sezione navbar*/
#navbarwrapper {clear:both; width:98%; height:50px; margin:0 auto; background-color:#1E247C}
#navbar ul{height:50px; line-height:3.1; list-style:none; margin:0 auto; text-align:center; background-color:#1E247C}
#navbar li{display:inline; margin:0 auto; padding:4px 6px; background:white; color:#E03011}
#navbar a{background:white; padding:4px 0 3px; color:#1E247C; text-decoration:none}
#navbar a:hover{background:white; color:black; text-decoration:underline}

/*stili per la sezione menuleft*/
#leftmenu ul{margin:0; padding:0; list-style-type:none}
#leftmenu li{color:#E03011; margin-right:15px; padding:0; border-bottom:1px solid #1E247C}
#leftmenu a{color:#369; font:normal bold verdana,tahoma,arial,sans-serif; text-decoration:none}
#leftmenu a:hover{color:#033; text-decoration:underline}
#leftmenu p{font-size:90%}

/*stili per la sezione menuright*/
#rightmenu ul{margin:0; padding:0; list-style-type:none}
#rightmenu li{color:#E03011; margin:0; padding-bottom:10px}
#rightmenu a{color:#369; font: text-decoration:none}
#rightmenu a:hover{color:#033; text-decoration:underline}
#rightmenu p{font-size:90%}
p.rightmenu{font:bold 110% verdana,tahoma,arial,sans-serif; border-top:1px solid #1E247C}

/*stili speciali caratteri*/
.bold{font-weight:bold}
.italic{font-style:italic}
.underline{text-decoration:underline}

/*stili speciali testo*/
blockquote{font-style:italic}
blockquote.large{font:italic 2em verdana,tahoma,arial,sans-serif}
.emph{height:1.8em; font-weight:bold; color:white; background-color:#000080; text-align:right}
p.emph{padding-right:2.5em}
.bord{border:2px solid #000080; padding:10px; background-color:white}

/*stili speciali tabelle*/
table,td,th{margin-bottom:30px; border:1px solid #1E247C; background-color:white; border-collapse:collapse}
td,th{padding:5px 10px}
td.narrow{width:5%}
td.col{background:#D5E4FF; font-weight:bold}
th{background:#D5E4FF; font:bold; text-align:center}

/*stili speciali immagini*/
.picright{float:right; text-align:right; padding:0.5em}
.piclogs{float:right; text-align:right; padding:10em 1.5em 0 0}

/*effetto hover immagini*/
a.opacity img {filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7}
a.opacity:hover img {filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0}

/*effetto galleria immagini*/
div#gallery{width:100%; overflow:auto;}
div#gallery dl{float:left; width:150px; height:200px; padding:15px; margin:0 10px 10px 0; background-color:white; color:#1E247C; border:2px solid #1E247C}
div#gallery dl.wide{float:left; width:150px; height:300px; padding:15px; margin:0 10px 10px 0; background-color:white; color:#1E247C; border:2px solid #1E247C}
div#gallery dt{padding:0}
div#gallery img{display:block; margin:0 auto; border:0}
div#gallery dd{margin:0}


And this one is the URL:
http://samiel.netsons.org

Thanx!
M.
pandy
I must misunderstand what you mean. The buttons are centered as far as I can see. They look a little fucked up in IE6 (in the middle in the screen cap below), but look nice in Opera and Gecko. huh.gif

Click to view attachment
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.