immagine + scritta ripetuta in verticale

[pietro09]

Scrivo per un aiuto, dato che non sono pratico di css.

Debbo mettere una immagine a sinistra, una scritta a destra dell'immagine, e un separatore in basso; questo ripetuto per n volte in verticale.

Ho fatto così:

<div class="progetti">
	<div class="progetto">
		<div>[img]./immagini/ippc.jpg[/img]<span>IPPC-Prevenzione e riduzione integrate dell'inquinamento</span></div>
		<div class="linea"><hr /></div>
	</div>


</div>

e il mio povero css è:

<style type="text/css">
	.progetti
	{
		margin-top:30px;
	}

	.progetti img
	{
		border:none; margin-left: 10px; 	margin-right: 10px;
	}        
	.progetto
	{
		margin-top:30px;
	}
	.progetto span
	{
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 14pt;
		font-weight: 600;
		font-style: normal;
		text-decoration: none;
		word-spacing: normal;
		letter-spacing: normal;
		text-transform: none;

	}
	.linea
	{
		margin-top:4px;	
	}
	.linea hr
	{
		width:80%; text-align:left;
	}
</style>

Mi dareste una mando per razionalizzare il tutto? Ciao

[gengix]

Il div .progetti deve avere una dimensione? o ti va bene che si estenda a tutta pagina?
La scritta a destra come deve essere posizionata rispetto all'immagine ? in alto/mezzo/basso ?
La scritta a destra vuoi che sia un link?

[pietro09]

Il div .progetti deve avere una dimensione? o ti va bene che si estenda a tutta pagina?
Tutta la pagina

La scritta a destra come deve essere posizionata rispetto all'immagine ?
inbasso


La scritta a destra vuoi che sia un link?
sì (immagine + scritta)



ps. Per come l'ho fatto (almeno pe IE7) va. Solo che non mi sembra razionale: non il risultato, ma proprio la scritta dello stile. :master:

[gengix]

Per come l'ho fatto (almeno pe IE7)

Dici bene=) Perchè con firefox il link dell'immagine avendo all'interno anche uno span si estende troppo e crea una sorta di sottolineatura allungata.
Non ho ancora controllato in altri browser.

Se vuoi utilizzare delle unità di misura assolute per il font, il mio consiglio è di utilizzare i pixel per la visualizzazione a schermo e i punti lasciarli per la visualizzazione in stampa.

[pietro09]

ti ringrazio di avermelo fatto notare

ho messo text-decoration: none; e adesso va meglio


Per allineare a sinistra <hr /> ho messo text-align:left;

ma non funziona con firefox (ho dovuto aggiungere <hr align="left"/>


come posso sostituire align="left" con uno stile?

[gengix]

Prova così:

css

	.linea
	{
		margin-top:4px;
		text-align:left;
	}
	.linea hr
	{
		width:80%;
		margin-left:0;
	}

Cmq puoi evitare di mettere l'hr dentro un div, ti va a capo cmq e dichiari le proprietà direttamente all'hr, impostando un margin bottom di 4px al div che lo precede.

[pietro09]

grazie, adesso va con IE7, Opera9 e Firefox2.

Dentro quel div c'era in origine una immagine sfumata sottile; poi l'ho sostituita con <hr e il div l'ho dimenticato.
ciao