ragazzi ho fatto questa prova per costruire un layout in css a colonna unica:
body,html {
background-color: #666666;
margin: 0;
text-align:center;
height:100%;
padding: 0px;
}
.header {
background-color: #000000;
margin: 0px auto;
padding: 0px;
text-align: center;
height: 150px;
width: 500px;
}
.menu {
margin: 0px auto;
padding: 0px;
text-align: center;
height: 45px;
width: 500px;
}
ul
{
margin: 0px auto;
padding: 0px;
list-style-type: None;
}
li {
display: inline;
float: left;
width: 150px;
padding: 0px;
background-color: #CC0000;
height: 45px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
li a {
display: inline;
float: left;
width: 150px;
padding: 0px;
background-color: #CC0000;
height: 45px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
li a:hover{
background-color: #999999;
}
li1 {
display: inline;
float: left;
width: 125px;
padding: 0px;
background-color: #00FF33;
height: 45px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
li1 a {
display: inline;
float: left;
width: 125px;
padding: 0px;
background-color: #00FF33;
height: 45px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
li1 a:hover {
background-color: #999999;
}
li2 {
display: inline;
float: left;
width: 100px;
padding: 0px;
background-color: #009999;
height: 45px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
li2 a{
display: inline;
float: left;
width: 100px;
padding: 0px;
background-color: #009999;
height: 45px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
li2 a:hover{
background-color: #999999;
}
li3 {
display: inline;
float: left;
width: 125px;
padding: 0px;
background-color: #999900;
height: 45px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
li3 a{
display: inline;
float: left;
width: 125px;
padding: 0px;
background-color: #999900;
height: 45px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
li3 a:hover{
background-color: #999999;
}
.content {
background-color: #CCCCCC;
margin: 0 auto;
height: 100%;
width: 500px;
}
-->
</style>
</head>
<body>
<div class="header"></div>
<div class="menu">
<ul>[*]
<li1></li1>
<li2></li2>
<li3></li3>
[/list]
</div>
<div class="content"></div>
e mi pare che funzioni bene...l'unica cosa che non riesco a spiegarmi (sicuramente sarà una cavolata)
è il fatto che lo scroll della pagina appaia come se ci fosse del contenuto oltre la zona del browser visibile! in poche parole...è possibile renderlo statico, finquando non c'è contenuto dentro il div "content"??? devo mettere un fixed da qualche parte?
Grazie in anticipo...
