This work is licensed under a Creative Commons License.
Powered by Google
In questo articolo vedremo come realizzare il classico layout a tre colonne in XHTML con un intestazione ed un footer utilizzando i CSS e la proprietà float.
Partiamo col definire la struttura XHTML che di seguito formatteremo coi CSS.
<div id="head">
<p><img src="logo.jpg"/></p>
</div>
<div id="menusx">
<p>Colonna di sinistra</p>
</div>
<div id="menudx">
<p>Colonna di destra</p>
</div>
<div id="contenuti">
<p>Contenuti</p>
</div>
<div id="foot">
<p>Piede</p>
</div>
Direi che non c'è niente di particolare da dire, se non che la colonna di sinistra (id="menusx") e la colonna di destra (id="menudx") precedono quella centrale che conterrà i contenuti; questa disposizione è fondamentale per la tecnica che andremo ad utilizzare.
Vediamo il codice CSS:
#head{
}
#menusx{
float: left;
width: 10em;
}
#menudx{
float: right;
width: 10em;
}
#contenuti{
margin: 0 10.5em 0 10.5em;
}
#foot{
clear: both;
}
Analizziamo il codice: la proprietà float fa allineare un elemento a sinistra (o a destra, a seconda che il suo valore sia impostato come left o right) e fa scorrere gli elementi che seguono alla sua destra (o sinistra). Quindi abbiamo allineato #menusx a sinistra, #menudx a destra e gli elementi che seguono nel flusso del documento (#contenuti e #foot) scorrono a destra di #menusx e a sinistra di #menudx.
A #contenuti abbiamo dato un margin-left di 10.5em ed un margin-right: di 10.5em, questo perché, se i dati inseriti in #contenuti superano di altezza quelli di una dalle due colonne, i dati di #contenuti slitterebbero sotto le due colonne, come è illustrato in questo esempio.
In fine a #foot, dato che non vogliamo che scorra ai lati degli elementi a cui è applicato il float, diamo la proprietà clear: both;
Ora abbiamo fatto il nostro layout fluido (cioè che si adatta alla risoluzione dello schermo dell'utente) a tre colonne con head e foot, ma se volessimo che il layout fosse un po' più stretto e magari centrato cosa dovremmo aggiungere? Semplice, basterebbe inserire la nostra struttura XHTML in un altro <div>, dare al nostro <div> la larghezza desiderata e centrarlo come già descritto in questo articolo.
Quindi, la struttura XHTML dovrebbe presentarsi così:
<div id="contenitore">
<div id="head">
<p><img src="logo.jpg" /></p>
</div>
<div id="menusx">
<p>Colonna di sinistra</p>
</div>
<div id="menudx">
<p>Colonna di destra</p>
</div>
<div id="contenuti">
<p>Contenuti</p>
</div>
<div id="foot">
<p>Piede</p>
</div>
</div>
Mentre il CSS:
#contenitore{
width: 50em;
}
#head{
}
#menusx{
float: left;
width: 10em;
}
#menudx{
float: right;
width: 10em;
}
#contenuti{
margin: 0 10.5em 0 10.5em;
}
#foot{
clear: both;
}
Ecco il nostro layout. Da notare che ho usato come unità di misura gli "em", così facendo i layout si ridimensiona ingrandendo i caratteri. Se l'idea di un layout ridimensionabile non vi piace, basta esprimere le misure in "px".
Una volta definita la struttura non vi resta che andare ad inserire i colori i carattere e gli altri elementi di presentazione; se andrete ad inserire anche un border ed un padding e necessario che voi siate a conoscenza delle diversità d'interpretazione del box model.