Contenu variable -> footer instable [CSS]
Résolu
ckikiahdisa
Messages postés
41
Statut
Membre
-
ckikiahdisa Messages postés 41 Statut Membre -
ckikiahdisa Messages postés 41 Statut Membre -
Bonjour, je fais appel aux codeurs fou de CSS, j'ai un problème de positionnement de mon footer (pied de page), je n'arrive pas à le placer en dessous de mon contenu qui n'est pas fixe.
#conteneur
{
width:970px;
height:auto;
position: relative;
text-align: left;
margin-right:auto;
margin-left:auto;
margin-top:0px;
margin-bottom:0px;
}
#footer
{
width:970px;
height:60px;
position: absolute;
left: 0px;
bottom:0px;
margin:0px;
}
Je pense qu'il n'en faut pas plus pour montrer mon problème.
Puisque la hauteur de "conteneur" varie, je l'ai mis à auto, et c'est cela qui doit poser problème car le bottom:0px ne fonctionne pas.
J'attend vos lumières ! merki
#conteneur
{
width:970px;
height:auto;
position: relative;
text-align: left;
margin-right:auto;
margin-left:auto;
margin-top:0px;
margin-bottom:0px;
}
#footer
{
width:970px;
height:60px;
position: absolute;
left: 0px;
bottom:0px;
margin:0px;
}
Je pense qu'il n'en faut pas plus pour montrer mon problème.
Puisque la hauteur de "conteneur" varie, je l'ai mis à auto, et c'est cela qui doit poser problème car le bottom:0px ne fonctionne pas.
J'attend vos lumières ! merki
A voir également:
- Contenu variable -> footer instable [CSS]
- Word a trouvé du contenu illisible - Guide
- Fusionner deux cellules excel en gardant le contenu - Guide
- Contenu wmg ✓ - Forum TV & Vidéo
- Ce contenu n'est pas disponible facebook - Forum Réseaux sociaux
- Contenu multimedia messenger disparu - Forum Facebook Messenger
8 réponses
footer : position relative, sous reserve que le conteneur soit fermé avant l'ouverture du pied de page
jpeux pas tout te mettre ca dépasse le milliers.. lol
CSS
body
{
text-align: center ;
}
body .contenu2
{
width:970px;
height:auto;
position: relative;
text-align: left;
margin-right:auto;
margin-left:auto;
margin-top:0px;
margin-bottom:0px;
padding:0px;
}
/* Haut du site */
.contenu2 .banniere
{
width:970px;
height:170px;
position: absolute;
left: 0px;
top: 0px;
background: url("img/banniere2.png");
background-color:#9abefe;
margin:0px;
}
.....
/* bas du site */
.contenu2 .bas
{
width:970px;
height:60px;
position: relative;
left: 0px;
bottom:0px;
background-color:#9abefe;
margin:0px;
}
.bas .information
{
position: absolute;
left: 340px;
top: 5px;
margin:0px;
}
.bas .copyright
{
position: absolute;
left: 320px;
top: 30px;
margin:0px;
}
HTML
....
</head>
<body onLoad="form_load();">
<div class="contenu2">
<div class="banniere">
<h5 class="titre2">Cherchez, trouver, vendez GRATUITEMENT !</h5>
<div class="pub1"> <img src="img/pub1.png" alt="gg" /></div>
<ul class="menu">
<li class="menu1" tabindex="360"><a href="TotalAnnonce.php">Voir les annonces</a></li>
<li class="menu2" tabindex="370"><a href="SauvegardeAnnonce.php">Mes annonces sauvegardées</a></li>
<li class="menu3" tabindex="380"><a href="creer_annonce.php">Créer une annonce</a></li>
<li class="menu4" tabindex="390"><a href="Profil.php">Mon compte</a></li>
</ul>
</div>
........
<div class="bas">
<p class="information">
<a href="">Condition d'utilisation |</a>
<a href="">Qui sommes-nous |</a>
<a href=""> Nous contacter</a>
</p>
<p class="copyright">
Copyright © 2007 labonneannonce.com Tous droits réservés. by PowerPC
</p>
</div>
</div>
</body>
</html>
CSS
body
{
text-align: center ;
}
body .contenu2
{
width:970px;
height:auto;
position: relative;
text-align: left;
margin-right:auto;
margin-left:auto;
margin-top:0px;
margin-bottom:0px;
padding:0px;
}
/* Haut du site */
.contenu2 .banniere
{
width:970px;
height:170px;
position: absolute;
left: 0px;
top: 0px;
background: url("img/banniere2.png");
background-color:#9abefe;
margin:0px;
}
.....
/* bas du site */
.contenu2 .bas
{
width:970px;
height:60px;
position: relative;
left: 0px;
bottom:0px;
background-color:#9abefe;
margin:0px;
}
.bas .information
{
position: absolute;
left: 340px;
top: 5px;
margin:0px;
}
.bas .copyright
{
position: absolute;
left: 320px;
top: 30px;
margin:0px;
}
HTML
....
</head>
<body onLoad="form_load();">
<div class="contenu2">
<div class="banniere">
<h5 class="titre2">Cherchez, trouver, vendez GRATUITEMENT !</h5>
<div class="pub1"> <img src="img/pub1.png" alt="gg" /></div>
<ul class="menu">
<li class="menu1" tabindex="360"><a href="TotalAnnonce.php">Voir les annonces</a></li>
<li class="menu2" tabindex="370"><a href="SauvegardeAnnonce.php">Mes annonces sauvegardées</a></li>
<li class="menu3" tabindex="380"><a href="creer_annonce.php">Créer une annonce</a></li>
<li class="menu4" tabindex="390"><a href="Profil.php">Mon compte</a></li>
</ul>
</div>
........
<div class="bas">
<p class="information">
<a href="">Condition d'utilisation |</a>
<a href="">Qui sommes-nous |</a>
<a href=""> Nous contacter</a>
</p>
<p class="copyright">
Copyright © 2007 labonneannonce.com Tous droits réservés. by PowerPC
</p>
</div>
</div>
</body>
</html>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
salut,
tu n'aurais pas une version en ligne par hasard ?
tu veux que le footer soit toujours à la même hauteur ou juste qu'il soit en dessous du contenu ?
si c'est la deuxième il vaudrait mieux laisser jouer le positionnement normal.
tu n'aurais pas une version en ligne par hasard ?
tu veux que le footer soit toujours à la même hauteur ou juste qu'il soit en dessous du contenu ?
si c'est la deuxième il vaudrait mieux laisser jouer le positionnement normal.
c'est la deuxiemme solution, que le footer soit toujours collé au bas du site, quelque soit la longueur du conteneur.
c'est vrai que le positionnement normal serai la meilleur solution mais le pb c'est que j'ai travaillé que en position absolute sur tout le reste du site...
c'est vrai que le positionnement normal serai la meilleur solution mais le pb c'est que j'ai travaillé que en position absolute sur tout le reste du site...
