- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Div posizionati in modo assoluto che si sovrappongono
-
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!
-
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;
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;
}
-
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.
-
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à!
