Visualizzazione dei risultati da 1 a 10 su 10

Discussione: altezza div

  1. #1
    Utente di HTML.it
    Registrato dal
    Oct 2003
    Messaggi
    311

    altezza div

    salve a tutti,
    vorrei creare una tabella per un menù ma la vorrei fare con css e non con l'obsoleto <table>, ho però problemi a creare righe di celle alte 2px (mi servono come sottolineatura .. allego immagine fatta usando <table>).. chi mi può aiutare ?
    grazie
    Immagini allegate Immagini allegate

  2. #2

  3. #3
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    117
    Puoi simulare il comportamento di una tabella tramite css utilizzando i <div>
    codice HTML:
    .tabella {display: table;}
    .tabella div {display: table-row;}
    .tabella div.sottolineatura {height: 2px;}
    .tabella div div {display: table-cell;}
    
    <div class="tabella">
      <div>
        <div>Prima cella</div>
        <div>Seconda cella</div>
        <div>Terza cella</div>
      </div>
    
      <div class="sottolineatura">
        <div>Prima cella</div>
        <div>Seconda cella</div>
        <div>Terza cella</div>
      </div>
    </div>
    https://www.google.it/search?q=tabel...Nan08AekgYiwBA

  4. #4
    Utente di HTML.it
    Registrato dal
    Oct 2003
    Messaggi
    311
    Quote Originariamente inviata da fluxKami Visualizza il messaggio
    Puoi simulare il comportamento di una tabella tramite css utilizzando i <div>
    codice HTML:
    .tabella {display: table;}
    .tabella div {display: table-row;}
    .tabella div.sottolineatura {height: 2px;}
    .tabella div div {display: table-cell;}
    
    <div class="tabella">
      <div>
        <div>Prima cella</div>
        <div>Seconda cella</div>
        <div>Terza cella</div>
      </div>
    
      <div class="sottolineatura">
        <div>Prima cella</div>
        <div>Seconda cella</div>
        <div>Terza cella</div>
      </div>
    </div>
    https://www.google.it/search?q=tabel...Nan08AekgYiwBA
    grazie.. è quello che ho cercato di fare.. ma l'altezza del div "sottolineatura" non va a 2px ma rimane ad un altezza normale come se contenesse un testo.. ovviamente ho tolto il testo che avevi inserito tu.. lasciando vuoto oppure inserendo una immagine di 1px non cambia
    allego img (ho colorato i div per vederli meglio)
    Immagini allegate Immagini allegate

  5. #5
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    117
    A me funziona perfettamente. Sicuramente hai qualche istruzione CSS successiva sui div che sovrascrive quella precedente o interferisce, magari un padding.
    Se vuoi una mano a trovare il problema, posta il CSS ed il codice HTML che utilizzi.

  6. #6
    Utente di HTML.it
    Registrato dal
    Oct 2003
    Messaggi
    311
    pagina test.html:
    codice:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>test</title>
    
    
    <style type="text/css">
    .tabella {display: table;}
    .tabella div {display: table-row;}
    .tabella div.sottolineatura {height: 2px;}
    .tabella div div {display: table-cell;}
    .bgr{background-color:red}
    .bgb{background-color:blue}
    .bgy{background-color:yellow}
    </style>
    </head>
    
    
    <body>
    <div class="tabella">
      <div>
        <div>Prima cella</div>
        <div>Seconda cella</div>
        <div>Terza cella</div>
      </div>
    
    
      <div class="sottolineatura">
        <div class="bgr">&nbsp;</div>
        <div class="bgb">&nbsp;</div>
        <div class="bgy">&nbsp;</div>
      </div>
    </div>
    
    
    <div class="tabella">
      <div>
        <div>Prima cella</div>
        <div>Seconda cella</div>
        <div>Terza cella</div>
      </div>
    
    
      <div class="sottolineatura">
        <div class="bgr"><img src="images/blank.gif" width="1" height="1" alt=""/></div>
        <div class="bgb"><img src="images/blank.gif" width="1" height="1" alt=""/></div>
        <div class="bgy"><img src="images/blank.gif" width="1" height="1" alt=""/></div>
      </div>
    </div>
    
    
    </body>
    </html>
    ..nell'immagine allegata:
    prima tabella con "spazio" ( &nbsp; )
    seconda tabella con immagine 1x1 px
    Immagini allegate Immagini allegate
    Ultima modifica di aux998; 13-07-2017 a 10:31

  7. #7
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    117
    Hai voglia di linkarmi la pagina di esempio?
    Comunque se devi lasciare il contenuto vuoto, lascialo completamente vuoto: non inserire spazio né immagini da 1px. Vedrai che funziona.
    Ultima modifica di fluxKami; 13-07-2017 a 10:52

  8. #8
    Utente di HTML.it
    Registrato dal
    Oct 2003
    Messaggi
    311
    Quote Originariamente inviata da fluxKami Visualizza il messaggio
    Hai voglia di linkarmi la pagina di esempio?
    Comunque se devi lasciare il contenuto vuoto, lascialo completamente vuoto: non inserire spazio né immagini da 1px. Vedrai che funziona.
    funziona.. lasciando vuoto funziona..
    grazie mille !

  9. #9
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    117
    Prego! Ti spiego il motivo:
    Inserendo uno spazio o un'immagine, all'interno del div si crea un flusso di testo che automaticamente alza il contenitore. Come se tu ci avessi scritto dentro qualcosa di "trasparente".
    Ciao!

  10. #10
    Utente di HTML.it
    Registrato dal
    Oct 2003
    Messaggi
    311
    e grazie ancora per la spiegazione ! ..ancora più utile !

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 © 2024 vBulletin Solutions, Inc. All rights reserved.