Sujet Précédent Sujet Suivant

Positionnement absolute et <div> qui s'empilent

Résolu/Fermé
titi05 - Modifié par titi05 le 28/05/2013 à 00:00
 titi05 - 28 mai 2013 à 02:57
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

Réponse 1 / 4
sebooch Messages postés 563 Date d'inscription dimanche 25 avril 2010 Statut Membre Dernière intervention 4 janvier 2014 22
28 mai 2013 à 00:25
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 ?
0
Réponse 2 / 4
titi05
28 mai 2013 à 00:50
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.
0
Réponse 3 / 4
Utilisateur anonyme
28 mai 2013 à 01:21
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

0
Réponse 4 / 4
titi05
28 mai 2013 à 02:57
Merci à lobotoFix et sebooch ! Mon problème est résolu ! :)
0

Discussions similaires

le test d'entrée pour le cesi en alternance
sab08600 -
sab08600 -

2 réponses
erreur (#DIV/0) formule MOYENNE.SI.ENS
sara-87 -
sara-87 -

5 réponses
tests du greta
yass -
yassir -

9 réponses
comment remplacer un #div/0! par une cellule vide
zara70 -
Vaucluse -

3 réponses
Formation afpa niveau 5
trxz -
Raymond PENTIER -

5 réponses