Centrare il layout con i CSS
Iniziando con la stesura di un nuovo sito web ci si può chiedere come centrare il layout del sito senza utilizzare le tabelle ma con il solo support offerto dai CSS.
Questo si fa con estrema facilità, basta seguire delle regole ben precise di modo che in seguito il lavoro successivo sia più semplice. Nel codice del sito dovrete impostare un spazio all’interno del quale verrà publicato tutto il contenuto della pagina web, infatti questo contenitore avrà all’interno anche il layout del sito e ne farà parte integrante. Scegleite la grandezza a vostro piacimento affinchè sia centrato nella pagina, io vi consiglio se lavorate in pixel di non superare i 780px e, se invece adorate le percentuali, come il sottoscritto ;-), non superate 82%; a parer mio è meglio lavorare sulle percentuali in quanto risultano indipendenti dalla risoluzione dello schermo utilizzato dall’utente finale, in quanto si adattano automaticamente allo spazio fornitogli.
Per semplicità chiameremo il nostro contenitore container. Questo è quello che compare scritto sulla pagina web:
<body>
<div id="container">
<p>il testo si mette qua dentro</p>
</div>
</body>
Mentre sul foglio di stile dovrete scrivere:
body {
text-align: center;
}
#container {
margin: 0 auto;
width: 760px;
}
Utilizzando il CSS e seguendo le due regole applicate a #container forzeremo qualunque cosa all’interno del div ad essere centrata, ottenendo così l’effetto desiderato.
Vediamo un pò cosa significano queste righe di codice: abbiamo impostato nel body di centrare il contenuto, mentre al div #container abbiamo specificato una larghezza precisa, qualunque essa sia. La voce margin: 0 auto ci permette di avere 0 pixel in cima e sul fondo del div, e auto imposta i margini di sinistra e destra. Da notare una cosa importante: è la seconda voce, quella che imposta la grandezza, che fa il lavoro sporco, infatti il trucco è tutto qui.
Adesso abbiamo solamente un problema, e cioè che con queste specifiche tutto nella pagina sarà centrato, per annullar questo inconveniente interveniamo a livello di #container aggiungendo la seguente regola:
#container {
margin: 0 auto;
width: 760px;
text-align: left;
}
Con quest’ultima impostazione tuto dentro #container sarà allineato a sinistra, lasciando però inalterata la nostra disposizione centrata del layout. Lo stesso principio può essere applicato non solo per centrare il layout ma anche per i vari elementi e componenti della pagina.
Alcuni si potrebbero domandare perchè è utilizzato text-align: center, infatti questa non è proprio una regola di gran pulizia del codice, ma purtroppo è necessaria. La ragione per cui l’ho utilizzata è che questa è a beneficio degli utenti di IE5/Win. Infatti senza questa impostazione la maggior parte dei browser interpreterà bene la voce auto impostando in modo corretto i margini sia a sinistra che a destra; ma IE5/win non si comporta nello stesso modo.
