Domanda su immagine da allineare in HTML.

[Gius01]

Ciao a tutti,

sono nuovo del forum e abbastanza neofita su HTML.
A dire il vero lo ho usato qualche anno fa, ora lo sto riprendendo in mano.
Infatti per dare una mano ad un amico gli ho variato qualche pagina del sito, scritta da altri, senza problemi.
Ho però una cosa su cui sto trovando difficoltà enormi.
Si tratta di caricare un'immagine di fianco ad un testo (img02.jpg).
Di fianco a tale testo c'è già un'altra immagine correttamente allineata a destra (img01.jpg).
Se carico l'immagine img02.jpg, anche usando la stessa class dell'altra immagine img01.jpg il testo si riallinea, ma l'immagine rimane al centro mentre io la vorrei sotto all'altra a destra.
E' stato usato un css per tale pagina.
Posto qui la parte di codice incriminata e una parte del css:

HTML

 <div id="contents">
    <h1>Title</h1>
    [img]imgs/graphics/img01.jpg[/img]
    

Testo1</p>
    

Testo2</p>
    

Testo3</p>
    

Testo4</p>
        [img]imgs/graphics/img02.jpg[/img]
    

Testo5</p>
    <br class="clearfloat" />
  </div>

CSS

  
body{
	text-align: center;
	color: #999;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 14px;
	margin: 0 0 40px 0;
	padding: 0;
	background: #fff url(/images/sfondo1.gif) repeat-y center;
}

#contents{
	width: 809px;
	/*height: 300px;*/
	background: #fbfcf5 url(../imgs/graphics/bg1.gif) no-repeat center bottom;
	border-top: 1px solid #bab096;
	border-bottom: 1px solid #bab096;
	padding: 20px 15px 20px 15px;
}

.clearfloat {
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;

}

.contentsimg {
	float: right;
	margin: 0px 0 20px 40px;
	border: 1px solid #e5dbaf;
}

Grazie mille per l'aiuto.
Ciao!

[Vincent.Zeno]

ciao Gius01, benvenuto sul forum

questa volta ho corretto io...
ricorda che per postare codice sei tenuto, come tutti, ad utilizzare il tag CODE

buon lavoro

[Gius01]

Scusami e grazie mille!
Buon lavoro anche a te!
Ciao.

[NataStanca]

Ciao.
Prova a inserire <br class="clearfloat" /> anche tra testo4 e seconda immagine.

[Gius01]

Ciao,

grazie mille NataStanca!
Solo una cosa, mi sto rendendo conto che dovrò davvero studiare molto perchè altro che ruggine accumulata...
Facendo come hai detto l'immagine si allinea a dovere ma il testo5 mi si stacca parecchio dal testo4 (mentre testo1, testo2, testo3, testo4 ed anche, prima, testo5 erano spaziati da una semplice interlinea.
Come potrei fare per evitare lo stacco, devo dorse agire su un clearfloat diverso e come?
Scusami e grazie mille!
Ciao!

Giuseppe

[NataStanca]

Ciao Giuseppe.
Anche io, se avessi studiato un po' di più, avrei trovato la soluzione un po' più corretta...
Cmq, fammi sapere le dimensioni delle immagini.
Elena

[Gius01]

Ciao Elena,

diciamo che sto riprendendo in mano il tutto, da studiare ne ho eccome, purtroppo su questo aspetto mi sto pedendo, scusa...
Per le dimensioni img01.jpg è 300x300 px, img02.jpg 300x100px
Grazie mille.
Giuseppe

[NataStanca]

Le dimensioni te le avevo chiesto per fare alcune prove. Ho visto che fino ad una certa altezza dell'immagine tutto si allinea... ma lasciamo perdere.
Allora ti consiglierei di creare due div (in questo caso uguali, credo sia ammesso) all'interno di quello principale dividendo gli elementi: uno per la prima img e i 4 paragrafi di testo, l'altro per la seconda img e il resto del testo, seguiti dal clear. Così avrai allineato sia le img che il testo.
Un'altra cosa (a riguardo il css): per dare le stesse regole alle img dentro lo stesso div non occorre attribuire una classe per ogni img, fai una regola unica per il div che le contiene: #div img { ... }

[Gius01]

Ciao,

ti ringrazio per l'assistenza!
Veramente ho fatto delle prove ma il quinto paragrafo di testo continua ad essere staccato dal quarto.
Vabbè dai, non importa, lascio così.
Grazie ancora.
Ciao.