Telefono: +39 392 33 73 731

Fix immagine in float left con lista

Questo problema di visualizzazione è molto diffuso, succede quando abbiamo una immagine con proprietà float:left, ed il contenuto testuale che scorre sulla destra. Se abbiamo una lista succede un inconveniente: i simboli volgarmente chiamati "pallini" degli elementi <li> restano sulla sinistra, invisibili perché posizionati al di sotto dell'immagine.

Per risolvere questo guaio possiamo agire aumentando il margine dei <li> conoscendo la grandezza dell'immagine, ma è un rattoppo fatto male. Che cosa succede se non sappiamo la grandezza dell'immagine? oppure se il sito è dinamico e l'immagine non possiamo conoscerla a priori? Serve un fix valido per tutte le evenienze.

Abbiamo dunque tre strade fattibili, il primo codice sarebbe questo:

li {
	list-style-position: inside 
}

I pallini si allineano certamente nel modo corretto, ma questo codice ha un effetto collaterale: poiché i simboli ora sono considerati interni al contenuto, il testo se va a capo si posiziona sotto al pallino, e non va allineato al testo superiore come vorremmo. Questo codice funziona solo se i contenuti dei <li> non vanno mai a capo.

Quindi potremmo usare questo secondo codice:

li{
	position: relative;
	left: 1em;
}

Questo CSS è già migliore, i pallini escono, ed il testo si posiziona correttamente se va a capo. Però anche in questo caso abbiamo un effetto collaterale, o meglio un limite: spesso per motivi di design invece dei pallini predefiniti noi usiamo dei simboli personalizzati, che sono ottenuti usando delle immaginette messe come background del <li> e poi aggiungiamo un padding sinistro per distanziare il testo. Se usiamo questa tecnica il codice purtroppo non funziona.

In questo caso l'unica tecnica possibile è agire a livello dell'elemento <ul> usando il codice seguente.

ul{
	overflow: hidden; 
}

Questo codice dovrebbe essere definitivo, ed è quello che preferisco.
Però se avete ancora problemi, e non capite come risolvere potete provare quest'ultimo trucco css.

ul {
    list-style: outside disc;
    margin-left: 1em;
}
ul li {
    position: relative;
    left: 1em;
    padding-right: 1em;    
}​
Martedì 05 Febbraio 2013
(0 commenti)
CSS

Aggiungi un commento

Nome
E-mail (non verrà pubblicata)
Sito Web
Commento