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
- Le fichier à télécharger correspond au contenu brut d’un courrier électronique. de quel pays a été envoyé ce message ? - Guide
- Une erreur pouvant rendre powerpoint instable s'est produite - Forum WiFi
- Ce contenu n'est pas disponible facebook - Forum Réseaux sociaux
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.
