È 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:
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}
Da testo a link su più colonne
Nel secondo esempio rispetto al
primo ci sono alcune aggiunte: nel markup infatti ora ciascun list-item
contiene un link, e nel CSS viene gestito il loro rollover e aggiunto
un bullet grafico. L'approccio di base è praticamente identico a quello già
visto nel primo esempio: in più, ovviamente, ci sono gli stili sui
link. Da evidenziare che si è dovuto usare un piccolo workaround,
ovvero una variante semplificata dell'Holly Hack di cui ho parlato
in Box Model
e Workaround, per far sì che i link siano attivatibili a tutto campo
su Internet Explorer. Vediamo il CSS dell'esempio per intero:
ul#multi,ul#multi li{margin:0;padding:0;list-style:none}
ul#multi{width: 100%;overflow: hidden; /* simple clearing of floats */
padding: 1em 0;margin: 4em 0;
line-height: 1.8;
background: #424252}
ul#multi li{float:left;width:32%;
margin-left: 1%;display: inline; /* per evitare il float double margin bug di IE*/
border-bottom:1px dotted #777}
ul#multi a{display:block;color: #E6F5FC;
height: auto !important;height: 1%; /*holly hack semplificato per IE*/
text-decoration:none;padding-left:16px;
background: transparent url(green_arrow.gif) no-repeat center left}
ul#multi a:hover{background-color: #393947;color:#FFF}
Il concetto ovviamente si può estendere anche a due, quattro o più colonne: basterà aver cura che somma di larghezze
e margini sia un po' meno del 100%: in alcuni casi un totale pari al 100% esatto, per questioni di arrotondamento, può
dare problemi di resa su qualsiasi browser.
Tre liste su tre colonne
Con il terzo esempio arriviamo all'esempio chiave dell'articolo.
In questo caso infatti, ad essere suddivise su più colonne, sono le liste e non i list-item. Diamo
uno sguardo al markup:
<div id="multi">
<div>
<h3>Risorse</h3>
<ul>
<!-- lista di link per le risorse -->
</ul>
</div>
<div>
<h3>Link</h3>
<ul>
<!-- lista di link per i link esterni -->
</ul>
</div>
<div>
<h3>Blogroll</h3>
<ul>
<!-- lista di link per il blogroll -->
</ul>
</div>
</div>
Da notare come nel codice HTML dell'esempio ogni lista è anticipata da un titolo,
e liste e titolo sono racchiusi all'interno di un div
e i tre div a sono a loro volta contenuti da un div generico con id="multi".
In questo caso si tratta quindi di rendere float i div interni, e non più
i list-item o le liste. Il CSS dell'esempio,
anche se piuttosto corposo, è semplice e raccoglie buona parte dei concetti e
tecniche che abbiamo già visto nei due esempi precedenti. Eccolo per intero:
div#multi ul,div#multi li{margin:0;padding:0;list-style:none}
div#multi{width: 100%;overflow: hidden; /* simple clearing of floats */
padding: 1em 0;margin:4em 0;
line-height: 1.8;
background: #424252}
div#multi h3{font:180% "Trebuchet MS",Arial,sans-serif;
margin: 0.1em 0;color:#208BE1;
border-bottom:1px dotted #777}
div#multi ul,div#multi li{margin:0;padding:0;list-style:none}
div#multi div{float:left;width:32%;
margin-left: 1%;display:inline; /* per evitare il float double margin bug di IE*/
}
div#multi li{border-bottom:1px dotted #777}
div#multi a{display:block;color: #E6F5FC;
height: auto !important;height: 1%; /*holly hack semplificato per IE*/
text-decoration:none;padding-left:12px;
background: transparent url(heart.gif) no-repeat center left}
div#multi a:hover{background-color: #393947;color:#FFF}
Liste su quattro colonne
In chiusura, vediamo ancora come sia possibile modificare l'esempio appena visto
per contenere in realtà quattro liste di link: ecco quindi il quarto esempio.
Rispetto all'esempio precedente, è bastato cambiare le percentuali di larghezza e margini
dei div interni.
Conclusioni
In questo appuntamento abbiamo visto come sia possibile overe list-item e liste su
più colonne grazie ad un markup leggero e un CSS tutto sommato semplice e robusto.
Sono diversi i concetti, le tecniche e i workaround di cui ci siamo serviti, ma
la compatibilità dei risultati è decisamente buona: sono stati testati con successo
su Internet Explorer dalla versione 5 alla 7 e sulle versioni recenti di Opera, Firefox
e Safari.
Due piccole annotazioni: negli esempi ho usato gli id, ma
ovviamente se ci fosse la necessità di avere diversi elementi di questo tipo in una
pagina, andrebbero usate le classi, dato che ci può essere un'unico
id in una pagina HMTL. Per quanto riguarda il bullet, ovvero il marcatore grafico:
gli esempi sono stati pensati per contenere list-item o link di una riga al massimo.
Se ciò dovesse essere una limitazione troppo grande, alcune soluzioni facilmente
applicabili si possono trovare nell'articolo Liste
con marcatori perfetti.
Codice, immagini ed esempi sono disponibili per il download. Alla prossima.
