- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Allineamento immagini
-
Allineamento immagini
Ciao a tutti,
premettendo che smanetto bene con i fogli di stile, ho sempre avuto un problema con le immagine, che finora ho potuto by-passare in vario modo...ma ora devo necessariamente risolverlo. Per questo chiedo aiuto a che ne sa di +Intando qua potete vedere uno screenshot che raffigura il mio problema www.itkronos.com/esempio.png
Praticamente...ho un elenco di questo tipo (con le immagine allineate a sinistra col float:
<ul> <li>img+testo</li> <li>img+testo</li> <li>img+testo</li> <li>.............</li> </ul>
Come potete notare nello screenshot, se il testo che affianca l'immagine è abbastanza lungo rispetto all'immagine la lista si formatta bene, ma se invece il testo non è abbastanza lungo da "avvolgere" l'immagine l'elenco che segue si posiziona male.
Ho provato con le liste, con i div, con i paragrafi...ma il risultato è sempre lo stesso!! :bho:
Tra l'altro non posso nemmeno fissare a priori un altezza della singola lista <li> poichè sono gli utenti che la creano, x cui non conosco la dimensione dell'immagine che potrebbero caricare!!
Se qualcuno ha una soluzione mi aiuti!! Grazie
-
Ciao,
penso che il problema sia dovuto al float sulle immagini,
prova a eliminare l'effetto del float con un clear dopo ogni <li>
potresti fare così:<ul> <li style="clear:both">img-testo</li> </ul>
oppure se non hai problemi ad inserire un <br> alla fine del testo:
<ul> <li>img-testo <br style="clear:both" /> </li> </ul>
quest'ultimo metodo dovrebbe funzionare meglio.
-
Ciao MrEolo...avevo già provato le soluzioni da proposte, ma il risultato non cambia! O meglio...risolve solo il problema di mettere correttamente una sotto l'altra le immagini, ma non mi renda la giusta formattazione. Vedi esempio qua www.itkronos.com/soluzione_1.png.
Le linee tratteggiate sono il bordo inferiore della lista <li> e come puoi notare se il testo che affianca l'immagine non è abbastanza lungo l'immagine "va fuori" dalla lista in cui dovrebbe stare.
Altre soluzioni?
-
@freesurf said:
Ciao MrEolo...avevo già provato le soluzioni da proposte, ma il risultato non cambia! O meglio...risolve solo il problema di mettere correttamente una sotto l'altra le immagini, ma non mi renda la giusta formattazione. Vedi esempio qua www.itkronos.com/soluzione_1.png.
Le linee tratteggiate sono il bordo inferiore della lista <li> e come puoi notare se il testo che affianca l'immagine non è abbastanza lungo l'immagine "va fuori" dalla lista in cui dovrebbe stare.
Altre soluzioni?
Il testo della lista sta dentro un elemento di blocco tipo <p>?E' strano perchè sembra un problema di floating.... dovresti risolvere con un clear:both come ha suggerito MrEolo, però non l'ho mai visto applicare ad un <br />. Hai provato a mettere invece un div vuoto? <div style="clear:both"></div>
-
ciao Laburno,
l'annidamento che ho è di questo tipo:<div> <ul> <li>img+testo</li> <br clear="all"> <li>img+testo</li> <br clear="all"> ecc.... </ul> </div>
Proverò anche la tua soluzione e vi farò sapere!!
-
@freesurf said:
ciao Laburno,
l'annidamento che ho è di questo tipo:> <div> <ul> <li>img+testo</li> <br clear="all"> <li>img+testo</li> <br clear="all"> ecc.... </ul> </div> >```Proverò anche la tua soluzione e vi farò sapere!! :? Non mi sembra corretto mettere il <br> tra un li e l'altro. Dovresti provare quanto meno così:
<ul>
<li> img+testo
<br clear="both" />
</li>
</ul>
-
Forse avrai già risolto, in tal caso, magari posta la soluzione.
Mi chiedevo se il problema lo hai sia con internet explorer che con firefox ?!?Buon lavoro
-
Vi chiedo scusa per il ritardo nella risposta ma sono stato fuori sede per un pò. Allora in ordine:
@micmilk said:
Mi chiedevo se il problema lo hai sia con internet explorer che con firefox ?!?
Il problema esiste sia con IE che con FF
@Laburno said:
Non mi sembra corretto mettere il <br> tra un li e l'altro. Dovresti provare quanto meno così:
> <ul> <li> img+testo <br clear="both" /> </li> </ul> >``` Negativo!! Anche mettendo il <br> all'interno dei <li> il problema persiste **Invece ho provato con la soluzione del div vuoto è funziona ;) ... Non so quanto questa soluzione possa essere W3C-friendly in termini di validazione del codice...ma intando è un passo avanti!!** **Dunque..questo è il codice funzionante:**
<ul>
<li>img+testo</li>
<div style="clear:both"></div>
</ul>Grazie a tutti per l'aiuto!!
-
Ottimo così abbiamo appurato che col <br /> giustamente non funziona.
Per quanto riguarda la validità del codice non mi sembra ci sia nulla di scorretto, ma possiamo toglierci ogni dubbio facendo il test