Visualizzazione dei risultati da 1 a 9 su 9
  1. #1

    Chiarimento sul div come tabella

    Ciao a tutti, vi pongo questo problema:
    io ho un <div id="contenitore"> di larghezza 100px che al suo interno ha due div class,ovvero <div class="info"> e <div class="dati">. Il primo ha larghezza 30px mentre il secondo 70 px con tutti e due altezza 50px. Io vorrei porre i due div class uno accanto all'altro ovviamente orizzontalmente. La cosa sembra semplice, infatti io ho pensato che basterebbe mettere come comandi nei due div class il comando float:left,pero nel momento in cui utilizzo questo comando si crea un problema, ovvero che questi due div non sono contenuti all'interno del div id,ovvero il div id contenitore non si modella rispetto alle proporzioni dei due div class, ma invece viene sovrapposto dai due div class.
    Questa e' la mia domanda: come si può fare a sopperire a questo problema e quindi quale e' la soluzione affinche io in un div contenitore possa mettere due div al fine di poterli posizionare uno accanto all'altro senza che vadano a sovrapporre il div che li contiene?
    grazie(se possibile scrivetemi il codice css.

    <html>
    <body>
    <div id="contenitore">
    <div class="info">
    </div>
    <div class="dati">
    </div>
    </div>

  2. #2
    se ho capito bene, non puoi mettere il float ad entrambi i div, perché il float toglie gli elementi da normale flusso del documento e quindi è come se il contenitore rimanesse vuoto! metti il float:left al div di sinistra, mentre al destro metti un margin-left pari alla larghezza del primo div (30px credo)

  3. #3
    pero non so per quale motivo il div contenitore non si modella rispetto all'altezza dei due div class che stanno al suo interno, e succede appunto come dicevo che i div class
    vanno a sovrastare il div contenitore

  4. #4
    posta il CSS che vediamo dove sbagli (meglio ancora sarebbe una pagina online)

  5. #5
    Utente di HTML.it L'avatar di floyd46
    Registrato dal
    Feb 2002
    residenza
    Apulia
    Messaggi
    2,641

    Re: Chiarimento sul div come tabella

    ciao, prova questo codice:
    codice:
    #contenitore{
    margin:0;
    padding:0;
    width:100px;
    
    }
    .info{
    margin:0;
    padding:0;
    float:left;
    width:30px;
    height:50px;
    background:#aaa;
    }
    .dati{
    margin:0;
    padding:0;
    float:left;
    width:70px;
    height:50px;
    background:#e6e6e6;
    }
    e nel body scrivi:
    <div id="contenitore">
    <div class="info"></div>
    <div class="dati"></div>
    </div>
    posta se hai ancora problemi.
    saluti
    "Le persone che realizzano layout con tabelle annidate, spacer gif o che ignorano l'accessibilità non possono più definirsi professionisti." Andy Clarke
    --------------------------------

    www.extrowebsite.com

  6. #6
    Ma così sarà uguale al suo! su IE funziona correttamente, ma prova a mettere un bordo al container e vedi che su firefox questo rimane vuoto, quindi è come se nn ci fosse!
    La mia soluzione sopradetta invece va su firefox ma non su IE (cioè è già più corretta ) perché IE per qualche assurdo motivo aggiunge alcuni px invicibili a destra dell'elemento flottato e non fa posizionare l'altro div a contatto con il bordo destro del primo! l'avevo già vista sta cosa ma non ci avevo perso tempo a cercare di capirla!
    posto il codice
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Documento senza titolo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    #contenitore{
    margin:0px;
    padding:0px;
    width:100px;
    background-color: #ff0000;
    border: 1px solid black;
    }
    .info{
    margin:0px;
    padding:0px;
    float:left;
    width:30px;
    height:50px;
    background:#aaa;
    }
    .dati{
    margin:0px;
    padding:0px;
    margin-left:30px;
    width:67px;
    height:50px;
    background:#e6e6e6;
    }
    </style>
    </head>

    <body>
    <div id="contenitore">
    <div class="info"></div>
    <div class="dati"></div>
    </div>
    </body>
    </html>

    ho dovuto ridurre di 3px la larghezza del div dati per riuscire ad affiancarlo all'altro! se solo agiungo un px esso viene mandato a capo
    dove sbaglio? adesso mi guardo un po' qualche guida...

  7. #7
    Utente di HTML.it L'avatar di floyd46
    Registrato dal
    Feb 2002
    residenza
    Apulia
    Messaggi
    2,641
    ciao awd, non avevo letto che ci volesse anche un bordo;
    ho usato la regola di Tantek (box model) e si vede bene sia su IE, Opera, Mozilla e FF. Il codice cambia rispetto a quello che ho scritto + su e diventa:
    codice:
    #contenitore{
    margin:0 auto;
    padding:0;
    height:50px;
    border:1px solid #000;
    width:102px;
    voice-family: "\"}\""; 
    voice-family:inherit;
    width:100px;
    }
    html>#contenitore{
    width:100px;
    }
    .info{
    margin:0;
    padding:0;
    float:left;
    width:30px;
    height:50px;
    background:#aaa;
    }
    .dati{
    margin:0;
    padding:0;
    float:left;
    width:70px;
    height:50px;
    background:#e6e6e6;
    }
    scrivendo, sempre nel body:
    <div id="contenitore">
    <div class="info"> </div>
    <div class="dati"> </div>
    </div>
    prova adesso e dimmi conme va. A me viene visualizzato correttamente;
    il problema era che si doveva dikiarare una height anche per il #contenitore. Per questo nn si vedeva il bordo.
    a disposizione per eventuali kiarimenti.
    Floyd
    "Le persone che realizzano layout con tabelle annidate, spacer gif o che ignorano l'accessibilità non possono più definirsi professionisti." Andy Clarke
    --------------------------------

    www.extrowebsite.com

  8. #8
    no floyd il bordo non era richiesto, l'ho citato io solo per fare l'esempio, cioè per mostrare che con entrambi i div flottati il contenitore rimane vuoto (tranne in IE), cioè essi non aumentano la dimensione del contenitore man mano che si allungano in altezza! io ho avuto questo problema nel fare il mio sito personale e alla fine, non riuscendovi, ho optato per il posizionamento assoluto!

    cmq il tuo codice su IE (in quirk) non mi funziona, inoltre non ho capito a che serve il child selector, in IE manco è supportato!

  9. #9
    Utente di HTML.it L'avatar di floyd46
    Registrato dal
    Feb 2002
    residenza
    Apulia
    Messaggi
    2,641
    se nn funziona su IE, dipende da quale !DOCTYPE inserisci nella pagina. A me si vedeva bene sia il primo esemopio (senza bordi) che il secondo, con bordi.
    ciao
    "Le persone che realizzano layout con tabelle annidate, spacer gif o che ignorano l'accessibilità non possono più definirsi professionisti." Andy Clarke
    --------------------------------

    www.extrowebsite.com

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.