Un trucco CSS per le liste e il float | Usabile.it

Usabile.it

usabilità, accessibilità e interaction-design per il web

Home » Blog » Un trucco CSS per le liste e il float

9/02/2010

Un trucco CSS per le liste e il float

[di Maurizio Boscarol]

elenco sovrapposto a un'immagineI 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…

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.

Tag:

Iscriviti alla newsletter di usabile.it:

Circa una mail al mese con gli aggiornamenti più significativi.

Commenta

  1. Andrea Leti - 12 febbraio 2010, 12:12.

    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. Maurizio Boscarol - 13 febbraio 2010, 10:48.

    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. Steve - 13 febbraio 2010, 11:34.

    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!

  4. Vittorio - 14 febbraio 2010, 22:23.

    Ottima soluzione
    Grazie


 

torna su Torna su

Privacy Policy