allineamento menu con css
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
