Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Utente di HTML.it L'avatar di ciat
    Registrato dal
    May 2009
    Messaggi
    139

    Il display:table in google chrome

    Sto cercando di capire come funziona questa proprietà. Ho fatto un div ad altezza e largezza fisse con il display:table-row e con vertical-align:middle . Al suo interno ci sono un' immagine affiancata da diversi pulsanti, ognuno (anche l' immagine) con display:table-cell . Se ho capito bene cosa significa questa proprietà dovrei visualizzare gli elementi del div affiancati uno all' altro, ed è quello che vedo in IE e Firefox. In Chrome invece i pulsanti vanno a capo rispetto all' immagine. Come mai?

    Ecco il css:
    codice:
    #testa {     height:80px;     width:100%;     padding:0px;     margin:0px;     display:table-row; }  .imgtesta {     display:table-cell;     vertical-align:middle; } .btntesta {     display:table-cell;     vertical-align:middle;     background-color:#aca;     padding:15px;     display:inline-block;        margin:10px;     cursor:pointer;     position:relative; } .btntesta:hover {     background-color:#eee; }
    E l' html generato:
    codice:
    <div id="testa">              <input type="image" name="ctl00$img1" id="ctl00_img1" class="imgtesta" src="img/sfondo1.jpg" style="border-width:0px;" />              <input type="submit" name="ctl00$btnhome" value=" Homepage " id="ctl00_btnhome" class="btntesta rounded {transparent}" />              <input type="submit" name="ctl00$btnmusica" value="Musica " id="ctl00_btnmusica" class="btntesta rounded {transparent}" />              <input type="submit" name="ctl00$btnclass" value="Le classifiche " id="ctl00_btnclass" class="btntesta rounded {transparent}" />              <input type="submit" name="ctl00$btncerca" value="Cerca " id="ctl00_btncerca" class="btntesta rounded {transparent}" />                                        <input type="submit" name="ctl00$btnentra" value="Entra " id="ctl00_btnentra" class="btntesta rounded {transparent}" />              <input type="submit" name="ctl00$btnreg" value="Registrati " id="ctl00_btnreg" class="btntesta rounded {transparent}" />          </div>
    I pulsanti hanno la doppia classe perchè uso una classe javascript per gli angoli arrotondati

  2. #2
    Utente di HTML.it L'avatar di emnlmn
    Registrato dal
    Oct 2008
    Messaggi
    263
    Quella categoria di proprietà, spesso e volentieri presenta diversità di visualizzazione tra i vari browser. Forzare dei blocchi ad essere formattati come fossero celle di una tabella può essere utile in certi casi... ma è davvero l'unica alternativa?
    Quello che voglio chiederti, prima di mettermi a pensare al problema, il semplice utilizzo di blocchi flottanti non è sufficiente per risolvere il tuo problema?

  3. #3
    Utente di HTML.it L'avatar di ciat
    Registrato dal
    May 2009
    Messaggi
    139
    Scusa se rispondo solo adesso. Hai ragione userò il float, anche se è un peccato che il display_table non sia supportato pienamente da tutti i browser.
    Grazie della risposta

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