Salve, ho provato in mille modi, ma non riesco a creare un footer bloccato in fondo pagina. Non deve seguire il contenuto ne rimanere in primo piano (fixato). Non so se mi spiego.. Come si fa? Grazie in anticipo.
Salve, ho provato in mille modi, ma non riesco a creare un footer bloccato in fondo pagina. Non deve seguire il contenuto ne rimanere in primo piano (fixato). Non so se mi spiego.. Come si fa? Grazie in anticipo.
codice:<!doctype html> <html> <head> <meta charset="utf-8"> <title>Documento senza titolo</title> <style type="text/css"> #footer { background-color: #DC1A1D; margin: 0px; padding: 0px; height: 80px; width: 100%; overflow: hidden; position: absolute; bottom: 0; left: 0; } </style> </head> <body> <div id="footer">Inserire qui il contenuto per il "footer"</div> </body> </html>
“Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.
Giovanni Falcone
Non funziona.. Rimane fisso così Cattura.jpg coprendomi parte del contenuto..
Al body metti un margin-bottom di 80px
No
Non va..Cattura.jpg
il css è corretto, evidentemente è il resto che non va, le 2 immagini che scivolano sotto al footer come/dove le hai messe ?
HTML:
<div class="social">
<ul>
<li><a class="butt1" href="mailto:info@giogiogio.it"></a></li>
<li><a class="butt2" href="#"></a></li>
</ul>
</div>
CSS:
.social a{
background-image: url(../img/social.png);
display: inline-block;
list-style: none;
width: 80px;
height: 80px;
}
.butt2{
background-position: 80px 0;
}
.social .butt1:hover{
background-position: -0px -80px;
}
.social .butt2:hover{
background-position: 80px 80px;
}
.social ul li{
list-style-type: none;
display: inline;
}
ul{
padding: 0;
}
Cosi non ne veniamo a capo, devi scrivere tutto il codice html presente nella pagina cosi com'è altrimenti non si capisce
Ultima modifica di alexba64; 20-04-2014 a 12:25
Ecco la soluzione:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Footer in fondo</title>
<style type="text/css">
html, body {
height: 100%;
margin:0;
padding:0;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom: 80px;
}
/* must be same height as the footer */
#footer {
position: relative;
margin-top: -80px; /* negative value of footer height */
height: 80px;
background-color: #DC1A1D;
clear:both;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
</style>
</head>
<body>
<div id="wrap">
<div id="main"><p>Qui il contenuto della tua pagina</p></div>
</div>
<div id="footer">Qui il contenuto del footer</div>
</body>
</html>
Tratto da:
http://www.cssstickyfooter.com/
Rispondi quotando
