CSS  »  Articoli  »  CSS Template e layout 

In questo articolo presenterò due versioni di layout liquidi a due colonne. Un layout liquido (o fluido) è un layout in cui la grandezza della pagina è variabile e asseconda la finestra del browser. A differenza del layout fisso, un layout liquido è adatto a tutte le risoluzioni. Molti web designer hanno detto la loro sul tema "Fisso contro liquido", questa pagina riporta alcuni link interessanti.

Non è questa la sede per entrare in discorsi quali usabilità, lunghezza ideale di una linea di testo e altri argomenti che stanno alla base di un dibattito che non credo giungerà mai a una parola definitiva. Quello che mi sento di dire è che un layout può risultare più adatto a seconda della tipologia del sito, della quantità di informazioni per pagina, delle necessità grafiche e di altri fattori da valutare caso per caso.

Requisiti di un layout liquido a due colonne

Ecco alcune caratteristiche che dovrebbero supportare la realizzazione di un layout liquido:

• La prima cosa è che il font sia proporzionale. Se è vero che un layout liquido è adatto a tutte le risoluzioni, bisognerà comunque far sì che sia possibile per l'utente ridimensionare i caratteri.
• La colonna secondaria dovrà preferibilmente essere in percentuale: questo consente un migliore utilizzo del viewport e fa si che la proporzione tra le due colonne venga mantenuta con qualsiasi larghezza della finestra del browser.
• Affinchè il layout sia robusto, andrà controllata la sua larghezza minima.
• I contenuti della colonna secondaria dovranno essere piuttosto abbondanti. Non ha senso realizzare un layout liquido e ospitare nella colonna secondaria solo quattro o cinque link per la navigazione del sito.
• È consigliabile fornire un link di salto ai contenuti per chi naviga con dispositivi alternativi quali screen readers e browser testuali.

Fatte queste premesse, possiamo iniziare.

False colonne in percentuale

Abbiamo già parlato di false colonne nella Guida ai layout con i CSS e nell'articolo: «». Quello di cui non abbiamo ancora parlato è come ottenere false colonne in percentuale. Vediamo subito l'esempio (con stili incorporati) che andremo a realizzare.

La lunghezza delle due colonne è totalmente ininfluente per il layout, e si ha l'effetto che esse si estendono fino al footer. Ciò è ottenuto con un immagine di sfondo larga 1600 pixel e alta 10. Il trucco consiste nel posizionare l'immagine di sfondo in larghezza percentuale, in modo da ricalcare le due colonne della pagina. Il posizionamento in percentuale di un'immagine si riferisce alla grandezza del contenitore, e se l'immagine eccede il suo contenitore le parti escluse a sinistra e destra rispetteranno le percentuali della posizione del background, così anche la parte visibile del background rispecchierà le percentuali delle due sezioni dell'immagine. In tal caso, quindi, l'immagine di 1600 pixel di larghezza è divisa in due sezioni colorate, larghe rispettivamente il 33 e il 67% della larghezza totale. Ecco l'immagine di sfondo usata nell'esempio (qui ridotta per motivi di spazio e circondata da un bordino nero):

Ora vediamo cosa succede se l'immagine è posizionata con un background-position pari al 33% per la coordinata x:

Nella prima riga c'è l' immagine per intero, mentre nelle altre tre è mostrata all'interno di un riquadro che simula la finestra del browser. Come si può notare la parte visibile viene comunque divisa cromaticamente con le percentuali che costituiscono le due sezioni dell'immagine, onorando la percentuale del 33% del background-position. In sostanza, il 33% si riferisce alla percentuale di parte esclusa sulla sinistra dell'immagine.

Una semplice immagine e una proprietà CSS ci consentono quindi di ottenere un layout liquido con colonne che si estendono fino al footer, sia nel caso in cui sia più lunga la colonna dei contenuti sia che si tratti di quella secondaria.

Isoliamo la tecnica della falsa colonna e applichiamola al body: ecco il risultato. L'unica regola CSS in questo caso è la seguente:

body{ background: url(lliquid.jpg) repeat-y 33% 0}

Questa è la base della costruzione grafica del layout che andremo a realizzare. Ora è tempo di passare al codice.

Altri articoli

Altre guide

Altre newsletter