galleria immagini + testi

[nabozzz]

Ciao a tutti

ho provato a fare una ricerca, può darsi che sia stato scritto qualcosa a riguardo, ma non ho trovato nulla.

Il problema è il seguente...

ho fatto una galleria con le liste

<ul>[*][img]images/169x113_thumb_01.jpg[/img]
Released on 12/04/2008[*][img]images/169x113_thumb_02.jpg[/img][*][img]images/169x113_thumb_02.jpg[/img][*][img]images/169x113_thumb_02.jpg[/img][*][img]images/169x113_thumb_02.jpg[/img] 

e questo il CSS

ul {
    margin: 0;
    padding: 0;
    list-style: none; 
    height: auto;
    overflow: hidden;
}

li {
    margin: 0;
    padding: 0 5px 10px 20px;
    list-style: none;
    float: left;
    font: 11px/16px Arial;
    color: #333;
}

li img {margin-bottom: 10px; } 

Ora.. il testo sotto alla prima thumb può esserci o non esserci o può essere anche + lungo.
Ci stanno 3 thumb per riga. Dopo la prima riga corretta, nella seconda riga la thumb invece di posizionarsi sotto il testo diciamo che "salta" uno spazio e si allinea con la seconda thumb della prima riga. Io vorrei evitare questi salti e che tutte le thumb fossero allineate a prescindere della lunghezza del testo.

Come posso fare?! :master:

grazie

[paololosco]

dai un'altezza fissa al[*] , dandoti un po' di aria, oltre al quale comunque il testo non potrà essere più lungo.. (es 3 righe max... o vedi tu...)

è il float che ti fa allineare male i li... se uno è più lungo, automaticamente flotta sia quello vicino a lui che quello che dovrebbe stare sotto...


poi, nel codice, non ho capito 2 cose...


height: auto;
overflow: hidden;

(prima gli dai altezza automatica - quindi a seconda dei contenuti...) e poi gli dici che quello che "sborda" non si deve vedere...???

e

font: 11px/16px Arial;

questo lo ignoravo.... sarebbe?

[gengix]

poi, nel codice, non ho capito 2 cose...


height: auto;
overflow: hidden;

(prima gli dai altezza automatica - quindi a seconda dei contenuti...) e poi gli dici che quello che "sborda" non si deve vedere...???

Viene dato per questo motivo:

http://gabrieleromanato.altervista.o...inglayout.html

Se metti un bordo all'ul te ne accorgi. Anche se invece che overflow hidden sarebbe meglio utilizzare altri metodi, visto che quest'ultimo non da layout in browser come IE6 e precedenti.

e

font: 11px/16px Arial;
questo lo ignoravo.... sarebbe?

vuol dire che il font ha una dimensione di 11px e un'interlinea di 16px.
equivalente a :
font-size:11px;
line-height:16px;

Per nabozzz: Potresti allegari un immagine? non ho capito bene quello che intendi.