Layout tableless - il "footer" si comporta male

[LeleFT]

Ciao a tutti.
Mi sto cimentando da poco con i CSS, ma vorrei riuscire a costruire qualcosa di utile.

Sono alle prese con un layout table-less per la visualizzazione di alcune informazioni. Il codice CSS che uso è questo:

.elencoDati {
   position: absolute;
   left: 0px;
   top: 70px;
   width: 90%;
   margin: 10px;
   background-color: #f0f0f0;
   padding: 5px;
   min-width: 800px;
}

.singoloDato {
   position: relative;
   border-width: 1px;
   border-style: solid;
   border-color: #ffffff;
   background-color: #a0a0a0;
   max-height: 200px;
   min-width: 800px;
}

.infoUtente {
   position: absolute;
   top: 0px;
   left: 0px;
   display: block;
   width: 120px;
}

.msgDato {
   position: relative;
   margin: 0 0 0 120px;
   display: block;
   border-left-width: 1px;
   border-left-style: solid;
   border-left-color: #ffffff;

   padding: 5px;
   min-width: 720px;
   overflow: auto;
}

.infoDato {
   display: block;
   border-style: none solid solid solid;
   border-width: 0 1px 1px 1px;
   border-color: #ffffff;
   background-color: #c0c0c0;
   height: 20px;
   margin-bottom: 35px;
}

Tramite questo CSS riesco ad ottenere pressappoco quello che voglio.
Come lo uso... questa è la semantica:

<div id="main_disc" class="elencoDati">

   <div id="disc_1" class="singoloDato">
      <div id="utn_1" class="infoUtente">
         <font face="Verdana" size=3 color="#FFFFFF">Dati 1</font>

         <font face="Verdana" size=2 color="#FFFFFF">Registrati il:
10/09/2007
Alle: 10:52:20</font>

      </div>
      <div id="txt_1" class="msgDato">
         <font face="Verdana" size=3 color="#FFFFFF">
            Descrizione dei dati

            Qui ho pochi dati, l'effetto &egrave; orrendo.
         </font>
      </div>
   </div>
   <div id="inf_1" class="infoDato">
      <font face="Verdana" size=2 color="#FFFFFF">
         Informazioni sui dati
      </font>
   </div>

   ... 
</div>

La classe "singoloDato" mi rappresenta il dato da visualizzare (composto da un "infoUtente" come colonna sinistra e "msgDato" come colonna di destra) e la classe "infoDato" rappresenta il "footer".

Il problema è che se la colonna di sinistra contiene più dati di quella di destra, il "footer" le si sovrappone.

Posto due immagini per rendere l'idea:

Nella sezione "Dati 1" sorge il problema, mentre nella sezione "Dati 2" il problema non si pone poichè la colonna di destra contiene più righe.

Chi sa come risolvere questo problema?

Ciao.

[Mich_]

Ti consiglio di togliere tutti i posizionamenti, ed usare invece i float per posizionare.
Poi ti serve anche il clear: vedi la pillola di fcaldera per un modo intelligente di inserirlo.

Ma la tua marcatura e` errata: il tag <font> e` deprecato/eliminato (a seconda della versione) e i CSS non lo apprezzano.

<div id="main_disc" class="elencoDati">
  <div id="disc_1" class="singoloUtente">
    <div id="utn_1" class="infoUtente">  
      <p class="dati">Dati 1</p>
      <p class="infout">Registrati il:
10/09/2007
Alle: 10:52:20</p>
    </div>
    <div id="txt_1" class="msgDato">
       

Descrizione dei dati

            Qui ho pochi dati, l'effetto è orrendo.
       </p>
    </div>
    <div id="inf_1" class="infoDato">
      <p class="info">
         Informazioni sui dati
      </p>
   </div>

   ... 
</div>

I due div interni affiancati avranno tutti float: left; e una larghezza definita.
il div che deve estendersi avra` clear: left;

Se definisci un'altezza per i blocchi, devi anche prevedere un overflow di qualche tipo, altrimenti i pezzi si sovrappongono.

[LeleFT]

Ti ringrazio per i suggerimenti e per le correzioni (effettivamente sto pian piano portando tutto su CSS, quindi i tag FONT spariranno).

I tuoi suggerimenti, però, non risolvono appieno il mio problema:

1) ho la necessità di avere la colonna di destra non dimensionata (avrà una dimensione minima, ovviamente, ma dovrà potersi estendere)

2) Ho letto la pillola dell'amico fcaldera, ma prevede che entrambi i blocchi abbiano una dimensione orizzontale definita e, come nel precedente punto, io posso solo definirla per la colonna di sinistra.

3) Ho la necessità di visualizzare il bordo fra le due colonne ed esso dovrebbe estendersi sempre per tutta l'altezza della colonna più alta (quella con più dati).

Per quanto riguarda l'ID del div, mi serve per poter risalire al documento lato-server, e verrà inviato tramite form.

Alla luce di questo, c'è qualche suggerimento?


Ciao.

[Mich_]

Originariamente inviato da LeleFT
Ti ringrazio per i suggerimenti e per le correzioni (effettivamente sto pian piano portando tutto su CSS, quindi i tag FONT spariranno).

Non ha senso sistemare i CSS finche` non c'e` chiarezza nella marcatura.
PRIMA sistema la marcatura, POI puoi affrontre il CSS

1) ho la necessità di avere la colonna di destra non dimensionata (avrà una dimensione minima, ovviamente, ma dovrà potersi estendere)

Intendi in verticale? Non ci sono problemi.

2) Ho letto la pillola dell'amico fcaldera, ma prevede che entrambi i blocchi abbiano una dimensione orizzontale definita e, come nel precedente punto, io posso solo definirla per la colonna di sinistra.

Non mi pare ceh sia necessario. E comunque tu hai un blocco dimensionato 100% sotto alle due colonne, per cui puoi mettere il float in tale blocco.

3) Ho la necessità di visualizzare il bordo fra le due colonne ed esso dovrebbe estendersi sempre per tutta l'altezza della colonna più alta (quella con più dati).

Esiste il "trucco" delle false colonne (faux columns). E` argomento gia` trattato, che trovi tramite ricerca, nel forum o in rete.

Per quanto riguarda l'ID del div, mi serve per poter risalire al documento lato-server, e verrà inviato tramite form.

OK, lo avevo solo segnalato.

Ancora non ho capito tutte le caratteristiche che ti servono, per cui sto dando ancora consigli generici.
Quello che mi premeva farti capire, come inizio, e` di non usare i posizionamenti, che creano piu` problemi di quanti ne risolvono, ma di cambiare la filosofia della formattazione.
Poi gli altri problemi si risolvono mano a mano.

Ora, per come la vedo io, dovresti:
1. implementare il codice HTML (che immagino venga fatto lato server tramite CMS o sim)
2. provare i pezzi del CSS consigliati
3. verificare il risultato (eventualmente postando l'immagine di come diventa - oppure un link)
4. segnalare eventuali errori.

[LeleFT]

Originariamente inviato da Mich_
Non ha senso sistemare i CSS finche` non c'e` chiarezza nella marcatura.
PRIMA sistema la marcatura, POI puoi affrontre il CSS

Hai perfettamente ragione, solo che per il momento volevo soffermarmi su questo punto (a volte mi impunto e non c'è verso di sradicarmi da lì se non risolvo).

Intendi in verticale? Non ci sono problemi.

No, intendevo in orizzontale

Non mi pare ceh sia necessario. E comunque tu hai un blocco dimensionato 100% sotto alle due colonne, per cui puoi mettere il float in tale blocco.

In effetti, tolti i posizionamenti e utilizzato il float (lo avevo già utilizzato prima di postare, con pessimi risultati, ma ora le cose sono decisamente cambiate).

Esiste il "trucco" delle false colonne (faux columns). E` argomento gia` trattato, che trovi tramite ricerca, nel forum o in rete.

Avevo letto anche questo prima di postare e volevo cercare un modo per evitarlo. Volevo utilizzare il meno possibile le immagini per effetti sfondo, ecc... per ora lo utilizzerò (se c'è qualche modo per evitarlo sarei grato di conoscerlo).

Ancora non ho capito tutte le caratteristiche che ti servono, per cui sto dando ancora consigli generici.

Non molti, per ora devo sviluppare una web application in J2EE, quindi la parte di HTML/CSS per me rappresenta solo il rendering (e, in pratica, per quelli che sono i miei obiettivi in questo momento, non è nemmeno il 5% di quello che devo fare, anzi si limita ad un solo Custom Tag JSP...). Solo che mi sono detto, prendiamo due piccioni con una fava: prima o poi mi ci dovrò scontrare con questa cosa dell'accessibilità, quindi soffermiamoci un attimo.

Quello che mi premeva farti capire, come inizio, e` di non usare i posizionamenti, che creano piu` problemi di quanti ne risolvono, ma di cambiare la filosofia della formattazione.
Poi gli altri problemi si risolvono mano a mano.

Ora, per come la vedo io, dovresti:
1. implementare il codice HTML (che immagino venga fatto lato server tramite CMS o sim)
2. provare i pezzi del CSS consigliati
3. verificare il risultato (eventualmente postando l'immagine di come diventa - oppure un link)
4. segnalare eventuali errori.

Ti ringrazio di tutti questi consigli, mi torneranno utili molto presto.
Per ora dovrei aver risolto il problema di quello sgradevole effetto, ora mi faccio pure il disegnino per le faux column e vediamo che ne esce...


Ciao.