L’impaginazione dei contenuti centrali

Finora abbiamo visto i principali layout e le loro diverse varianti. Tutti gli esempi hanno una formattazione e dei contenuti semplici per non appesantire troppo i fogli di stile, e soprattutto non distogliere l’attenzione dallo scopo principale di questa guida: l’impaginazione. Non potevo però trascurare una sezione dedicata al “micro-layout” cioè all’impaginazione dei contenuti centrali di una pagina web. Vedremo brevemente come gestire immagini, titoli e paragrafi, ma allo stesso modo si può procedere per qualsiasi elemento.

Float e clear

Prima di addentrarci in esempi pratici, è necessaria una brevissima introduzione sulle due proprietà fondamentali che useremo in questa parte della guida.

La proprietà float (vedi l’esposizione e gli esempi dalla Guida ai CSS di HTML.it) rende un elemento “fluttuante” a destra o a sinistra (right o left) del suo contenitore. Gli elementi adiacenti vengono affiancati sul suo lato libero e continuano disponendosi sotto. Gli elementi float, a differenza degli elementi posizionati, non vengono rimossi dal flusso della pagina, ma solo traslati.

La proprietà clear consente di impedire ad un elemento di avere elementi float su uno o entrambi i lati. I possibili valori sono right, left o both. La proprietà clear è spesso molto utile per controllare la disposizione degli elementi adiacenti ad elementi float. Il suo uso, spesso necessario in un layout che usa float, può purtroppo avere effetti non desiderati.

Per esempio, su un layout a tre colonne con il float, un clear:both applicato ad un qualsiasi elemento nella colonna centrale fa sì che questo si disponga verticalmente al di sotto delle due colonne laterali. Spesso, ma non sempre, si può ricorrere a soluzioni che non usano il clear: in caso contrario, e per avere meno limiti sull’impaginazione dei contenuti, il mio consiglio è di usare layout con posizionamenti assoluti per layout a tre colonne se prevediamo di usare la proprietà clear sulla colonna centrale. È anche ipotizzabile un layout a tre colonne combinato, in cui la colonna extra è float e quella di navigazione è posizionata assolutamente. Questo avrebbe due vantaggi significativi: nessun vincolo di lunghezza tra la colonna centrale e quella extra e la possibilità di usare il clear da un lato sulla colonna centrale.

Per i layout a due colonne il discorso è un po’ più semplice. Generalmente gli elementi come le immagini nella sezione dei contenuti vengono resi float a sinistra. Definire la colonna di navigazione fluttuante a destra ci consente di usare il clear:left per la sezione principale senza avere interferenze di layout con la colonna di navigazione.