impaginazione tipo tabella

[Guglie]

vorrei poter impaginare dei contenitori nel modo seguente:
[list=1][*] il codice html è uguale per tutti i contenitori e l'impaginezione avviene solo tramite CSS[*] quando la pagina e' completa inizia automaticamente una nuova linea (con float:left funziona)[*] in ogni contenitore ci sono due sotto-contenitori contenenti titolo e immagine, e vorrei che ogni "riga della tabella" fosse allineata rispetto all top dell'immagine (nessuna idea di come fare senza introdurre un contenitore orizzontale per ogni linea, cosa che non soddisferebbe il punto 1.)[/list=1]
un esempio perche' non so se quanto scritto sopra si capisca:

               titolo
   titolo      lungo       titolo
  --------------------------------   
  immagine      im        immagine
  immagine      ma        immagine
                gi
                ne
                
   titolo      titolo      titolo
  -------------------------------   
  immagine    immagine    immagine

idee.. :master:

[manurat]

non so se quanto scritto sopra si capisca:

infatti io non ci riesco tanto...

ogni "riga della tabella" fosse allineata rispetto all top dell'immagine

dovresti spiegare un pò più chiaramente cosa intendi, forse allineare, affiancandoli, il titolo con il margine superiore dell'immagine?

[Guglie]

guarda, a parole e' un po' ostico da spiegare. rifacendomi allo schemino del post precedente, utilizzando

<div class="contenitore">
  <div class="titolo">titolo</div>
  [img]asd.jpg[/img]
</div>

<div class="contenitore">
  <div class="titolo">titolo</div>
  [img]asd.jpg[/img]
</div>

<div class="contenitore">
  <div class="titolo">titolo</div>
  [img]asd.jpg[/img]
</div>

ecc.

con

div.contenitore {
  float: left;
}

il risultato e':

   titolo      titolo      titolo
  --------     lungo      --------   
  immagine     ------     immagine
  immagine      im        immagine
                ma
                gi
                ne
                  
                       titolo  
                      --------- 
                      immagine   
  
   titolo      titolo
  ---------------------  
  immagine    immagine

questo perche' float:left spara tutti i contenitori a sinistra, e quando come in quest'esempio il secondo della prima riga e' piu' lungo rispetto agli altri, il primo della seconda riga gli si allinea di fianco. l'idea sarebbe invece di ottenere il layout che ho schizzato nel primo post.

[manurat]

Ora è più chiaro!
Dunque, per fare questo, senza inserire contenitori orizzontali, dovresti sapere, in base alla larghezza della pagina e dei singoli div, quale sarà il primo div di ogni nuova "riga"; se ad es.la tua pagina avrà larghezza 1000px e ogni div sarà largo 250px, allora in ogni riga ci staranno quattro div, pertanto i div chiamiamoli "di apertura" delle righe saranno il quinto, il nono, il tredicesimo etc... A questi div dovrai quindi dare la proprietà "clear: left" per pulire l'effetto del float precedente e allineare così i div successivi di quella riga..dovrebbe funzionare su tutti i browser..

[Guglie]

si, ma come detto nel punto 1) il codice html deve essere _identico_ per tutti i contenitori. l'html viene generato da un programma in C e l'idea era di modificare il layout solamente tramite i CSS, evitando cosi' di dover modificarne il codice del programma.

[uffissimo]

ad ogni fine riga dovresti aggiungere un div vuoto il cui css "chiude" (figurativamente) la riga, sistemando lo "stravolgimento" che dai alla pagina con float:left...

in buone parole a fine riga aggiungi:

<div cass="endfloat"></div>

il cui css è:

endfloat { clear: both; }

prova

[Guglie]

up, ribadisco che "clear" funzionerebbe, ma che non posso usarlo, perché il codice html deve essere lo stesso per tutti i contenitori.

[uffissimo]

allora per evitare:

   titolo      titolo      titolo
  ------     lungo      ------   
               ------

e fare:

               titolo      
      titolo   lungo     titolo  
      -----   ------    -----

basta dare alla classe "titolo" un'altezza fissa:

.titolo { heigt:100px; 	vertical-align: bottom; }

se poi hai sempre lo stesso ingombro verticale... dovresti riuscire a risolvere anche gli altri problemi dando alla classe "contenitore" un'altezza fissa.

[Guglie]

Originariamente inviato da uffissimo
basta dare alla classe "titolo" un'altezza fissa:
se poi hai sempre lo stesso ingombro verticale... dovresti riuscire a risolvere anche gli altri problemi dando alla classe "contenitore" un'altezza fissa.

per il titolo è una buona idea! per il contenitore preferirei evitare, perché la maggior parte delle fotografie sono orizzontali, e dandogli come altezza quella di una foto verticale sprecherei un sacco di spazio e l'impaginazione risulterebbe bruttina..

grazie comunque!

[uffissimo]

mi dispiace ma non mi viene in mente altro...