28172 sujets

CSS et mise en forme, CSS3

[Résolu] Image ancrée en pied de page (body)

Bonjour à tous !

J'ai bien regardé sur le forum, mais je n'ai pas trouvé la solution.
Volà mon pb : je souhaiterai avoir un background image attaché en pied de page et j'y arrive pas.

Voila mon css pour le body :
			body {
			margin: 0;
			padding: 20px 0 20px 0;
			font:80% Verdana, "Trebuchet MS", sans-serif;
			background: url(images/fond_site.png) left bottom no-repeat #dee0e3;
			color:#9b9b9b;
			text-align: center;
			}


Mais si l'on regarde la page, l'image se place bien en bas du contenu mais pas en pied de page. Est-ce qu'il existe une possibilité ?

Merci de votre aide.

La page en question : http://www.gwendallmavic.fr/client/fleurs/index.html
Modifié par Gwendall (29 Aug 2008 - 10:51)
Hello Smiley smile

Pour arriver au résultat, tu dois étirer <body> à la hauteur de la fenêtre, et non à la hauteur donnée par le contenu (en appliquant height:100% à body et html). Problème, le padding-top que tu as passé à <body> va produire une scrollbar verticale pour afficher les 20px restants.

Il existe 2 solutions plus fiables, qui en plus permettront d'afficher l'image au même endroit quelque soit la résolution de l'utilisateur (ce qui n'est pas le cas si tu passes par <body> ou un autre conteneur avec une largeur fluide) :

1°) Créer une nouvelle <div> plus large qui englobe tout le design, et qui contiendra l'image en background.

XHTML

<body>

     <div id="global">

          [...]

     </div>

</body>

CSS

html, body {
[b]height:100%;[/b] }

div#global {
[b]min-height:100%;[/b]
[b]width:990px;[/b] /* > 770px */
margin:0 auto;
background:transparent url(images/fond_site.png) no-repeat [b]0% 100%[/b]; }

/*** Pour IE6 via les commentaires conditionnels ***/

div#global {
height:100%; /* Simule le min-height */}

2°) Toujours avec une <div> globale, tu utilises une nouvelle boite placée absolument en bas à gauche du parent :

XHTML

<body>

     <div id="global">

          <div id="deco"></div>

          [...]

     </div>

</body>

CSS

html, body {
[b]height:100%;[/b] }

div#global {
[b]min-height:100%;[/b]
[b]width:770px;[/b]
[b]position:relative;[/b]
margin:0 auto; }

div#deco {
width:...px; /* Largeur de l'image */
height:...px; /* Hauteur de l'image */
background:transparent url(images/fond_site.png) no-repeat;
position:absolute;
bottom:0;
left:-200px; /* Pour faire dépasser */ }

/*** Pour IE6 via les commentaires conditionnels ***/

div#global {
height:100%; /* Simule le min-height */}


Pour cette solution, #global se charge de faire le centrage horizontal de tous les conteneurs enfants. Pour optimiser ton code tu peux remplacer tous les width:770px et margin:0 auto de tes conteneurs par width:100%.

J'ai une préférence pour la 2ème, mais la 1ère est (un peu) moins longue à implémenter dans ton cas.

Bon courage Smiley cligne
Modifié par BeliG (29 Aug 2008 - 09:20)
a écrit :
De plus, #global se charge de faire le centrage horizontal, pour optimiser ton code tu peux remplacer tous les width:770px et margin:0 auto de tes conteneurs par width:100%.


Ou mieux juste les dégager ... pas besoin de ce width: 100%. Smiley ravi
a écrit :
Ou mieux juste les dégager ... pas besoin de ce width: 100%. Smiley ravi

J'ai eu plusieurs fois des problèmes avec des boites positionnées absolument dans un conteneur sans largeur définie (mais enfant d'une <div> globale).

Je ne sais pas si c'est très clair, mais je suis d'avis qu'il ne faut pas toucher à ce width:100%...
Un grand Merci Belig !

En effet, ça marche super bien avec la 2ème version.
J'ai pris celle-ci car j'en suis au tout début du site.
Donc autant partir sur de bonne base.

L'effet est d'autant plus sympa que l'image passe au dessus du graphisme principal.
Il me reste plus qu'à modifier légèrement l'image pour qu'elle n'empiète pas sur le texte principal.

Chapeau !

Smiley cligne )
a écrit :
J'ai eu plusieurs fois des problèmes avec des boites positionnées absolument dans un conteneur sans largeur définie (mais enfant d'une <div> globale).

Je ne sais pas si c'est très clair, mais je suis d'avis qu'il ne faut pas toucher à ce width:100%...


Oops ... en effet, l'élément étant positionné en absolute il ne prend pas par défaut la taille de son parent. Smiley smile
Gwendall a écrit :
L'effet est d'autant plus sympa que l'image passe au dessus du graphisme principal.
Si plus tard tu penses qu'il serait mieux que l'image passe en dessous du design tu pourras régler ça avec les z-index. Tiens au courant si tu veux plus d'infos Smiley cligne

Gwendall a écrit :

Il me reste plus qu'à modifier légèrement l'image pour qu'elle n'empiète pas sur le texte principal.
Ou alors augmenter la valeur négative (celle qui règle le positionnement horizontal) donnée à #deco.

A plus Smiley smile
Sujet clos
Aller à