CSS  »  Articoli  »  Effetti con CSS 

È una tendenza ormai piuttosto diffusa su alcuni siti, e in particolare blog, avere una sezione di link a fondo pagina decisamente corposa. Il trend, divenuto popolare circa un anno fa, è avere una sorta di super-footer suddiviso su più colonne, che possa costituire una navigazione supplementare e raccogliere link ad archivi, risorse e altro.

In questo articolo vedremo alcune soluzioni per avere liste ed elementi di lista su più colonne, attraverso quattro esempi che potranno costituire una buona base di partenza anche per i footer. Cominciamo subito.

List-item su più colonne

Siamo pronti a presentare il primo esempio in cui una lista non ordinata, con id="multi" è stata suddivisa su tre colonne, rendendo float i suoi list-item.

Procediamo con il CSS. Per prima cosa vengono eliminati margini, padding e bullet da lista e list-item. La lista avrà una largezza del 100% e overflow:hidden per contenere i list-item, grazie alla easy clearing of floats di cui abbiamo parlato nell'articolo Float teoria e pratica.

I list-item infine verranno resi float con una larghezza del 32% e un margine sinistro dell'1%. Per evitare un bug di IE6 che raddoppia il margine concorde con il lato del float, ovvero il double margin bug citato nell'articolo sulla Risoluzione dei problemi di CSS, basta dichiararli display:inline. Ecco quindi le tre regole chiave dell'esempio per intero:

Altri articoli

Altre guide

Altre newsletter