Positionnement absolute et <div> qui s'empilent [Résolu/Fermé]

Signaler
-
 titi05 -
Bonjour,

Je souhaiterai créer une feuille CSS pour mettre en forme ma page HTML :

<html>
<head></head>
<body>
<header>Bienvenue sur le site</header>
<div id="sous_header">Nous somme le xx/xx/xxx, il est xx:xx</div>
<div id="contenu">
<h1>Bienvenue</h1>
Bla bla bla
</div>
<footer>Pied de page</footer>
</body>
</html>



Je souhaiterai que le header soit collé tout en haut (= left, right et top à 0px), de même pour le footer en bas, le sous header une 20aine de px en dessous du header avec left et right à 0px et la div de contenu qui s'adapte à la hauteur du texte contenu en restant placée entre le sous header et le footer.

J'ai mis en place ce css :

header {
 position: absolute;
 z-index: 1000;
 left: 0px;
 top: 0px;
 right: 0px;
 background-image: url(header_background.png);
 background-repeat: repeat-x;
 min-width:1280px;
 height:112px;
}
#sous_header {
 background-image: url(sheader_background.png);
  background-repeat: repeat-x;
  height: 47px;
  position: absolute;
  left: 0px;
  top: 118px;
  right: 0px;
  padding: 5px;
  text-align:center;
  color:#FFFFFF;
}
#header_title {
 position: relative;
 left: 10%;
 top: 10%;
 float:left;
}
#footer {
 position: absolute;
 height: 246px;
 left: 0px;
 right: 0px;
 bottom:0px;
 background-image: url(footer_background.png);
 background-repeat: repeat-x;
}
#content {
 position:relative;
 border: thin solid #999;
 top: 200px;
 box-shadow:2px 2px 8px black;
 margin:20px;
 padding: 0 20px 0px 20px;



Sauf que quand je remplie ma div de contenu, elle fini par passer sous le footer ! Je pense qu'il y a un problème au niveau des valeur de "position" en CSS mais là je n'arrive plus à rien. J'espère que quelqu'un poourra m'aider !

D'avance merci :)

4 réponses

Messages postés
563
Date d'inscription
dimanche 25 avril 2010
Statut
Membre
Dernière intervention
4 janvier 2014
21
Salut

Déjà, mets çà :
body { margin: 0; padding: 0;} 


Comme cela, ta page sera collée au bord, pas besoin de left, etc... à 0px.

Ensuite tu as #footer dans ton css, alors que la balise c'est <footer>, donc enlève le # dans le css.

Ton footer doit être fixe ou pas ?
D'abord merci de ta réponse ! :)

Pour le #footer c'est que j'avais fait des tests avec une <div id="footer"> c'est une petite erreur de recopie :)

J'aimerai que mon footer soit collé tout en bas de la page, comme sur CCM, et qu'il soit donc visible que lorsque l'on as scrollé la page tout en bas.

Bonsoir,

moi personnellement je me sers peu de la position absolue ( mais ca arrive ^^) et je préfere la relative. Si je place en absolue très souvent cela se trouve à l'intérieur d'un bloc en relative. Pourquoi car sinon si on zoom ou dézoom ou que le site est vu sur un autres écran, tout fout le camps.


pour le footer enlever absolute et il sera en bas

Merci à lobotoFix et sebooch ! Mon problème est résolu ! :)