Problema HTML inserimento immagini

[Katherine]

Ciao a tutti amici, ho un sito in wordpress e sto risistemando la pagina affiliati.

Il problema è il seguente: al momento di inserire la seconda riga di banner, il primo di questa appare spostato verso destra e non all'inizio della riga. Mi scuso se non sono chiara, ma comunque potete vedere un esempio qui:

w w w. vampirediaries-love.net/prova/

A me il codice HTML sembra corretto ma non sono un'esperta:

<a href="http://www.spoilerati.com/"><img class="size-full wp-image-1306 alignleft" title="100x35" src="http://www.vampirediaries-love.net/blog/wp-content/uploads/2010/07/100x35.gif" alt="" width="100" height="35" /></a><a href="http://www.telefilmaddicted.com/"><img class="alignleft" src="http://i39.tinypic.com/14aab7q.png" alt="Telefilm Addicted" width="100" height="35" /></a><a href="http://www.chuckitalia.com/"></a><img class="alignleft" src="http://www.chuckitalia.com/bannerini/chuck3.jpg" alt="Chuck Italia" width="102" height="37" /><a href="http://www.othravens.com/"><img class="alignleft" src="http://www.othravens.com/upload/images/banner_othravens/othravens_03.jpg" alt="" width="100" height="35" /></a><a href="http://telefilmitalia.altervista.org"><img class="alignleft" src="http://telefilmitalia.altervista.org/bannerino1.jpg" alt="" width="100" height="35" /></a>

<a href="http://www.smallvillegreenside.com"><img class="alignleft" src="http://www.smallvillegreenside.com/upload/images/banner_svgs/svgs03.jpg" alt="" width="100" height="35" /></a>

Grazie

[vnotarfrancesco]

Ho visto ma non ne vengo a capo Katherine, altri però magari troveranno subito la soluzione.
Subito dopo l'inizio del paragrafo, qui

<p><br /><a href="http://www.smallvillegreenside.com"><img class="alignleft" src="http://www.smallvillegreenside.com/upload/images/banner_svgs/svgs03.jpg" alt="svgs03 prova" width="100" height="35" title="prova" /></a></p>

Prova ad aggiungere un line break <br />


Valerio Notarfrancesco

[Katherine]

Ho provato ma nulla, non ne vengo a capo neanche io

[vnotarfrancesco]

Così?



Con Chrome, Safari e Firefox si allinea a sinistra con quel line break (che però non è una soluzione elegante).
L'ho inserito qui:

</a></p>
<p><br /><a href="http://www.smallvillegreenside.com"><img class="alignleft" src="http://www.smallvillegreenside.com/upload/images/banner_svgs/svgs03.jpg" alt="svgs03 prova" width="100" height="35" title="prova" /></a></p>
<!-- PHP 5.x --> <div class="clear"></div>
</div>

</div>

</div>

Valerio Notarfrancesco

[Prill]

Ciao, sembra un float che resta attivo, in effetti il float è sulle immagini con classe alignleft. Aggiungendo un clear sul secondo paragrafo

<p style="clear:both"><a  href="..."><img class="alignleft"  src=".../upload/images/banner_svgs/svgs03.jpg"  alt="svgs03 prova" width="100" height="35" title="prova"  /></a></p>

dovrebbe tornare a posto

[Katherine]

Grazie ho risolto!

[Katherine]

Riapro la discussione perchè ho cambiato tema e mi ha sballato tutto...Infatti tutto quello che c'è dopo il <p style="clear:both"> finisce in fondo alla pagina come potete vedere qui.
vampirediaries-love.net/contatti-e-affiliati/link-us/

Se lo tolgo invece questo è il risultato:



Io ho bisogno di creare righe di banner, non mi sembra una cosa difficile eppure non ci rischio perchè c'è quel banner fuori posto. E se all'immagine numero quattro provo a mettere come allineamento Nessuno gli altri banner finiscono in fondo alla pagina. Avete qualche idea? Grazie

[Prill]

Io rivedrei il tutto creando un div per i banner e impostando il float sui link:

css

.banner a {
    display:block;
    float:left;
    width:100px;
    height:40px; /* altezza e larghezza da impostare in base alle dimensioni del banner più grande */
    text-align:center;
    padding:5px; /*  da modificare a proprio piacimento per distanziare le immagini */
}
.banner a img {
    border:0;
}

html

<div class="banner">
   <a href="#" title=""><img src="100x35.gif" alt="" height="35" width="100" /></a>
   <a href="#" title=""><img src="14aab7q.png" alt="" height="35" width="100" /></a>
   <a href="#" title=""><img src="chuck3.jpg" alt="" height="37" width="102" /></a>
   <a href="#" title=""><img src="othravens_03.jpg" alt="" height="35" width="100" /></a>
   <a href="#" title=""><img src="svgs03.jpg" alt="" height="35" width="100" /></a>
   <a href="#" title=""><img src="buttonOPW100_4.jpg" alt=""  height="35" width="100" /></a>
   <a href="#" title=""><img src="banner_8.jpg" alt="" height="40" width="100" /></a>
   <a href="#" title=""><img src="1291133453.gif" alt="" height="31" width="88" /></a>
   <a href="#" title=""><img src="bannerino1.jpg" alt="" height="35" width="100" /></a>
</div>

[Katherine]

Potrebbe essere una soluzione.
Altrimenti ho visto che se inserisco:

codice prima riga di banner
<br>
</br>
codice seconda riga di banner

e così via, creo delle righe separate e sembro ovviare al problema. Qual'è la soluzione migliore secondo voi?

Grazie

[Prill]

Le immagini hanno larghezze diverse, che variano dagli 88 ai 102 pixel (non avevo in realtà visto quella da 102 e perciò avevo indicato per il link una larghezza di 100), fissare le dimensioni dell'elemento contenitore (il tag "a") permette di averle sempre allineate correttamente.
Del resto, se non interessa un allineamento preciso, e si vogliono solo delle immagini affiancate, non è neanche indispensabile il float della classe alignleft: le immagini - che sono elementi in linea, quindi naturalmente poste l'una accanto all'altra -, possono essere distanziate attraverso margini o padding e le diverse righe che le contengono scandite da paragrafi diversi o anche da interruzioni col br, il che comporta però codice di marcatura ulteriore.