CSS  »  Articoli  »  CSS Template e layout 

Le altre due varianti sono un po' insolite per la disposizione delle tre colonne. Il terzo esempio presenta infatti da sinistra verso destra contenuti, navigazione e colonna extra. Ecco il CSS essenziale:

div#main{float:left;width:540px}
div#content{float:left;width:400px}
div#nav{float:right;width:140px}
div#extra{float:right;width:220px}

Mi è già capitato di visitare siti con una dispozione come quella dell'esempio appena visto, e devo dire che è fondamentale in casi simili saper servire intelligentemente i contenuti e il layout di modo da non disorientare l'utente. Una possibile alternativa è utilizzare un layout allineato a sinistra anziché centrato.

Il quarto esempio a parer mio potrebbe avere un impatto iniziale negativo sull'utente, o quantomeno sorprendente. Le tre colonne da sinistra verso destra sono infatti colonna supplementare, navigazione e contenuti. Ecco il CSS:

div#main{float:left;width:540px}
div#content{float:left;width:400px}
div#nav{float:right;width:140px}
div#extra{float:right;width:220px}

La questione è che, essendo abituati a leggere da sinistra verso destra, tendiamo a privilegiare la parte sinistra, poi la parte centrale e poi quella destra dello schermo. La sensazione che potrei percepire (ed è solo una sensazione soggettiva) visitando un sito con un layout simile è che ai contenuti reali si sia data un'importanza secondaria, e probabilmente avrei delle difficoltà di consultazione (perlomeno iniziali).

Conclusioni

Questo è un articolo dedicato ai fogli di stile, non all'usabilità nè all'architettura dell'informazione, e ho voluto mostrare come i CSS offrano come sempre diverse possibilità di scelta nella disposizione del layout. Tutto questo con un unico contenitore aggiuntivo nell'HTML e delle semplici regole per dei layout davvero stabili. La scelta su quale layout utilizzare è vostra, anche se personalmente ho un po' di riserve sugli ultimi due esempi visti.

Prima di chiudere l'articolo, tengo a precisare che ho cercato di focalizzare l'attenzione sul layout, e ho volutamente usato una grafica minimale, quasi "spartana". Ritengo inoltre che la larghezza delle colonne dovrebbe servire al meglio i contenuti e per questo ho presentato layout in cui la colonna extra si presenta più larga della navigazione. Ovviamente le larghezze ottimali andrebbero stabilite in funzione del sito e dell'organizzazione dei contenuti supplementari e di navigazione.

La tecnica dei float opposti ultimamente si sta diffondendo grazie ad alcuni articoli dedicati al layout liquido con tre colonne percentuali. Un paio che meritano una lettura, in inglese, sono Making Complex CSS simple e Three columns layout: a different approach. Per il layout liquido con colonne percentuali è inoltre possibile usare la tecnica delle false colonne, di cui abbiamo parlato in Guida Layout dei siti con i CSS. Codice ed esempi sono disponibili per il download. Alla prossima.

Altri articoli

Altre guide

Altre newsletter