gestione immagini e didascalie

[SymX]

ciao a tutti,
ho dei problemi per allineare le mie immaginette all'interno di una pagina. Cio' che vorrei ottenere è allineare le immagini una sotto l'altra ma ognuna deve avere la sua didascalia destra che la descrive.......penso che per voi sia semplicissimo.....ma ho avuto problemi tra IE e FF....

[salasir]

E' un po' difficile capire come vuoi che appaiano le immagini senza vedere un esempio o un link alla pagina incriminata.
Posso immaginare una soluzione con le liste di definizione in cui il tag <dt> corrisponde all'immagine ed il tag <dd> alla disascalia.

Guarda questi esempi: Definition lists
in particolare questo: http://www.maxdesign.com.au/presenta...n/dl-event.htm

[SymX]

Originariamente inviato da salasir
E' un po' difficile capire come vuoi che appaiano le immagini senza vedere un esempio o un link alla pagina incriminata.
Posso immaginare una soluzione con le liste di definizione in cui il tag <dt> corrisponde all'immagine ed il tag <dd> alla disascalia.

Guarda questi esempi: Definition lists
in particolare questo: http://www.maxdesign.com.au/presenta...n/dl-event.htm

Esattamente....solo che voglio capire la maniera di allinearli come mi pare...praticamente come nel jpg allegato...
GRAZIE mi stai aiutando..

[salasir]

Per quello che vedo potersti usare qualcosa del genere:
CSS

.split2 { float: left; padding: 0; margin: 0; }
.split2 div{ float: left; width: width: 49%; padding: 0 2%; }
.split2 h3 { background: #00f; font-size: 120%; }

(X)HTML

	<div class="split2">
	   <div>
		[img]tuafoto.jpg[/img]
	   </div>
	   <div>
	     <h3>Titolo</h3>
	     

Testo descrittivo</p>
	   </div>
	</div>

[SymX]

Originariamente inviato da salasir
Per quello che vedo potersti usare qualcosa del genere:
CSS

.split2 { float: left; padding: 0; margin: 0; }
.split2 div{ float: left; width: width: 49%; padding: 0 2%; }
.split2 h3 { background: #00f; font-size: 120%; }

(X)HTML

	<div class="split2">
	   <div>
		[img]tuafoto.jpg[/img]
	   </div>
	   <div>
	     <h3>Titolo</h3>
	     

Testo descrittivo</p>
	   </div>
	</div>

Direi che fa proprio al caso mio... Adesso provo ad implementarlo completamente...

Grazie mille

[SymX]

Originariamente inviato da salasir
Per quello che vedo potersti usare qualcosa del genere:
CSS

.split2 { float: left; padding: 0; margin: 0; }
.split2 div{ float: left; width: width: 49%; padding: 0 2%; }
.split2 h3 { background: #00f; font-size: 120%; }

(X)HTML

	<div class="split2">
	   <div>
		[img]tuafoto.jpg[/img]
	   </div>
	   <div>
	     <h3>Titolo</h3>
	     

Testo descrittivo</p>
	   </div>
	</div>

E' possibile metterle sfalzate come nell'immagine che ti ho mandato senza "sporcare" troppo la css ?

[salasir]

Originariamente inviato da SymX
E' possibile metterle sfalzate come nell'immagine che ti ho mandato senza "sporcare" troppo la css ?

Intendi una a destra e una a sinistra?

[SymX]

Originariamente inviato da salasir
Intendi una a destra e una a sinistra?

esatto.....senza sconvolgere il codice che mi hai dato quindi creare classi su classi per posizionarle tutte.....

[salasir]

Se è solo quello basta invertire il contenuto del <div> + interno e tutto si sistema. Eventualmente si può togliere il float e definire classi specifiche per allineamento dx/sx e aggiungerle dove serve.
CSS

.split2 { float: left; padding: 0; margin: 0; }
.split2 div{ width: width: 49%; padding: 0 2%; }
.split2 h3 { background: #00f; font-size: 120%; }
.sx { float: left; }
.dx { float: right; }

(X)HTML

	<div class="split2">
	   <div class="sx">
		[img]tuafoto.jpg[/img]
	   </div>
	   <div>
	     <h3>Titolo 1</h3>
	     

Testo descrittivo 1</p>
	   </div>
	</div>
	<div class="split2">
	   <div>
	     <h3>Titolo 2</h3>
	     

Testo descrittivo 2</p>
	   </div>
	   <div class="dx">
		[img]tuafoto2.jpg[/img]
	   </div>
	</div>

[SymX]

Originariamente inviato da salasir
Se è solo quello basta invertire il contenuto del <div> + interno e tutto si sistema. Eventualmente si può togliere il float e definire classi specifiche per allineamento dx/sx e aggiungerle dove serve.
CSS

.split2 { float: left; padding: 0; margin: 0; }
.split2 div{ width: width: 49%; padding: 0 2%; }
.split2 h3 { background: #00f; font-size: 120%; }
.sx { float: left; }
.dx { float: right; }

(X)HTML

	<div class="split2">
	   <div class="sx">
		[img]tuafoto.jpg[/img]
	   </div>
	   <div>
	     <h3>Titolo 1</h3>
	     

Testo descrittivo 1</p>
	   </div>
	</div>
	<div class="split2">
	   <div>
	     <h3>Titolo 2</h3>
	     

Testo descrittivo 2</p>
	   </div>
	   <div class="dx">
		[img]tuafoto2.jpg[/img]
	   </div>
	</div>

L'idea mi piace....ottima....peccato che il float va dove gli pare e nel momento in cui ci inserisco le descrizioni un po lunghine si sfalza e mette tutto dove gli pare....ho provato anche a sistemarle meglio dentro altre div ma purtroppo non è precisissimo....