Layout a tre colonne con i posizionamenti assoluti

Nell' esempio la colonna centrale è compresa nel flusso della pagina ed ha dimensioni per i margini in modo tale da lasciare lo spazio alle 2 colonne laterali, le quali sono posizionate in modo assoluto con una larghezza fissa. Da notare che le due colonne laterali termina prima di quella centrale in quanto la loro altezza è determinata dal loro contenuto. Ecco il codice che è stato utilizzato:

<style type="text/css">
body {
margin: 0px;
padding: 0px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
line-height: 20px;
color: #000;
background-color: #e6e6e6;
}
#sinistra{
position: absolute;
top: 0px;
left: 0px;
margin: 5px;
padding: 10px 3px 10px 3px;
border: 1px solid #000;
background-color: #fff;
width:100px;
line-height:22px;
}
#centrale {
margin: 5px 122px 5px 122px;
padding: 10px;
border: 1px solid #000;
background-color: #fff;
}
#destra {
position: absolute;
top: 0px;
right: 0px;
margin: 5px;
padding: 10px;
border: 1px solid #000;
background-color: #fff;
width: 90px;
}
</style>

Altri codici che ho utilizzato per ottenere l' effetto roll-over sul menu di sinistra, potrete vederli meglio scaricando la cartella ".zip", contenente lo stesso file di esempio. La disposizione nel <body> è la seguente:

<div id="sinistra">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
.................
</div>
<div id="centrale">
Lorem ipsum dolor.............
</div>
<div id="destra">
Lorem ipsum dolor sit........
</div>

Per il momento ci fermiamo qui con la costruzione di questo primo layout. La prossima prevede la realizzazione di una pagina html sempre con 3 colonne ma in più aggiungeremo una gabbia orizzontale al di sopra delle tre.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati