Problème position footer

maskangel · 6 Mars 2006

Bonjour,

Je commence vraiment à tourner en rond et à limite péter un plomb avec la position que j'essaie de donner à mon footer !

Mon but est d'avoir toujours mon footer en bas de l'écran. Je me suis donc basé sur le script du site pompage.net: http://www.pompage.net/pompe/pieds

Ce que je n'arrive pas à comprendre, c'est pourquoi mon footer dépasse de la hauteur de la fenêtre. De plus, il la dépasse de sa propre hauteur (mon footer fait 71px et il est en dessous de la page de 71px).

Voici donc mon code html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>
<link href="test.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
  <!--
  function getWindowHeight() {
 	 var windowHeight = 0;
 	 if (typeof(window.innerHeight) == 'number') {
    windowHeight = window.innerHeight;
 	 }
 	 else {
    if (document.documentElement && document.documentElement.clientHeight) {
   	 windowHeight = document.documentElement.clientHeight;
    }
    else {
   	 if (document.body && document.body.clientHeight) {
      windowHeight = document.body.clientHeight;
   	 }
    }
 	 }
 	 return windowHeight;
  }
  function setFooter() {
 	 if (document.getElementById) {
    var windowHeight = getWindowHeight();
    if (windowHeight > 0) {
   	 var contentHeight = document.getElementById('page').offsetHeight;
   	 var footerElement = document.getElementById('footer');
   	 var footerHeight  = footerElement.offsetHeight;
   	 if (windowHeight - (contentHeight + footerHeight) >= 0) {
      footerElement.style.position = 'relative';
    alert (windowHeight);
    alert (contentHeight);
    alert ((windowHeight - (contentHeight + footerHeight)) + 'px');
      footerElement.style.top = (windowHeight - (contentHeight + footerHeight)) + 'px';
   	 }
   	 else {
      footerElement.style.position = 'static';
   	 }
    }
 	 }
  }
  window.onload = function() {
 	 setFooter();
  }
  window.onresize = function() {
 	 setFooter();
  }
  //-->
  </script>
</head>

<body>
  <div id="page">
 	 <div id="headercentre">logo</div>
 	 <div id="headerdroite">header droite</a>
 	 </div>
 	 <div id="navigation">navigation
 	 </div>
       	 <div id="centre">
    <div class="accroche-home">
   	 <p>accroche 1<br />
        <a href="#" target="_blank">En savoir plus…</a></p>
    </div>
    <div class="accroche-home">
   	 <p>accroche 2<br />
        <a href="#" target="_blank">En savoir plus…</a></p>
    </div>
 	 </div>
       	 <div id="droite">droite</div>
  </div>
 	 <div id="footer">footer</div>
</body>
</html>

Et voici mes css:

html, body {
	color: #515151;
	margin: 0;
	padding: 0;
	border: 0;
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	background-image:url(bkgrnd.gif);
	background-repeat:repeat-y;
	background-position: center;
	height: 100%;
	}

p {
	text-align: justify;
	margin: 0
	}


/* Mise en page */

#page {
	margin: 0 auto;
	width: 768px;
	min-height: 100%;
	height: 100%;
	voice-family: "\"}\"";
	voice-family: inherit;
	height: auto;
	}
html>body #page {
	height: auto;
    }	
* html #page {
	height: 100%
	}

#headercentre {
	float: left;
	width: 616px;
	height: 50px
	}

#headerdroite {
	float: right;
	width: 147px;
	margin-top: 10px
	}

#navigation {
	background-color: #00b053;
	width: 100%;
	height: 47px;
	clear: both
	}

#centre {
	float: left;
	width: 616px
	}

#droite {
	float: right;
	width: 147px;
	padding: 0;
	margin-top: 10px;
	}

#footer {
	background-color: #0000FF;
	position: relative;
	width: 768px;
	height: 71px;
	margin: 10px auto 0 auto;
	clear: both
	}

.accroche-home {
	float: left;
	width: 302px;
	color: #FFF;
	background-color: #757575;
	margin: 1px 1px 0 0;
	padding: 0
	}

J'espère que quelqu'un va pouvoir m'aider.

D'avance merci beaucoup et meilleures salutations.

David

jeanpierre949 · 7 Mars 2006

tu veux dire qu'il y a une marge de 71px entre le bas du corps et le footer ? le footer est decollé quoi

Connexion

Problème position footer

Sujets conseillés

maskangel

jeanpierre949

Veuillez vous connecter pour commenter

Parcourir

Activité