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:
Et voici mes css:
J'espère que quelqu'un va pouvoir m'aider.
D'avance merci beaucoup et meilleures salutations.
David
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