CSS  »  Articoli  »  CSS Template e layout 

Questa è la traduzione dell'articolo The First Tool You Reach For di Kevin Yank pubblicato originariamente su 24 Ways il 13 dicembre 2008.

Microsoft ha recentemente annunciato che Internet Explorer 8 sarà rilasciato nella prima metà del 2009. Rispetto al supporto degli standard degli altri browser più diffusi, IE8 non offrirà nulla di particolarmente eccezionale, ma raggiungerà finalmente lo stato dell'arte in una specifica area: il supporto delle tabelle CSS. Questo fatto può potenzialmente innescare un cambiamento importante nel vostro approccio al web design.

Per mostrarvi quanta grande differenza possano fare le tabelle CSS, pensate a come potreste realizzare da zero un layout fluido a tre colonne. Giusto per rendervi la vita un po' più complicata, una colonna sarà a larghezza fissa, con un colore di sfondo diverso da quello del resto della pagina. Pronti? Andiamo!

OK, dal momento che siete tra i web designer che leggete 24Ways, supporrò che avete almeno considerato l'idea di realizzare il tutto senza usare le tabelle HTML per il layout. Se poi siete tra quelli che seguono le tendenze più avanzate, allora suppongo che avete già iniziato a pensare ai float CSS, ai margini negativi e alle false colonne.

Ora ammetetelo: probabilmente avete anche considerato il tempo necessario per calcolare alla perfezione le possibili sovrapposizioni sui margini negativi, per verificare i float collassati in Internet Explorer e in generale per far sì che su tutti i browser le cose appaiano come volete. Se dopo tutto avrete la tentazione di mollare e usare le tabelle HTML, non posso certo incolparvi di qualcosa.

Ci sono tantissimi web designer professionisti che scelgono ancora di usare le tabelle HTML come loro principale strumento nella creazione del layout. Certo, sanno che gli utilizzatori di screen reader possono rimanere confusi da questo uso inappropriato delle tabelle, ma alla fine hanno un lavoro da portare a termine, e preferiscono affidarsi a strumenti che rendano quel lavoro semplice non difficile e complicato.

Ora lasciate che vi mostri come fare tutto usando le tabelle CSS. Per prima cosa, abbiamo un elemento div per ciascuna delle nostre colonne e inseriamo tutto all'interno di altri due div:

<div class="container">
<div>
<div id="menu">
---
</div>
<div id="content">
---
</div>
<div id="sidebar">
---
</div>
</div>
</div>

Non preoccupatevi dell'ammasso di div che vedete nel codice riportato qui sopra. Diversamente da quanto avviene per le tabelle, i div non hanno un significato semantico e dunque possono essere usati liberamente per offrire degli agganci agli stili che volete applicare alla pagina.

Usando i CSS possiamo far sì che il div più esterno si comporti e venga visualizzato come una tabella con i bordi collassati (ovvero, le celle adiacenti condividono un bordo) e con layout fisso (ovvero, la larghezza delle celle non è definita dal loro contenuto):

.container {
display: table;
border-collapse: collapse;
table-layout: fixed;
}

Con altre due regole impostiamo il div centrale per far sì che si comporti come la riga di una tabella, e ciascuno dei div interni li definiamo come se fossero le celle della tabella:

.container > div {
display: table-row;
}
.container > div > div {
display: table-cell;
}

Per finire, possiamo impostare direttamente la larghezza delle celle (e della tabella stessa):

.container {
width: 100%;
}
#menu {
width: 200px;
}
#content {
width: auto;
}
#sidebar {
width: 25%;
}

Ecco, abbiamo ora un solido layout a tre colonne pronto per ricevere gli stili che preferite, come in questo esempio:

Figura 1 - Anteprima del layout

Altri articoli

Altre guide

Altre newsletter