di: Alessandro Fulciniti 05 Dicembre 2006
È 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.
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:
ul#multi,ul#multi li{margin:0;padding:0;list-style:none}
ul#multi{width: 100%;overflow: hidden;
padding: 1em 0;margin:4em 0;
line-height: 1.8;
background: #424252;color: #E6F5FC}
ul#multi li{float: left;width: 32%;
margin-left: 1%;display: inline;
border-bottom:1px dotted #777}
Responsive Desing, la guidaProgettare siti da fruire su dispositivi diversi è imprescindibile... |
Guida CSS3Scoprire e usare al meglio tutte le novità dell'ultima versione dei... |
Guida CSS Tecniche essenzialiTesto, immagini, layout, form, liste, tabelle: soluzioni pronte per... |
Ogni mercoledì, direttamente nella tua e-mail: guide, articoli, tutorial, FAQ e approfondimenti tecnici su CSS e Web Design.
Iscriviti alla newsletter
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |