+ Rispondi alla Discussione
Risultati da 1 a 4 di 4

Div posizionati in modo assoluto che si sovrappongono

Ultimo Messaggio di Laura206 il:
  1. #1
    User
    Data Registrazione
    Feb 2008
    Messaggi
    47

    Div posizionati in modo assoluto che si sovrappongono

    Ciao a tutti,
    ho questo problema.
    Ho creato una pagina web con dei div posizionati in modo assoulto.
    I div della testata, del menu ed altri blocchi che mi servono li ho posizionati ad una certa distanza dal top, mentre il div del footer l'ho posizionato a bottom=0.
    Ma il div del footer mi si sovrappone agli altri div dei vari blocchi, anche se ho messo l'altezza in tutti, io invece vorrei che mi comparissero le barre laterali se l'altezza non ci sta in verticale nella finestra.
    Non so se mi son spiegata bene...

    Grazie!

  2. #2
    User
    Data Registrazione
    Feb 2008
    Messaggi
    47
    Posto il codice:
    <div id="container">
    <div class="testata"></div>
    <div id="logo"><img src="img_ico/logo.png" title="" /></div>
    <div id="wrapper">
    <div id="slider-wrapper">
    <div id="slider" class="nivoSlider">
    <img src="images/img1.jpg" alt="" />
    <img src="images/img2.jpg" alt="" />
    <img src="images/img3.jpg" alt="" title="#htmlcaption" />
    </div>
    </div>
    </div>
    <div class="menu"></div>
    <div class="blocco1" style="background:green;">
    <div class="bannerPubblicita"></div>
    </div>
    <div class="spazioFooter"></div>
    <div class="sfFooter"></div>
    </div>

    Css:
    body, html {
    margin: 0;
    background: #FFF;
    height:100%;
    }
    a img {
    border: 0;
    }
    #container {
    width: 1000px;
    height:100%;
    margin:auto;
    clear:both;
    position:relative;
    }
    .testata {
    background: #ffc21d;
    width: 100%;
    height:36px;
    text-align:right;
    border-bottom: solid 7px #FFF;
    z-index:1;
    position:absolute;
    }
    #logo {
    position: absolute;
    top: 0;
    left: 30px;
    z-index:100;
    }
    .menu {
    background: url(img_ico/sfmenu.gif) repeat-x top center;
    width: 100%;
    height:41px;
    position: absolute;
    top: 270px;
    }
    .blocco1 {
    position: absolute;
    top: 330px;
    width:100%;
    height:240px;
    }
    .blocco2 {
    position: absolute;
    top: 586px;
    }
    .blocco3 {
    position: absolute;
    top: 807px;
    }
    .sfFooter {
    background: url(img_ico/sfFooter.gif) repeat-x bottom center;
    width: 100%;
    height:210px;
    position: absolute;
    bottom: 0;
    }
    .spazioFooter {
    width: 100%;
    height:35px;
    position: absolute;
    bottom: 210px;
    }
    .bannerPubblicita {
    background:#C30;
    width:240px;
    height:240px;
    }

  3. #3
    Utente Premium L'avatar di sandroid
    Data Registrazione
    Mar 2011
    Località
    Roma
    Messaggi
    445
    Ciao Laura, ho fatto una priova con Dreamweaver inserendo al posto delle tue immagini che non ho, delle scritte a caso ma non mi sembra che il footer si sovrapponga agli altri blocchi, anzi è sotto il div spazio footer che è a sua volta sotto il div rosso che mi pare si chiami banner.

    Ho notato che dallo stesso Dreamweaver visualizzando l'anteprima (vista dal vivo) il div footer viene sovrapposto ma questo errore non viene invece rilevato dai browser (ho testato sia Firefox che Explorer).

    Ad ogni modo ti posso chiedere come mai hai posizionato tutti quei div in absolute? Se non si sovrappongono forse non è necessario!
    Anche il clear: both attribuito al container non è essenziale, se infatti lo levi la situazione rimane la stessa.

  4. #4
    User
    Data Registrazione
    Feb 2008
    Messaggi
    47
    Ciao,
    ho dovuto usare i posizionamenti per poter posizionare con lo z-index il div con il logo, sopra a quello con le immagini...
    Cmq ho risolto in questo modo:
    al posto di usare un grande div container ho usato due div divisi HEAD e MAIN e negli elementi nel MAIN non ho usato posizionamenti!

    Grazie cmq per la disponibilità!

+ Rispondi alla Discussione

^ Permessi di Scrittura

  • Tu non puoi inviare nuove discussioni
  • Tu non puoi inviare risposte
  • Tu non puoi inviare allegati
  • Tu non puoi modificare i tuoi messaggi
  •  
  • Il codice BB è Attivato
  • Le faccine sono Attivato
  • Il codice [IMG] è Attivato
  • Il codice [VIDEO] è Attivato
  • Il codice HTML è Disattivato
  • Trackbacks Attivato
  • Pingback Attivato
  • Refback Attivato

SEO by vBSEO 3.6.0 PL2 ©2011, Crawlability, Inc.