Bonjour à tous,
Je voudrais coller un footer en bas de page quelque soit la taille de la fenêtre et la longueur du texte.
Pour ça j'ai trouvé l'article suivant : http://pompage.net/pompe/pieds/ et cela fonctionne très bien avec le javascript.
Néanmoins mon site a une structure différente et je n'arrive pas à réaliser précisément ce que je souhaite.
Je m'explique avec un schéma :
<modération>Merci d'éviter les images de grande taille</>
http://www.hiboox.com/images/1007/e2463ce2.png
Comme on peut le voir j'ai un header, un footer coller en bas de la page et le "corps du site" qui est un fond qui se répète verticalement jusqu'au footer.
Le site est centré horizontalement et il possède un fond qui se répète horizontalement (le dégradé jaune / orange).
Le but étant de pouvoir coller le footer en bas de page et de répéter le fond (dégrade blanc / noir dans le corps) jusqu'à celui-ci.
Je n'y arrive pas du tout...
Voici le code html :
et le CSS :
PS : pour plus de clareté je peux heberger ces pages web
Merci d'avance de votre aide
Modifié par Snoopy17 (12 Mar 2007 - 18:56)
Je voudrais coller un footer en bas de page quelque soit la taille de la fenêtre et la longueur du texte.
Pour ça j'ai trouvé l'article suivant : http://pompage.net/pompe/pieds/ et cela fonctionne très bien avec le javascript.
Néanmoins mon site a une structure différente et je n'arrive pas à réaliser précisément ce que je souhaite.
Je m'explique avec un schéma :
<modération>Merci d'éviter les images de grande taille</>
http://www.hiboox.com/images/1007/e2463ce2.png
Comme on peut le voir j'ai un header, un footer coller en bas de la page et le "corps du site" qui est un fond qui se répète verticalement jusqu'au footer.
Le site est centré horizontalement et il possède un fond qui se répète horizontalement (le dégradé jaune / orange).
Le but étant de pouvoir coller le footer en bas de page et de répéter le fond (dégrade blanc / noir dans le corps) jusqu'à celui-ci.
Je n'y arrive pas du tout...
Voici le code 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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titre</title>
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
<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('content').offsetHeight;
var footerElement = document.getElementById('footer');
var footerHeight = footerElement.offsetHeight;
if (windowHeight - (contentHeight + footerHeight) >= 0) {
footerElement.style.position = 'relative';
footerElement.style.top = (windowHeight - (contentHeight + footerHeight)) + 'px';
}
else {
footerElement.style.position = 'static';
}
}
}
}
window.onload = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}
//-->
</script>
</head>
<body>
<!-- centrage de la page -->
<div id="page">
<!-- le header -->
<div id="header"><img src="images/header.png" alt="header" /></div>
<!-- le corps -->
<div id="corps">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam rutrum commodo elit. Cras in libero. Donec vitae orci vel metus dictum ultrices. Proin dolor augue, ultrices id, elementum et, consequat nec, nisi. Curabitur purus eros, commodo quis, mattis in, lacinia placerat, lacus. Donec consequat mauris luctus ante. In nulla urna, consequat tincidunt, tristique quis, posuere et, lectus. Suspendisse dignissim fringilla enim. Nulla non dui nec justo tristique tincidunt. Fusce mollis placerat libero. Sed tortor. Curabitur nibh pede, convallis vestibulum, blandit cursus, molestie quis, turpis. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris ornare lorem ut arcu.</p>
</div>
<!-- fin du corps -->
<!-- le footer -->
<div id="footer"></div>
</div>
<!-- fin du centrage de la page -->
</body>
</html>
et le CSS :
/* ------ GENERAL ------ */
* { margin:0px; padding:0px; }
body {
text-align:center;
font:11px Tahoma, Geneva, Arial, Helvetica, sans-serif;
background:url(images/fond-page.png) repeat-x;
background-color:#1a1f22;
}
#page {
width:990px;
margin:0px auto;
text-align:left;
background:url(images/fond-site.png) repeat-y;
background-color:#CCCCCC;
}
/* ------ HEADER ------ */
#header {
width:990px;
height:238px;
}
/* ------ CORPS ------ */
#corps {
width:990px;
height:auto;
float:left;
display:inline;
}
/* ------ FOOTER ------ */
#footer {
background:url(footer.png) no-repeat;
width:990px;
height:96px;
position:relative;
bottom:0;
}PS : pour plus de clareté je peux heberger ces pages web
Merci d'avance de votre aide
Modifié par Snoopy17 (12 Mar 2007 - 18:56)
?
