Come realizzare un layout fisso e centrato con CSS
Esistono molti tipi differenti di layout nel web, ma uno dei più utilizzati e funzionali è sicuramente il layout fisso e centrato. Ottenerlo con CSS non è difficile, ma bisogna stare attenti alla larghezza da dare al contenitore centrale, in modo da non creare scroll orrizzontali per utenti con risoluzioni minori, in quanto risultano (almeno personalmente) molto fastidiosi per la navigazione.
Le dimensioni più utilizzate sono principalmente tre, in ordine:
- 600px;
- 760px;
- 960px;
Con il passare del tempo le risoluzioni dei monitor stanno aumentando, ma è comunque consigliabile non esagerare con le dimensioni.
Vediamo ora come come sarà la base della nostra pagina:
<body> <div id="container"> Questo sarà il contenitore centrato</div> </body>
Come vedete dal codice avremmo un div chiamato “container”, che sarà quello che andremo a centrare, all’interno del quale potremmo poi inserire gli altri div ed organizzare la struttura ed il contenuto del sito.
Passiamo ora al CSS:
body{ text-align: center; } #container{ width: 760px; margin: auto; text-align: center; }
Impostare l’allineamento del testo al centro per il body serve per centrare il layout nelle vecchie versione di Internet explorer, di conseguenza dobbiamo ripristinare l’allineamento a sinistra nel “container”. Per tutti gli altri browser la funzione “margin: auto;” distribuirà lo spazio in modo equivalente ai lati del div, permettendoci di centrarlo.
Leave a Reply
Want to join the discussion?Feel free to contribute!