CSS : Insérer une image en bas du site ?
Bonjour,
Je cherche un script simple en CSS qui permet de placer une image de 264px sur 517px en bas de mon site. Cette image doit être placé en bas du site, à côté du footer.
J'avais penser à ceci:
entre les balises <head> et </head> mettre :
<style type="text/css">
#logo {
right:-195px;
position:absolute;
top:850px;
z-index:1000;
}
</style>
puis entre le <body> et </body> mettre :
<img src="monimage.jpg" id="logo">
J'utilise Wordpress, et je voudrais afficher "monimage.jpg" tout en bas du site et qu'elle ne soit visible que lorsqu'on descend la scroll bar et qu'on arrive en bas de page. Je souhaiterais que l'image (un gros bonhomme de neige) soit à côté du footer sur la gauche (comme ceci : http://tinypic.com/images/goodbye.jpg (fait sous paint) ).
J'aimerais également que le code soit compatible le plus de navigateurs différents possibles (firefox, IE, safari...).
Merci :)
Je cherche un script simple en CSS qui permet de placer une image de 264px sur 517px en bas de mon site. Cette image doit être placé en bas du site, à côté du footer.
J'avais penser à ceci:
entre les balises <head> et </head> mettre :
<style type="text/css">
#logo {
right:-195px;
position:absolute;
top:850px;
z-index:1000;
}
</style>
puis entre le <body> et </body> mettre :
<img src="monimage.jpg" id="logo">
J'utilise Wordpress, et je voudrais afficher "monimage.jpg" tout en bas du site et qu'elle ne soit visible que lorsqu'on descend la scroll bar et qu'on arrive en bas de page. Je souhaiterais que l'image (un gros bonhomme de neige) soit à côté du footer sur la gauche (comme ceci : http://tinypic.com/images/goodbye.jpg (fait sous paint) ).
J'aimerais également que le code soit compatible le plus de navigateurs différents possibles (firefox, IE, safari...).
Merci :)
Configuration: Windows 7 Firefox 3.5.5
6 réponses
-
Salut !
En gros, l'image doit être collé en bas de la page ? Et tout toujours rester visible ?
Dans ce cas, il faut mettre :#logo { left:50%; position:fixed; bottom:0; z-index:1000; }
Au lieu de le décaler en bas depuis le haut, colles le en bas directement. Sinon il ne s'affichera pas de même façon suivant les résolutions d'écran.
Pour la compatibilité, je pense que tous afficheront celà très bien. C'est juste Internet Explorer qu'il faut vérifier : IE est une vraie plaie en CSS et est le seul à toujours tout afficher de travers.
-
Merci je test ça desuite !
-
J'ai un probleme, avec différente résolution d'écran le bonhomme se place pas au meme endroit ...
si un visiteur a une resolution inférieur a la mienne, il va voir le bonhomme de neige non pas a coté mais SUR le texte du footer :( -
Ah, dans ce cas, il faut effectivement mettre les positionnements en unités absolues (pixels) :
#logo {
left:1px;
position:fixed;
bottom:0px;
z-index:1000;
}
ensuite, tu peux jouer sur les "left" et "bottom" pour décaler plus ou moins.
Mais tu ne veux pas mettre l'image en float ? Afin qu'il ne se superpose jamais sur le texte ? (si c'est possible).
-
Merci le hollandais volant c'est impec' !
Bonne soirée !! -
merci !
Bonne soirée à toi aussi !
