Visualizzazione dei risultati da 1 a 5 su 5

Hybrid View

  1. #1
    Moderatore di Programmazione L'avatar di LeleFT
    Registrato dal
    Jun 2003
    Messaggi
    17,328

    Layout tableless - il "footer" si comporta male

    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:
    codice:
    .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:
    codice:
    <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.
    Immagini allegate Immagini allegate
    "Perchè spendere anche solo 5 dollari per un S.O., quando posso averne uno gratis e spendere quei 5 dollari per 5 bottiglie di birra?" [Jon "maddog" Hall]
    Fatti non foste a viver come bruti, ma per seguir virtute e canoscenza

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.