allineamento menu con css

24-08-2010, 21.16.26

Ciao a tutti.
vi posto la pagina di esempio che stavo preparando.
come diavolo faccio ad allineare il menu all'interno del div " centrato"?
o comunque vedete il riquadro azzurro?
ecco, il menu dovrebbe stare allineato in orizzontale mentre rimane allineato sulla sx del div azzurro.
come faccio a metterlo al centro?
grazie

codice html

Codice HTML:

<html>
<head>
<title>PROVA</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]><script src="/IE7_0_9/ie7-standard-p.js" type="text/javascript"></script><![endif]-->
<link rel="stylesheet" type="text/css" href="css.css" media="screen" />
</head>
<body>
	


<div id="container">

<div id="center">
	<ul id="menu_a_2livelli">
		<li><a href="home.htm">Home</a>		  
		</li>
		
		<li><a href="#">Azienda</a>		  
			<ul>

				<li><a href="chisiamo.htm">Chi Siamo</a></li>
				<li><a href="certificazioni.htm">Certificazioni</a></li>
				
			</ul>
	  </li>
		<li><a href="#">Attività</a>		  
			<ul>

				<li><a href="civile.htm">Civile</a></li>
				<li><a href="industriale.htm">Industriale</a></li>
				<li><a href="bonifiche.htm">Bonifiche</a></li>
			</ul>
	  </li>
		<li><a href="dove.htm">Dove Siamo</a>		 
			 
	  </li>
		<li><a href="contatti.htm">Contatti</a>		  
		
	  </li>



	</ul>

</div>


</div>

</body>
</html>

codice css.css

Codice:

div#container
{
width: 600px; 
height: 400px;
background: #CCFFFF;
margin-left:auto;
margin-right:auto;
}

div#center{
    width:600px;
    background:yellow;


}

ul#menu_a_2livelli{
float: left;
text-align: center;
padding: 0;
border-top: 1px solid #D76120;
border-bottom: 1px solid #D76120;
border-left: 1px solid #D76120;
background: #87CEFA;
list-style:none;
font:1em Trebuchet MS;
}


ul#menu_a_2livelli li ul li{
list-style:none;
margin-left:auto;
margin-right:auto;
padding:0;
}


ul#menu_a_2livelli li{
float:left;
margin: 0;
padding: 0;
border-right: 1px solid #D76120;
color:black;

}


ul#menu_a_2livelli a:link,
ul#menu_a_2livelli a:visited
{
display: block;
padding: 4px 16px;
color: #fff;
text-decoration: none;

}

ul#menu_a_2livelli a:hover,
ul#menu_a_2livelli a:focus,
ul#menu_a_2livelli a:active
{
background-color: #FFF0F5;
color: #000000;
text-decoration: none;
}

ul#menu_a_2livelli li ul
{
display: none;
}
ul#menu_a_2livelli li:hover ul
{
display: block;
position: absolute;
z-index:1;
width:110px;
padding: 0;
margin: 0 0 0 -1px;
border:1px solid #D76120;
background: #87CEFA;
font-size:.8em;
}

ul#menu_a_2livelli li li 
{
border-bottom:1px solid #D76120;
width: 110px;
}

[DS] Usa i tag di codice quando ne riporti ampi stralci, si legge meglio... e non esce un post kilometrico

**karl94** · 25-08-2010, 13.25.20

L'unico modo è impostare la proprietà display su inline-block, solo che non è supportato da tutti i browser.

Codice HTML:

<html>
<head>
<title>PROVA</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]><script src="/IE7_0_9/ie7-standard-p.js" type="text/javascript"></script><![endif]-->
<link rel="stylesheet" type="text/css" href="css.css" media="screen" />
</head>
<body>
    


<div id="container">

<div id="center">
    <ul id="menu_a_2livelli"><li><a href="home.htm">Home</a></li><li><a href="#">Azienda</a><ul><li><a href="chisiamo.htm">Chi Siamo</a></li><li><a href="certificazioni.htm">Certificazioni</a></li></ul></li><li><a href="#">Attività</a><ul><li><a href="civile.htm">Civile</a></li><li><a href="industriale.htm">Industriale</a></li><li><a href="bonifiche.htm">Bonifiche</a></li></ul></li><li><a href="dove.htm">Dove Siamo</a></li><li><a href="contatti.htm">Contatti</a></li></ul>

</div>


</div>

</body>
</html>

Codice:

#container{
    background: #CCFFFF;
    height: 400px;
    margin: 0 auto;
    width: 600px;
}

#center{
    background: yellow;
    text-align: center;
    width: 600px;
}

#menu_a_2livelli{
    background: #87CEFA;
    border-bottom: 1px solid #D76120;
    border-left: 1px solid #D76120;
    border-top: 1px solid #D76120;
    display: inline-block;
    font: 1em Trebuchet MS;
    padding: 0;
}

#menu_a_2livelli li ul li{
    display: block;
    padding: 0;
}

#menu_a_2livelli li{
    border-right: 1px solid #D76120;
    color: black;
    display: inline-block;
}

#menu_a_2livelli a:link, #menu_a_2livelli a:visited{
    color: #FFFFFF;
    display: block;
    padding: 4px 16px;
    text-decoration: none;
}

#menu_a_2livelli a:hover, #menu_a_2livelli a:focus, #menu_a_2livelli a:active{
    background-color: #FFF0F5;
    color: #000000;
    text-decoration: none;
}

#menu_a_2livelli li ul{
    display: none;
}

#menu_a_2livelli li:hover ul{
    background: none repeat scroll 0 0 #87CEFA;
    border: 1px solid #D76120;
    display: block;
    font-size: 0.8em;
    margin: 0 0 0 -1px;
    padding: 0;
    position: absolute;
    z-index: 1;
}

ul#menu_a_2livelli li li{
    border-bottom: 1px solid #D76120;
}

25-08-2010, 21.15.41

grazie grazie grazie
mi hai risolto un problema. grande

Discussione: allineamento menu con css

LinkBack

Strumenti discussione

Display

allineamento menu con css

Regole di scrittura