Ciao a tutti sto facendo un sito in html e css, sto riscontrando problemi per quanto riguarda il posizionamento del footer a fondo pagina, deve essere posizionato a fondo pagina in base ai contenuti del div centrale.
Praticamente io ho un div header, uno centrale e due laterali e poi il footer, naturalmente tutti contenuti in un container.
Vi posto il codice css dei div e l'html di una pagina.
Grazie a tutti
Codice css
#container{
position:relative;
background-color:#000000;
height:100%;
width:760px;
margin-left:auto;
margin-right:auto;
border:#FFFFFF solid 1px;
}
#header{
background-image:url(img/header.jpg);
background-repeat:no-repeat;
margin-top:0px;
height:125px;
width:760px;
}
#menu{
position:absolute;
height:auto;
width:auto;
margin-top:95px;
margin-left:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:x-small;
color:#FFFFFF;
}
#content{
width:760px;
height:auto;
margin-left:auto;
margin-right:auto;
border-top:#FFFFFF solid 1px;
}
#sinistra{
width:20%;
float:left;
color:white;
}
#destra{
color:white;
width:20%;
float:right;
}
#centrale{
position:absolute;
width:60%;
left:20%;
background-image:url(img/sfondo_centrale.jpg);
background-repeat:repeat;
background-position:bottom;
}
#centralesup{
background-image:url(img/sfondo_centrale_superiore.jpg);
background-repeat:repeat-x;
height:50px;
}
#footer{
background-color:black;
border-top:#FFFFFF solid 1px;
color:white;
width:760px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:x-small;
text-align:center;
clear:both;
margin-top:90%;
}
codice html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="caption.js"></script>
<script type="text/javascript" src="instant.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>.:.:Exclusivo Design:.:.:.:Compra Exclusivo:.:.</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body class="body">
<div id="container">
<div id="header">
<div id="utility">
</div>
<div id="menu">
</div>
</div>
<div id="content">
<div id="menu2">
</div>
<div id="centrale" align="center">
<div id="centralesup"></div>
<div id="prodottoprincipale">
Tutto il contenuto della parte centrale
</div>
</div>
</div>
<div id="footer">
© All Rights Reserved - PI 000000000 - Privacy/Policy - Credits - Contatti</p>
</div>
</div>
</body>
</html>
Rispondi quotando