griglia di miniature

[otrebor79]

Ciao a tutti, sto cercando di realizzare una gallery di foto che presenti le miniature "intabellate" nella pagina.

Nel codice html della pagina, le foto sono semplicemente inserite all'interno in una lista non ordinata in questo modo:

<div id="imPage">
 <div id="imContent">
  <ul id="pg">[*]
    [img]photos/gallery1/IMG_2163.jpg[/img]
    <span>didascalia foto IMG_2163</span>
   [*]
    [img]photos/gallery1/IMG_2164.jpg[/img]
    <span>didascalia foto IMG_2164</span>
   
   ...[/list]
 </div>
</div>

e il css relativo invece è il seguente:

#imContent {
	width: 770px;
	}

#pg {
	width: 770px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none; 
}

#pg li {
	position: relative; 
	float: left; 
	width: 144px; 
	margin:0 0 10px 10px;
	padding: 0;
	z-index: 1; 
	opacity: .5; 
}

#pg li img { 
	width: 100%;
	margin: 0;
	padding: 0;
}

#pg li span { 
	width: 100%;
	margin: 0;
	padding: 0;
	color: #000; 
	font-size: 12px;
}

Detto questo, il problema è che non riesco a capire come mai il risultato sia simile a quello mostrato nella seguente immagine:

http://yfrog.com/0iimmagine1bpj

con le immagini che "non vanno a capo" dove dovrebbero.

La cosa ancora più strana è che tale risultato cambia a seconda dell'ordine in cui inserisco le immagini nella lista html.

Sapete spiegarmene ill motivo e darmi una soluzione per risolvere?

Grazie in anticipo,
Otrebor

[ResianTaxidrive]

credo che dipenda dal fatto che i li non hanno un'altezza fissa, quindi se le tue immagini non sono esattamente uguali si verifica un allineamento non corretto. Puoi risolvere mettendo una altezza ai li e dandogli anche overflow:hidden

[otrebor79]

Lo sospettavo, però impostare un'altezza fissa ai li è una pesante limitazione in quanto un'ipotetica (e comunissima) gallery composta da foto in parte "orizzontali" in parte "verticali" mostrerebbe le miniature tagliate o in un senso o nell'altro.

Non esiste un modo per risolvere?

Stavo valutando anche l'ipotesi di adottare per la sola griglia un layout a tabella, che credo risolverebbe la cosa. Pensavo infatti che in un caso come questo, il problema della divisione tra contenuto e presentazione non è praticamente presente, essendo il contenuto costituito dalle sole miniature ed eventualmente da una didascalia.

Può essere una soluzione valida?

[lincon]

prova a dargli un

height:auto

[otrebor79]

Originariamente inviato da lincon
prova a dargli un

height:auto

No, nessun cambiamento. Xò grazie.

[Mich_]

In casi analoghi sono state proposte alcune soluzioni:
- inserimento di un <div> con il clear nel punto in cui il[*] successivo deve andare a capo
- inserimento del clear all'interno del[*] ad ogni quarto elemento.

Sono soluzioni non sempre applicabili, ma nel caso specifico con le larghezze del contenitore e dei[*] fisse si possono usare.

Addirittura con i CSS3 (non riconosciuti da tutti i brwoser ancora) si puo` realizzare una soluzione solo CSS: Le pseudo-classi strutturali

Ad esempio si potrebbe inserire nel CSS:
#pg li:nth-child(4) {
clear: left;
}

In alternativa (riconosciuta da tutti i browser) si puo` inserire una classe ad ogni[*] che va a capo.

[otrebor79]

Originariamente inviato da Mich_
In casi analoghi sono state proposte alcune soluzioni:
- inserimento di un <div> con il clear nel punto in cui il[*] successivo deve andare a capo
- inserimento del clear all'interno del[*] ad ogni quarto elemento.

Sono soluzioni non sempre applicabili, ma nel caso specifico con le larghezze del contenitore e dei[*] fisse si possono usare.

Addirittura con i CSS3 (non riconosciuti da tutti i brwoser ancora) si puo` realizzare una soluzione solo CSS: Le pseudo-classi strutturali

Ad esempio si potrebbe inserire nel CSS:
#pg li:nth-child(4) {
clear: left;
}

In alternativa (riconosciuta da tutti i browser) si puo` inserire una classe ad ogni[*] che va a capo.

Le soluzioni con un "marcatore di fine linea" mi piacciono poco perché limitano fortemente la scalabilità: qualora decidessi che invece di 4 immagini per riga ce ne debbano sare 5 o 3 dovrei andare a modificare il codice o dell'html o (come sarà a breve) della pagina php.

Ottimi consigli comunque.