Visualizzazione dei risultati da 1 a 3 su 3

Discussione: 3 div in un div

  1. #1

    3 div in un div

    Salve a tutti...
    Ho un problema: in una pagina html devo avere una riga blu in cui mettere del testo a sinista, al centro e a destra.

    Con le tabelle è ok, ma vorrei fare tutto con div e css.

    Dunque, la riga blu non è un problema, il css per lei è così:

    codice:
    .rigablu {
    	background-color:#3A6EA5;
    	padding: 3px;
    	float: none;
    }
    per i tre testi nel css ho fatto così:

    codice:
    .testoleft {
    	float: left;
    	width: 33%;
    	text-align: left;
    }
    
    .testocenter {
    	float: left;
    	width: auto;
    	text-align: center;
    }
    
    .testoright {
    	float: right;
    	width: 33%;
    	text-align: right;
    	margin-right:-1px;
    }
    l'html invece è cosi':

    codice:
    <div class='rigablu'>
      <div class='testoleft'>
        testo di sinistra
      </div>
      <div class='testocenter'>
        testo centrale
      </div>
      <div class='testoright'>
        testo di destra
      </div>
    </div>
    Il problema è che mi viene una riga blu alta un paio di pixel, e il testo invece di venire dentro questa riga viene sotto, messo correttamente uno a sx, uno al centro, uno a dx... come posso fare per mettere il testo nella riga blu?
    SuSe 9.1 :mavieni:
    Vengo da:
    Mandrake 8.0 - Mandrake 9.1 - Red Hat 9.0 - Fedora Core 1
    Linux harlock 2.6.5-7.75-default #1 i686 athlon i386 GNU/Linux

  2. #2
    Utente di HTML.it L'avatar di salasir
    Registrato dal
    Apr 2004
    Messaggi
    1,881
    prova a mettere un clear prima della chiusura finale.


    .clearer { clear: both; }


    </div>
    <div class="clearer"></div>
    </div>

    Maurizio

  3. #3
    funziona.... grazie mille!!!
    SuSe 9.1 :mavieni:
    Vengo da:
    Mandrake 8.0 - Mandrake 9.1 - Red Hat 9.0 - Fedora Core 1
    Linux harlock 2.6.5-7.75-default #1 i686 athlon i386 GNU/Linux

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.