Come promesso la scorsa settimana in questo post, eccomi a presentarvi la mia soluzione di layout a due colonne. Cominciamo con gli esempi: layout con navigazione a destra e con navigazione a sinistra. Ecco in breve le caratteristiche principali:
- Nell'HTML, la colonna principale precede la navigazione
- Codice HTML e CSS validi
- Layout liquido con colonna secondaria a larghezza fissa (250px)
- Larghezza minima di 760px e larghezza massima di 1240px
- Testati su IE dalla versione 5 alla 7, oltre che sulle ultime versioni di Opera, Firefox e Safari
- Nessun vincolo sulla lunghezza relativa delle due colonne, che grazie alle false colonne daranno l'impressione di essere della stessa altezza
- CSS esterni e modulari: tipografia, layout, colori per una facile personalizzazione
- Commento condizionale e CSS dedicato per servire min-width e max-width anche su IE fino alla versione 6
Ora, probabilmente ci vorrebbe un articolo intero per spiegare i dettagli implementativi dei due esempi... per brevità rimando agli articoli da cui è scaturita la soluzione: si è trattato infatti solo di riprendere alcuni esempi e sostanzialmente fare il copia-incolla-verifica.
Per quanto riguarda la tipografia, sono partito dal CSS risultante da Ritmo verticale nella tipografia. Per il layout, la base è stata quella del
layout con i margini negativi, oltre che Layout Gala. Per le false colonne... si tratta di una tecnica nota ai più: la trovate spiegata in questa pagina dell'articolo Usare il background.
Per cià che riguarda il commento condizionale per IE6 e inferiori, la spiegazione di come emulare le due proprietà min-width e max-width la trovate in 10 Consigli per prepararsi a Internet Explorer 7.
Due parole per i test di resa: se avete installate diverse versioni di IE sulla stessa
macchina, verranno tutte riconosciute come la versione più recente. In sostanza, se
avete installato IE7 e le versioni stand-alone delle precedenti, nell'HTML per poter
effettuare i test di resa dovrete modificare il commento condizionale:
<!--[if lte IE 6]>
Nel seguente, così da poter verificare il supporto di max-width e min-width
anche sulle versioni di IE fino alla 6:
<!--[if IE]>
A fase di sviluppo e test ultimata, sarebbe bene ripristinare il commento condizionale alla sua versione originale. Altri piccoli suggerimenti: rimuovendo o modificando il CSS relativo ai colori, avrete una buona base in bianco per la personalizzazione grafica e cromatica. Per quanto riguarda il font di base: è di 16 px con il carattere di default (o sul valore medio) impostato sul browser; se dovesse risultare troppo grande per i vostri gusti, basterà cambiare il font-size da 100.01% a 76% nel CSS per la tipografia.
Concludo segnalando alcune alternative, dato che per alcuni (me incluso) il fatto che la colonna secondaria si presenti a larghezza fissa potrebbe costituire un limite: ecco quindi Layout liquido a due colonne
e Layout elastico a due colonne.
Nel primo articolo trovate anche le versioni a tre colonne, nel secondo ci sono invece alcune soluzioni ibride che personalmente ritengo molto valide e interessanti.
Questo è tutto per ora... anzi no: ho preparato uno zip per il download con
i due esempi e i file necessari. Alla prossima!
