Footer a fondo pagina

**duri93** · 12-12-2010, 15:41

Ciao ragazzi!

Vi scrivo perchè ho un problema con il footer del mio sito...
Vorrei che si posizionasse a fondo pagina, oppure se la pagina è più lunga del viewport deve mettersi dopo i contenuti.

Cercando ho trovato la vostra lezione http://css.html.it/guide/lezione/64/...ma-del-footer/
Ho provato, ma non mi viene giusto...

Precisamente:
se la pagina è più corta del viewport il footer resta in basso, com'è giusto;
se invece i contenuti sono molti, il problema cambia da browser a browser:
* IE8: il footer si mette dopo i contenuti, come è giusto (mamma mia, prima volta in vita mia che IE fa qualcosa giusto

)
* CHROME: il footer si dispone sopra le ultime righe di contenuti, e questi ultimi arrivano fino a fine pagina
* FIREFOX: il footer si dispone sopra le ultime righe di contenuti, ma questi ultimi lasciano sotto lo spazio per il footer

Spero si sia capito, comunque questa è la pagina http://elsgranfo.no-ip.org/design/,
mentre questo è il css: http://elsgranfo.no-ip.org/design/style/style.css
Scusate se ci mette tanto a caricare, devo ancora ottimizzare le immagini, e sto lavorando sul server che ho a casa, la connessione è quel che è

Grazie del vostro aiuto! Buona domenica!

**duri93** · 13-12-2010, 19:29

Up!

Se non avete risposto perchè non c'è il sorgente (l'ho linkato, pensavo bastasse) ecco qui il

codice:

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>

<html>
    <head>
    	<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
        <link href='style/reset.css' rel='stylesheet' type='text/css'>
        <link href='style/style.css' rel='stylesheet' type='text/css'>
        <title>El Sgranfo</title>
         <!--[if IE]> 
        	<style type='text/css' media='screen'>
            	#Container{height:100%;}
            </style>
        <![endif]-->
    </head>
	<body>
   
        <div id='Container'>
            <div id='Header'>
                [img]images/header-img.png[/img]
            </div>
            <div id='Navi'>
            	<div class="top"></div><div class="bottom"></div>
                Navi
            </div>
            <div id='Body'>
            	<div class="top"></div><div class="bottom"></div>
               Body







































































































































































































Tutti i contenuti e blabla ciao ciao
            </div>
            <div id='News'>
            	<div class="top"></div><div class="bottom"></div>
                News
            </div>
            <div id='Footer'>
                Webdesigner: Duri93
            </div>
        </div>
        
    </body>
</html>

E quello nel CSS

codice:

html, body{
		height: 100%
 }

body{
	background:url(../images/background.jpg) fixed no-repeat center top #010101;
	color:#fff;
	text-align:center;
 }

#Container{
	position:relative;
	width:760px;
    margin:0px auto;
    text-align:left;
	/*border:#F00 1px dashed;*/
		min-height:100%;
		height:auto !important;
		height:100%;
 }

body>div#container{
		height:auto;
		min-height:100%;
 }

/*--- HEADER ---*/ 
div#Header{
	width:776px;
	height:142px;

	background-image:url(../images/border-sprite.png);
	
	text-align:center;
 }

/*- BODY, NAVI -*/ 
div#Body, div#Navi{
    width:519px;
	
	position:relative;
	left:10px;
	top:-5px;
	
	background-image:url(../images/floor-sprite.png);
	background-position:-206px 0px;
	background-repeat:repeat-y;
	/*border:1px #F00 solid;*/
	
	margin-top:27px;
	margin-bottom:55px;
	
	padding-left:10px;
	padding-right:10px;
 }
div#Body .top, div#Navi .top{
	width:539px;
	height:27px;
	
	position:absolute;
	top:-27px;
	left:0px;
	
	background-image:url(../images/border-sprite.png);
	background-position:-206px -143px;
 }
div#Body .bottom, div#Navi .bottom{
	width:539px;
	height:36px;
	
	position:absolute;
	bottom:-36px;
	left:0px;
	
	background-image:url(../images/border-sprite.png);
	background-position: -206px -170px;
 }

div#Body{
	margin-bottom:170px;
}
/*---- NEWS ----*/ 
div#News{
	width:190px;
	
	position:absolute;
    top:158px;
    right:-9px;
	
	background-image:url(../images/floor-sprite.png);
	background-repeat:repeat-y;
	/*border:1px #F00 solid;*/
	
	padding:8px;
	padding-bottom:10px;
	padding-top:0px;
 }
div#News .top{
	width:206px;
	height:21px;
	
	position:absolute;
	top:-21px;
	left:0px;
	
	background-image:url(../images/border-sprite.png);
	background-position: 0px -144px;
 }
div#News .bottom{
	width:206px;
	height:17px;
	
	position:absolute;
	bottom:-17px;
	left:0px;
	
	background-image:url(../images/border-sprite.png);
	background-position: 0px -165px;
 }

/*--- FOOTER ---*/ 
div#Footer{
	width:743px;
	height:144px;
	
	background:url(../images/footer.png) no-repeat;
	/*border:#F00 1px dashed;*/
	
	text-align:center;
	vertical-align:bottom;	
	
		position:absolute;
		bottom:0px;
 }

Grazie ancora dell'aiuto che sono sicuro mi darete (almeno spero XD)
Ciao ciao

Discussione: Footer a fondo pagina

Strumenti discussione

Ricerca discussione

Visualizza

Footer a fondo pagina

Permessi di invio