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
Configuration: Windows XP Firefox 2.0.0.11
8 réponses
-
ca ne fonctionne pas :(
a noter que le <div class"footer"> se situe dans le <div class"conteneur"> -
sors le.
PS : avec un code complet, c'est tellement mieux :'( -
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> -
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.
-
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... -
salut,
regarde ce gabarit chez Alsacréations.
-
aprés une bonne prise de tete, j'ai tout replacer en position static et ca marche impec, merci tout de meme pour vos conseil.
c'est bien pratique position absolue mais ca pose généralement problème par la suite.
