Positionnement absolute et <div> qui s'empilent
Résolu
titi05
-
titi05 -
titi05 -
Bonjour,
Je souhaiterai créer une feuille CSS pour mettre en forme ma page 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 :
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 :)
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 :)
A voir également:
- Positionnement absolute et <div> qui s'empilent
- Logiciel positionnement gratuit - Guide
- Div c++ - Télécharger - Langages
- Absolute uninstaller - Télécharger - Divers Utilitaires
- Exemple test de positionnement greta - Forum Études / Formation High-Tech
- Remplacer #div/0 par vide - Forum Excel
4 réponses
Salut
Déjà, mets çà :
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é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.
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
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
