CSS Box Model : la gestione del resize

[river79]

ciao a tutti!
innanzitutto ringrazio l'intero forum per l'intero operato, sono stato aiutato molto fino ad oggi.

In questo momento ho un problemone con i box model css.

Mi spiego meglio: sto cercando di realizzare una griglia calendario (con mattoncini div)
7 x 7 (7 i giorni della settimana, 6 le settimane contemplate + 1 di intestazione).
Ma non riesco a trovare la giusta quadra per settare tramite css il loro resize una volta cliccato sul riduci schermo del browser (IE 8).

HO tentato diverse stradre ed ora ho strutturato il tutto in questo modo:

un DIV padre con height e width 100%

la prima riga (intestazione) con <div>Lun</div> etc.. fino al settimo mattoncino per poi fare
<div style="clear: both;"></div> per la gestione del ritorno a capo / nuova riga.

le altre 6 righe con i giorni della settimana sempre con questo sistema di apertura chiusura DIV.

potrei specificare la classe utilizzata ma credo confonderebbe solo il lettore.

I problemi sono sostanzialmente 3

1) la gestione del resize , i mattoncini che hanno float:left vanno a capo disordinatamente se riduco la dimensione.

2) per avere i mattoncini div che occupano tutto lo spazio disponibile ho dovuto per forza ingrandire il blocco con il padding

3) in realtà il tutto è molto piu complesso e all'interno di ogni div vi è un elemento ext:label che una volta valorizzata la sua proprieta html con del testo , sfasa ulteriormente il blocco div che invece dovrebbe essere "blindato" nel suo layout.

Spero di essere stato chiaro, vi ringrazio anticipatamente per il supporto.
Fabio

[Mich_]

Quello che devi fare e` una tabella: infatti in verticale hai i giorni e in orizzontale le settimane: le tabelle sono la soluzione piu` corretta.

Quindi:

<table>
  <caption>Marzo 2011</caption>
  <colgroup>
    ...
  </colgroup>
  <thead>
    <tr>
      <th>Lun</th>
      <th>Mar</th>
      ...
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      ...
    </tr>
    <tr>
      <td>8</td>
      <td>9</td>
      ...
    </tr>
    ...
  </tbody>
</table>

Chiaramente i numeri andranno popolati a seconda del mese (io ho messo dei numeri a caso), quindi andranno probabilmente inseriti da linguaggio lato server (che non e` argomento di questo forum).

[river79]

Ciao, ti ringrazio per la risposta.

Purtroppo la Table non basta, l'intera soluzione deve poi svilupparsi in maniera piu complicata di come l'ho spiegato io.
Ad esempio su ogni cella intercettando un evento (ajax) dovrà comparire una pop-down per inserire degli appunti etc..
Ma tutto questo per me è chiaro.

Non è chiaro come disegnare questi mattoncini div in modo che occupino tutto lo spazio disponibile in altezza e larghezza e si riducano correttamente quando riduco la finestra del browser.

Sto cercando di studiare questi box model , ma per ora non ho ancora trovato una soluzione accettabile.

[Mich_]

Anzitutto tieni presente che software per fare un calendario sul Web ce ne sono di pronti: sicuramente c'e` anche qualcosa open-source o comunque free per applicazioni senza scopo di lucro. Credo che sia piu` semplice adattarne uno pronto che crearlo ex novo.

Comunque in una tabella ci puoi mettere quello che vuoi: e` anche possibile inserire un <div> dentro un <td> (anche se dal punto di vista semantico ha poco senso inserire un contenitore che copre esattamente uno spazio gia` definito da un contenitore).

[river79]

ciao!

Non si tratta di un semplice calendario, l'idea di base è quella ma i concetti sono piu elaborati.
Comunque si avevo preso spunto dalla rete per il calcolo dinamico
dei giorni rispetto al mese selezionato ma per quanto riguarda il layout non ho trovato grande aiuto.

Niente Table con TD e TR con DIV annidati.
Per ora ho un Container Div senza Width & Height (in realtà ho altre mille cose prima di quel container) all'interno viene innescato un js con chiamata ajax per costruire dinamicamente la griglia.
Ora la griglia sono riuscito a comporla di soli mattoncini div ma purtroppo per la gestione del resize non sono riuscito a combinare granchè.
Ho solo calcolato (dopo n tentativi) il width in % necessario per non far sbordare gli n mattoncini per riga . Questo sono riuscito a farlo.
Per quanto riguarda l'altezza invece (di ogni singolo div) ho dovuto arrangiarmi in em, ma ovviamente il risultato non è quello richiesto: se riduco la finestra ho una riduzione per colonna ma non per riga.
Quindi si stringe il valore di width ma si allunga il valore height con la necessità di scrollare il tutto. A oggi non riesco a ridimensionare questa griglia completamente.

Grazie comunque per il supporto fin qui datomi!

Fabio