CSS, jQuery, Webdesign

Colonne adattabili a layout liquido con CSS e jQuery

smart-columns.jpg

Twittando mi sono ritrovato a leggere un post che analizzava il problema di avere un layout costituito da colonne “liquid” adattabile alle dimensioni della finestra del browser.

In un layout fisso imposteremo una dimensione fissa per ogni colonna, occuperemo tutta la larghezza della pagina; ma ad un certo limite, l’ultima colonna non sarà in grado di adattarsi allo spazio rimanente, andando a capo lascierà un margine di spazio vuoto.

fixedsample.gif

Invece, in un layout liquido le colonne riempiranno perfettamente l’intero spazio della pagina in qualsiasi caso, ma ci troveremo ad avere un numero predefinito di colonne su singola riga.

liquidsample.gif

La soluzione trovata dall’autore è stata quella di unire insieme le caratteristiche dei due loyout tramite l’utilizzo di CSS e jQuery.

Abbiamo un codice html di base per l’esempio:

Codice CSS del foglio di stile collegato all’esempio:

diamo dimensione 100% al layout per coprire l’intero spazio della pagina, mentre una dimensione fissa predefinita per le colonne in modo da risolvere il secondo dei due problemi descritti: in caso di colonne liquidi avremo un numero predefinito su singola riga.

Ecco lo script jQuery che risolve il primo dei problemi:

Come realizza il tutto è descritto nei commenti dello script.

You might also like

  • doc

    Ciao,
    e’ normale che cliccando sul demo ci sia un redirect verso un sito che non c’entra niente?
    dai un okkio

    18 dicembre 2009
    • Grazie della segnalazione, l’autore avrà tolto il sito e venduto il dominio.

      18 dicembre 2009

LEAVE A REPLY