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

    Divs che si spostano in relazione ad altro div

    Ciao a tutti, vorrei integrare dentro ad un cms l'uso dei div.

    Faccio un esempio, ci sono 4 divs distribuiti su due colonne, dentro ogni div, c'è un contenuto dinamico, quindi non posso definire a priori l'altezza, come posso fare in modo che il secondo div non sia sovrapposto al primo di sopra nel caso in cui quello abbia un contenuto che ne aumenta l'altezza?

    Grazie in anticipo
    Francesco

  2. #2
    Utente di HTML.it
    Registrato dal
    Feb 2008
    Messaggi
    663
    Se ho capito bene quello che intendi, non dovresti avere problemi.
    Non specificando l'altezza dei div, quelli sopra aumentando dovrebbero spostare quelli sotto proporzionalmente.
    Fai attenzione però ad utilizzare bene i fluttuamenti, in caso contrario potresti avere dei comportamenti anomali.

  3. #3
    Intanto, grazie per la risposta, ho constatato ciò che tu dici, però ho un problema.... finchè devo affiancarle verticalmente i div va bene, ma aggiungendone un terzo che è teoricamente nella seconda colonna, mi va giù , ecco il codice:

    Codice PHP:
    <style type="text/css">
    <!--
    #apDiv1 {
        
    position:relative;
        
    width:239px;
        
    z-index:1;
        
    left255px;
        
    top100px;
        
    background-color#00CC33;
    }
    #apDiv2 {
        
    position:relative;
        
    width:200px;
        
    z-index:1;
        
    left255px;
        
    top105px;
        
    background-color#333300;
    }
    #apDiv3 {
        
    position:relative;
        
    width:200px;
        
    z-index:1;
        
    left660px;
        
    top105px;
        
    background-color#333300;
    }
    -->
    </
    style>
    <
    div id="apDiv1">fdgghfghfh sdalkfj kldsjf lkòdsj flkdsòfjlkòsd jlkòsdjfdklsòjfsdklòa fjlkdsòjf
    dsf ksdlòf ksdòf ksdfklòsdf
    jlksdòf ksdòl fksdòfk sdfk sda 
    klòsd fksd kslòdafklsadfklò
    sdaf ksdlòf klòsadkf àdk lò
    sdasd
    sadsad
    sad
    asd
    asd
    asdsa
    das
    dsa
    das
    das
    d
    asd
    asd
    asd
    asd
    as
    sdklò fsdaklò fsdkfsd ks
    ciao
    ciao
    ciao
    ciao
    ciao
    ciao
    ciao

    </div>
    <
    div id="apDiv2"></div>
    <
    div id="apDiv3">io non centro niente con gli altri due</div
    Grazie per l'aiuto

  4. #4
    Utente di HTML.it
    Registrato dal
    Feb 2008
    Messaggi
    663
    Attenzione stai usando i posizionamenti.
    Quando utilizzi i posizionamenti gli elementi si estraggono dal flusso normale del documento e non si comportano come di consueto.

    In più vedo che utilizzi il position relative, in genere quest'ultima proprietà dovrebbe essere attribuita all'elemento contenitore, mentre ai figli dovrebbe essere data la proprietà absolute, per indirizzarli dove vuoi te.

    Nel tuo caso mancando un div contenitore la "relative " dovrebbe assere attribuita all'elemento body e ai tuoi div la "absolute".

    Ti consiglio di non utilizzare questa soluzione, ma di creare un div contenitore e di utilizzare la proprietà float per i div figli, è molto più gestibile.

  5. #5
    Dunque, ho sempre lavorato con le tabelle... quindi diciamo che sono agli inizi con div... di seguito il codice che ho utilizzato per ottenere quello che voglio, c'è un modo per farlo senza intervenire con programmazione?


    Codice PHP:
    <style type="text/css">
    <!--
    body,html { height:100%;margin:0 }
    #apDiv1 {
        position:absolute;
        width:239px;
        z-index:1;
        left: 98px;
        top: 48px;
        background-color: #00CC33;
    }
    #apDiv2 {
        position:absolute;
        width:200px;
        z-index:2;
        left: 318px;
        top: 128px;
        background-color: #333300;
    }
    #apDiv3 {
        position:absolute;
        width:200px;
        z-index:3;
        left: 353px;
        top: 45px;
        background-color: #333300;
    }

    #contenitore {
    width:780px;
    top: 0px;
    position:relative;left:50%;
    margin:-0px 0 0 -390px;
    background-color:#CCCCCC;
    }


    -->
    </style>
    <div id="contenitore">
    <div id="apDiv1">fdgghfghfh sdalkfj kldsjf lkòdsj flkdsòfjlkòsd jlkòsdjfdklsòjfsdklòa fjlkdsòjf
    dsf ksdlòf ksdòf ksdfklòsdf
    jlksdòf ksdòl fksdòfk sdfk sda 
    klòsd fksd kslòdafklsadfklò
    sdaf ksdlòf klòsadkf àdk lò
    sdasd
    sadsad
    sad
    asd
    asd
    asdsa
    das
    dsa
    das
    das
    d
    asd
    asd
    asd
    asd
    as
    sdklò fsdaklò fsdkfsd ks
    ciao
    ciao
    ciao
    ciao
    asdfgsdfg
    sdf
    sdfs
    dfsda
    f
    sdaf
    sadf
    asdf
    asdf
    asd
    fasd
    fsad
    fasd

    ciao
    ciao
    ciao

    <? //cho $contenuto; ?></div>
    <div id="apDiv2"></div>
    <div id="apDiv3">io non centro niente con gli altri due</div>
    </div>
    <script>
    e_altezza=document.getElementById("apDiv1").offsetHeight;
    e_sinistra=document.getElementById("apDiv1").offsetLeft;
    e_alto=document.getElementById("apDiv1").offsetTop;
    e_larghezza=document.getElementById("apDiv1").offsetWidth;

    f_altezza=document.getElementById("apDiv2").offsetHeight;
    f_sinistra=document.getElementById("apDiv2").offsetLeft;
    f_alto=document.getElementById("apDiv2").offsetTop;
    f_larghezza=document.getElementById("apDiv2").offsetWidth;

    //facciamo questo test, se il box non è in linea in altezza allora non riposizionarlo
    if ((f_alto > e_alto) && ((f_sinistra > e_sinistra) && (f_sinistra < (e_larghezza+e_sinistra))))
    {
    document.getElementById("apDiv2").style.top = (e_altezza+e_alto)+'px';
    }

    </script>
    grazie
    francesco

  6. #6
    Utente di HTML.it
    Registrato dal
    Feb 2008
    Messaggi
    663
    Prova guardarti questa sezione del sito:

    http://css.html.it/guide/leggi/3/gui...iti-con-i-css/

    ti spiega anche il passaggio dal layout a tabelle al layout table-less.

    In particolare nel tuo caso:

    http://css.html.it/guide/lezione/68/...-con-il-float/

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.