salve, ho un problema nel creare un menu orizzontale, per il menu verticale tutto apposto ma nell altro ho riscontrato un problema.
praticamente le opzioni mi appaiono in lista,una sotto l'altra e non in fila orizzontalmente..
premetto che ho gia impostato la proprietà float ma nulla, ringrazio chiunque mi aiuterà
codice html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>layout a 2 colonne completo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style/sitomenuverticale.css">
</head>
<body>
<div id="centrato">
<div id="header">
<div id="menuor"
<ul>
<li><a href="#">home</a></li>
<li><a href="#">chi siamo</a></li>
<li><a href="#">servizi</a></li>
<li><a href="#">contatti</a></li>
</ul>
</div>
</div>
<div id="primacolonna">
<div id="menuverticale">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">chi siamo</a></li>
<li><a href="#">servizi</a></li>
<li><a href="#">contatti</a></li>
</ul>
</div>
</div>
<div id="secondacolonna"></div>
<div id="footer"></div>
</body>
</html>
codice css
html,body{
margin:0px;
padding:5px;
background-color:#000000;
}
#centrato{
height:auto;
width:100%;
margin-left:auto;
margin-right:auto;
}
#header{
position:relative;
background-color:#222222;
height:150px;
width:100%;
}
#primacolonna{
width:20%;
height:450px;
float:left;
background-color:#333333;
}
#secondacolonna{
width:80%;
height:450px;
float:left;
background-color:#444444;
}
#footer{
width:100%;
background-color:#555555;
clear:left;
height:50px;
}
#menuverticale ul {
margin:0px;
padding:0px;
list-style-type:none;
}
#menuverticale ul a:link, ul a:visited{
display:block;
padding:10px;
text-decoration:none;
color:white;
text-transform:uppercase;
}
#menuverticale ul a:hover{
background-color:grey;
}
#menuor {
position:absolute;
bottom:0px;
width:100%;
text-align:center;
background-color:#666;
}
#menuor ul{
margin:0px;
padding:0px;
overflow:hidden;
list-style-type:none;
}
#menuor ul a:link, ul li a:visited{
display:block;
padding:10px;
text-decoration:none;
color:white;
text-transform:uppercase;
}
#menuor ul a:hover{
background-color:grey;
}
#menuor ul li{
float: left;
width: 120px;
}
Rispondi quotando
