28220 sujets

CSS et mise en forme, CSS3

Image collée en bas du navigateur

bonjour à tous,

j'aimerai savoir comment (si cela est possible) faut il faire pour avoir une image en bas de page, sur toute la largeur.

cette image doit toujours coller au bas du navigateur, tout en permettant au reste du contenu de la page de s'afficher. peut importe la taille du site en longueur, elle doit coller en bas.

j'essaie sans succes, l'image reste bien en bas du navigateur, mais elle ne bouge pas quand le contenu du site s'allonge.

merci pour votre aide
voici un bout du code :



<body>

    <div id="content">

        <div id="menu"></div>

        <div id="contenu1"></div>

        
    </div>

    <div id="footer"></div>

</body>


#content {
position:absolute;
width:580px;
height:100%;
background: url(../images/image.gif) repeat-y;
}

#menu {
position:relative;
padding:0;
width:580px;
height:217px;
background: url(../images/imagemenu.gif) no-repeat;
}

#contenu1 {
position: relative;
background: url(../images/contenu1.gif) repeat-y;
text-align:center;
width:580px;
margin:0px auto;
padding:0px;
}


#footer {
position: absolute;
width:100%;
bottom:0px;
height: 56px;
background: url(../images/footer.gif) no-repeat;
}
Non tu n'utilises pas la bonne méthode.
Il faut que tu définisse ton footer comme un bloc normal faisant toute la largeur.
Tu mets ce bloc en dernier dans ton code html. Si le contenu n'est pas assez grand il ne collera pas au pied mais dès que le contenu va grandir, il restera collé au pied de page.

A moins que tu ne cherches quelque chose qui reste toujours au pied du navigateur (pas de la page) même quand le visiteur scroll ? C'est possible mais pas en css je crois, plutôt javascript (et d'ailleurs c'est assez chiant de voir ces trucs la qui te suivent partout....)
merci pour ton aide lucky,

pour te répondre, non, je ne souhaite pas que le footer ressemble a un de ces trucs chiants qui te suivent partout Smiley langue je veux juste que le footer se trouve à sa place de footer càd tout en bas. et cela meme quand le contenu du site rempli toute la page et plus.

ce qui se passe actuellement, avec le code que j'ai donné, c'est que lorsque le contenu du site (div contenu1) est vide, le footer se trouve bien en bas de page, et c nickel... mais lorsqu'il y a du contenu (assez pour que le scroll soit actif) le footer se trouve toujours en bas de page, mais pas au dessous du contenu. il se met au milieu et tout ce qu'il y a en dessous de la page affichée est aussi en dessous du footer.

+ mon footer est plus large que le reste du site. d'ou les 100/100 pour la largeur (il fait 2000px de large)

voici une representation graphique de mon probleme :

http://i158.exs.cx/img158/4895/sanstitre15sk.png
Modifié par dublin (20 Mar 2005 - 11:08)
Si ça peut t'aider, voici mon pied de page :
.pied {
	clear: both;
	width:100%;
	text-align: center;
	background-color: #3f6292;
	border-top: 1px solid #91a0ae;
	margin-top: 10px;
	padding-bottom : 7px;
}

Un bloc tout simple sans attribut de position.
Bon lorsqu'il n'ya pas de contenu, il se positionne juste en dessous le bloc du dessus. Dès que le contenu augmente verticalement, ça se colle en bas.
Tu peux voir le resultat : http://www.stationlinux.org
Comme le menu est long, le footer est toujours en bas.
Il faut pas que tu le positionne en relatif ou en absolu. Tu met rien et si tu le met en dessous des autres blocs de contenu dans ton code html il va se faire pousser par le contenu du dessus.
Sujet clos
Aller à