CSS  »  Articoli  »  CSS Template e layout 

Questa è la traduzione dell'articolo Absolute Columns di Dan Rubin pubblicato originariamente su 24 Ways il 22 dicembre 2008.

I layout con i CSS hanno fatto tanta strada a partire dell'età buia del web publishing, con ogni sorta di applicazione creativa dei float, dei margini negativi e persino delle immagini di sfondo usate per farci realizzare il blocco di base di ogni layout, la colonna. Come si può intuire dal titolo di questo articolo, andremo a discutere di colonne. Per essere più precisi, parleremo di una piccola applicazione del posizionamento assoluto che può essere quello di cui avete esattamente bisogno in certe situazioni.

Se sviluppate siti web da un bel po' di tempo, potreste conoscere questa piccola favola per bambini raccontata da un vecchio monaco Shaolin che sedeva sulla vetta del monte Geocities: "Una volta, le colonne multiple di eguale altezza potevano essere facilmente create usando le tabelle". Ora, sebbene tutti noi siamo comodamente seduti sul treno degli standard, bisogna ammettere che implementare questo particolare dettaglio è ancora fonte di tanti problemi e grattacapi se confrontato con la facilità di implementazione dello stesso effetto con le tabelle.

Soluzioni creative come le false colonne di Dan Cederholm fanno un ottimo lavoro nel far sì che due colonne adiacenti sembrino mantenere la stessa altezza man mano che il contenuto al loro interno si espande. Ciò avviene usando un'immagine di sfondo che va a riempire lo spazio che le colonne non possono riempire.

Ora, il Sacro Graal rappresentato dal far sì che le colonne con i CSS si comportino allo stesso modo delle celle di una tabella o, per meglio dire, come colonne di tabelle, non lo abbiamo ancora trovato (certo, c'è il modulo per le colonne multiple dei CSS3...), ma certe volte potreste avere semplicemente bisogno, per esempio, di una colonna secondaria (diciamo una barra laterale) che corrisponda all'altezza della colonna primaria, senza ricorrere alla creazione di immagini. Ecco in che cosa può esservi utile un pizzico di posizionamento assoluto per farvi risparmiare tempo e ottenere un layout un po' più flessibile.

Avete probabilmente familiarità con il concetto di rendere relativo ciò che è assoluto (Making the Absolute, Relative) elaborato tempo fa da Doug Bowman, ma riassumiamolo rapidamente: un elemento per cui si imposti position:absolute posizionerà se stesso relativamente rispetto al suo elemento antenato più prossimo per cui si sia impostata position:relative piuttosto che rispetto alla finestra del browser (figura 1):

Figura 1 - Schema del comportamento del posizionamento assoluto

Tuttavia, quello che potreste non sapere è che è che possiamo agganciare più di due lati di un elemento posizionato assolutamente. Sì, è giusto, tutti e quattro i lati (top, right, bottom e left) possono essere impostati, sebbene in questo esempio adotteremo la soluzione solo su tre lati. Si veda la figura 2 per il risultato:

Figura 2 - Schema di layout

Altri articoli

Altre guide

Altre newsletter