Hauteur div 100% et img collée en bas de page ? [Résolu]

http://users.skynet.be/planetebleue/temp/smiley/smile_bounce.gif Salut à tous, j'ai un petit souci et comme ma recherche d'une soluce sur le Net s'est avérée infructueuse, je m'en remets donc à votre science. J'ai trois div (un header, un contenu et un pieddepage) et j'aimerai que lorsque le contenu n'est pas assez important pour couvrir toute la hauteur de la page, le pied de page qui contient une image illustrant de l'herbe (classique quoi) colle tout de même et quel que soit cette hauteur, au pas de cette page. Difficile d'expliquer plus clairement alors voici une image pour illustrer cela



J'ai essayé ceci (dans les grandes lignes) mais sans résultat…

CSS

html, body {
	height: 100%;
}

#contener {
	position: relative;
	width; 750px;
	min-height: 100%;
}
#header {
	width: 750px
	height: 65px;
}
#contenu {
	width: 750px
	height: auto;
}
#pieddepage
	position: absolute;
	background-color: #FFF;
	height: 100%;
}
#img_pdp
	background-image: url=(herbe_pdp.png);
	background-repeat:no-repeat;
	bottom: 0;
}

HTML

<div id="contener">
	<div id="header"></div>
	<div id="contenu"></div>
	<div id="pieddepage">
	<div id="img_pdp"></div>
	</div>
</div>

Une idée ?...
Modifié par dragoeco (20 Feb 2008 - 12:25)

Salut à toi zossi,

La FAQ certainement...
http://forum.alsacreations.com/faq/faq-25-Comment-coller-un-element-pied-de-page-en-bas-de-page-quel-que-soit-le-contenu-.html

Bonne journée,
Cdt,
Sylvain

http://users.skynet.be/planetebleue/temp/smiley/smile_bounce.gif Salut Sylvain (6l20=Sylvain, j'me souviens de toi ) En fait, le css que j'affiche dans le premier post m'a été largement inspiré de ce lien déjà mais je dois faire une boulette quelque part car ça marche pô lol. ça doit pourtant être une connerie mais bon, je continue mes investigation en attendant...

Quelques boulettes effectivement, je t'encourage à reprendre le tutoriel de Florent à tête reposée notamment l'étape 3, ainsi qu'à corriger un poil ta feuille css (url=(herbe_pdp.png); par exemple certaines accolades manquent...)
Je viens de refaire le tuto adapté à ta page, et ça fonctionne bien

Bon courage pour la suite, n'hésites pas à faire un tour sur openweb

Cdt,
Sylvain

http://users.skynet.be/planetebleue/temp/smiley/smile_bounce.gif En fait, j'ai rapidement taper ce code pour ne pas devoir vous faire lire l'intégralité qui est relativement long. Celui-ci est donc plutôt schématique ce qui explique les erreur, j'aurai du vous prévenir. Mais bon, tout cela n'a plus d'importance car j'ai trouvé comment procéder et ai même rectifier les erreurs tout seul comme un grand garçon Merci à ce site qui explique très simplement la procédure à suivre.

Voici le code final pour les autres :

HTML

<div id="nonfooter"> /* Tout ce qui n'est pas en pied de page*/
   <div id="contenu"></div> /* Autant de div que souhaité */
</div>
<div id="footer"> /*conteneur de pied de page*/
<div> 

CSS

html {
	height: 100%;
}
body {
	height: 100%; 
}
#nonfooter {
	position: relative;
	width:750px;
	background-color:#FFF;
	min-height: 100%; 
	height: auto !important; 
	height: 100%; 
}
* html #nonFooter {
	height: 100%;
}
div#footer {
	position:relative;
	background-image: url(img/herbe_bdp.png);
	background-repeat:no-repeat;
	width:750px;
	margin-top:-50px;
	height:50px;
}

Je l'ai testé sous IE6, IE7, FF2 et Opera 9. Il marche nikel ^^
Par contre, je n'ai pas assigné de fonction padding-bottom au id=contenu comme spécifié dans la méthode (lien cité plus haut) car avec ou sans je ne vois aucune différence et cela même si ma page est plus longue que le navigateur, le contenu n'empiète pas sur le footer. Vais encore faire quelques essai pour être sûr…
Modifié par dragoeco (20 Feb 2008 - 12:26)