Allineamento immagini

freesurf

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

mreolo

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.

freesurf

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?

laburno

@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>

freesurf

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!!

laburno

@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>

micmilk

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

freesurf

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!!

laburno

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