Problema posizionamento elementi div
Buonasera a tutti, scusatemi se è la sezione sbagliata ma sono nuovo alle sezioni del vostro forum.
veniamo al dunque: ho un problema di visualizzazione di div all'interno della mia pagina.
In pratica il footer va a sovrapporsi al banner, come se il banner non esistesse o non fosse chiuso.
ho provato a controllare l'html ma sembra tutto in ordine, cosi come il css.
questo è il link al sito: http://mugproject.altervista.org/index.html
questo è l'html:
Codice HTML:
<div class="contenitore clearfix">
<div class="subarts clearfix">
<div class="subart">
<img class="subart_image"src="img1.jpg" alt="Nature" />
<div class="subart_copy">
<h3>Title Card</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis sequi incidunt optio, asperiores dolorum ratione excepturi. </p>
</div>
</div> <!-- chiusura div subart -->
<div class="subart">
<img class="subart_image"src="img2.jpg" alt="Nature" />
<div class="subart_copy">
<h3>Title Card</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis sequi incidunt optio, asperiores dolorum ratione excepturi. </p>
</div>
</div><!-- chiusura div subart -->
<div class="subart">
<img class="subart_image"src="img2.jpg" alt="Nature" />
<div class="subart_copy">
<h3>Title Card</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis sequi incidunt optio, asperiores dolorum ratione excepturi. </p>
</div>
</div><!-- chiusura div subart -->
</div> <!-- chiusura div subarts -->
<div class="banner clearfix">
<div class="subbnr">
<img class="subbnr_img" src="img1.jpg" alt="Nature" />
<div class="subbnr_copy">
<h3>Title Card</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis sequi incidunt optio, asperiores dolorum ratione excepturi. </p>
</div>
</div>
</div> <!-- chiusura banner -->
<div class="footer clearfix">
<p>Copyright - bla bla bla.net</p>
</div>
</div> <!-- chiusura div contenitore -->
mentre questo il css:
Codice HTML:
/* //////////////////////////////////
Sub Articoli
/////////////////////////////////// */
.subarts{width:80%; height:20%;margin: 0 auto; border:3px solid violet; top:5%; position:relative;}
.subart{width: 30%; margin:0 1.5%; background: #fff;float:left;}
.subart_image{width:100%; height: auto;}
.subart_copy{padding:5px 20px;}
.subart_copy h3{margin-bottom:0}
/* ////////////////////////////////////
Banner
/////////////////////////////// */
.banner{
width:80%; height:20%;margin: 0 auto; border:3px solid aqua; top:10%; position:relative;
}
.subbnr{
width: 100%; margin:0 auto; background: #fff; float:left;
}
.subbnr_img{
width:100%; height: 100%;
}
.subbnr_copy{
padding:5px 20px;
}
.subbnr_copy h3, .subbnr_copy p{
text-align:center;
}
/* //////////////////////////////////////
Footer
//////////////////////////////////////// */
.footer{width:100%; height:2%;background: #333; padding:30px;color:#fff; /* margin-top: 40px; */ position:relative;}
.contenitore{
width:100%;
border:10px yellow solid;
height:200%;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: "";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
come posso risolvere? ho provato a mettere position relative a ogni macrosezione ma non so se è sufficiente. ho provato a togliere e mettere il clearfix ma senza riuscire a vedere cambi. vi ringrazio in anticipo, confido in un vostro aiuto perchè sto impazzendo ;)
Buon proseguimento!!
