Comment faire en sorte qu'un div soit "collé" en bas de la page
sabsab
-
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
Bonjour, voivci mon problème :
J'aimerai que mon div soit en bas de ma page, un peu comme un pied de page, et qu'il n'apparaisse que lorsque la fin de la page apparaît à l'écran (en position:absolute;bottom:0px en fait).
Après de nombreuses recherches, j'ai vu qu'il fallait mettre position:relative la balise source de mon div.pied de page pour que le code fonctionne (désolé si je ne suis pas très claire).
Sauf que dans mon cas, mon div se met tout en haut de ma page et on remarque de petites marges sur les côtés, affreuses. Mise à part ces petites marges dont je me passerait volontiers, il semble que bottom:0px ne fonctionne pas.
Quelqu'un aurait-il une solution ?
Voici mon code HTML :
<body>
<div class=page>
<?php include("menu.php"); ?>
<div class=contenu>
<div class=matchs>
<h1>Les matchs à venir</h1>
</div>
<div class=actus>
<h1> Actualités</h1>
</div>
<div class=pied>
</div>
</div>
<?php include("bas.php"); ?>
</body>
Voici mon code CSS:
div.contenu{position:relative;top:60px;bottom:40px;right:0px;left:0px;padding:0px}
div.pied{position:absolute;bottom:0px;height:200px;left:0px;right:0px;margin:0px;
background-color:#3F2827;opacity:0.6;z-index:3;}
J'aimerai que mon div soit en bas de ma page, un peu comme un pied de page, et qu'il n'apparaisse que lorsque la fin de la page apparaît à l'écran (en position:absolute;bottom:0px en fait).
Après de nombreuses recherches, j'ai vu qu'il fallait mettre position:relative la balise source de mon div.pied de page pour que le code fonctionne (désolé si je ne suis pas très claire).
Sauf que dans mon cas, mon div se met tout en haut de ma page et on remarque de petites marges sur les côtés, affreuses. Mise à part ces petites marges dont je me passerait volontiers, il semble que bottom:0px ne fonctionne pas.
Quelqu'un aurait-il une solution ?
Voici mon code HTML :
<body>
<div class=page>
<?php include("menu.php"); ?>
<div class=contenu>
<div class=matchs>
<h1>Les matchs à venir</h1>
</div>
<div class=actus>
<h1> Actualités</h1>
</div>
<div class=pied>
</div>
</div>
<?php include("bas.php"); ?>
</body>
Voici mon code CSS:
div.contenu{position:relative;top:60px;bottom:40px;right:0px;left:0px;padding:0px}
div.pied{position:absolute;bottom:0px;height:200px;left:0px;right:0px;margin:0px;
background-color:#3F2827;opacity:0.6;z-index:3;}
A voir également:
- Comment faire en sorte qu'un div soit "collé" en bas de la page
- Comment supprimer une page sur word - Guide
- Mettre google en page d'accueil - Guide
- Comment imprimer un tableau excel sur une seule page - Guide
- Traduire une page en français - Guide
- Remettre un pc en sortie d'usine - Guide
1 réponse
Salut
déjà ton code html n'est pas correct
oubli des guillemets aux class
<div class="page">
ensuite dans tes imbrications de div tu as une div non fermée ( </div> manquante) ce qui peux générer des erreurs d'affichage
ensuite mets ton div pied en dernier et position relative comme tout le reste et ce sera collé en bas
déjà ton code html n'est pas correct
oubli des guillemets aux class
<div class="page">
ensuite dans tes imbrications de div tu as une div non fermée ( </div> manquante) ce qui peux générer des erreurs d'affichage
ensuite mets ton div pied en dernier et position relative comme tout le reste et ce sera collé en bas
