Un trucco CSS per le liste e il float

I CSS hanno chiari limiti di impaginazione, che in parte potrebbero venir risolti da CSS3. La scomparsa di Explorer 5 dalle statistiche aiuta un po’ a trovare soluzioni, ma capita a volte qualche situazione particolarmente fastidiosa. Un caso raro ma non troppo è quando si ha necessità di affiancare un elenco (puntato o numerato) ad un’immagine. Se si applica il float all’immagine e la lista ha, come di solito accade, la proprietà list-style-position:outside, il risultato è che i puntatori dell’elenco si sovrappongono all’immagine.

Un effetto assai poco gradevole:

elenco sovrapposto a un'immagine
I puntatori dell’elenco si sovrappongono all’immagine. Vedi l’esempio completo.

Non ci sono molte soluzioni. Quella più robusta pare essere la seguente: assegnare alla lista un overflow:hidden e, contemporaneamente, un padding-left sufficiente a spostare in là di quanto basta i puntatori.

esempio di lista corretta con puntatori non sovrapposti all'immagine
Esempio corretto. Vedi il codice completo

Controindicazioni: se la lista è più lunga dell’immagine, gli ultimi elementi dell’elenco non seguiranno il float.

Effetto collaterale della soluzione proposta
Esempio dell’effetto collaterale di questa soluzione. Vedi il codice completo.

Gli esempi linkati aiuteranno a capire. A voi la scelta: dipende anche dal vostro layout, dalla lunghezza dell’elenco e dalle dimensioni dell’immagine. Ma almeno è un trucco legale, per sintassi e logica (e se qualcuno trova soluzioni nuove, le segnali!).

PS: Qualcuno segnala che per attivare haslayout su IE6 è necessario usare qualcosa come zoom:1 o altre proprietà che abbiano lo stesso effetto, ma nei miei test questo non si è rivelato necessario. Tenetelo presente in caso notaste problemi con quel browser.

4 thoughts on “Un trucco CSS per le liste e il float

  1. Ottimo articolo…in questi casi mi è capitato di mettere solo un margine destro all’immagine.

    Pero questa soluzione la vedo assai più professionale..
    Complimenti.

    C‘è sempre da imparare.

  2. Grazie Andrea. Neanche questa è una soluzione a impatto zero. Ma almeno ci offre una possibilità in più: a volte può bastare aumentare il margine destro dell’immagine, come suggerisci tu, altre volte può esser meglio questo sistema. L’importante è avere soluzioni flessibili per casi diversi. Ciao!

  3. Si, in effetti anche io ho sempre risolto (le poche volte che mi è capitata questa situazione) con maggior margine destro all’img.

    Però buono a sapersi anche questa.

    Grazie!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.