Image non-fixe !
Résolu
Boris333
Messages postés
1
Date d'inscription
Statut
Membre
Dernière intervention
-
arthezius Messages postés 3538 Date d'inscription Statut Membre Dernière intervention -
arthezius Messages postés 3538 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
En mettant une image de cette façon :
#image {
position: absolute;
left: 900px;
top: 1160px;
}
et:
<img id="image" src="images/bordeaux3.jpg" width="250" height="250" />
Lorsqu' on agrandit la fenêtre en hauteur = l' image est fixe
Mais on agrandissant la largeur, l' image bouge en fonction de la bordure de gauche
Je comprend qu' elle bouge en fonction de celle-ci mais comment faire pour que l' image reste fixe par rapport aux autres élèments ?
Merci
En mettant une image de cette façon :
#image {
position: absolute;
left: 900px;
top: 1160px;
}
et:
<img id="image" src="images/bordeaux3.jpg" width="250" height="250" />
Lorsqu' on agrandit la fenêtre en hauteur = l' image est fixe
Mais on agrandissant la largeur, l' image bouge en fonction de la bordure de gauche
Je comprend qu' elle bouge en fonction de celle-ci mais comment faire pour que l' image reste fixe par rapport aux autres élèments ?
Merci
A voir également:
- Image non-fixe !
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
- Reduire taille image - Guide
- Légender une image - Guide
- Image gratuite - Guide
2 réponses
Ton image est défini par rapport au bord gauche de l'écran.
Si ton contenu est centré, il est normal que l'image se retrouve décalé par rapport au contenu suivant la largeur.
Je te conseil donc de ruser.
Exemple:
Dans ce cas, l'image se retrouve décalé de 200px vers la droite par rapport au centre de l'écran.
A toi d'adapter mon exemple suivant ton cas.
En cas de besoin, hésite pas.
Si ton contenu est centré, il est normal que l'image se retrouve décalé par rapport au contenu suivant la largeur.
Je te conseil donc de ruser.
Exemple:
#image{
position:relative;
left:50%;
margin-left:200px;
}
Dans ce cas, l'image se retrouve décalé de 200px vers la droite par rapport au centre de l'écran.
A toi d'adapter mon exemple suivant ton cas.
En cas de besoin, hésite pas.
Une image qui est simplement mise au milieu d'une code html rends les éléments environnant dépendant de celle-ci et vice-versa.
En CSS, en utilisant l'attribut position en relative, on garde le même effet.
Pour le rendre indépendant des éléments environnant, il faut passer en absolute.
L'inconvénient est quand il s'agit d'une image qui se placer verticalement par rapport à un contenu variable par exemple.
Je ne sais pas précisément dans quel cas tu es.
Aurai un lien vers la page que tu développes ?
Sinon peux tu m'en dire plus sur l'environnement de l'image (ce qu'il y a autre) ?
En l'état actuelle, je n'ai pas suffisamment d'info pour t'aiguiller d'avantage.
En CSS, en utilisant l'attribut position en relative, on garde le même effet.
Pour le rendre indépendant des éléments environnant, il faut passer en absolute.
L'inconvénient est quand il s'agit d'une image qui se placer verticalement par rapport à un contenu variable par exemple.
Je ne sais pas précisément dans quel cas tu es.
Aurai un lien vers la page que tu développes ?
Sinon peux tu m'en dire plus sur l'environnement de l'image (ce qu'il y a autre) ?
En l'état actuelle, je n'ai pas suffisamment d'info pour t'aiguiller d'avantage.
Je te remercie beaucoup pour ton aide apportée !
http://www.bionysos.fr
concernant l' image représentant la France en rouge
http://www.bionysos.fr
concernant l' image représentant la France en rouge
Tu peux essayer quelques chose comme ça (vers la fin de ton code) :
L'image devrai approximativement se mettre en place. Il faudra sans jouer sur le placement de l'image et sur la largeur des textes que j'ai placé à 500px.
J'en profite pour dire que ton code est pas mal composé d'erreur, de balises qui ne servent à rien, d'autre qui ne semblent pas fermé et est assez mal construit.
En bref c'est un peu l'anarchie.
Tu devrai essayer de le simplifier et de l'organiser un peu mieux.
<div style="width:250px;height:250px;float:right;position:relative;right:0px;"> <img src="http://www.bionysos.fr" alt="" /> </div> <p align="left" style="width:500px;"> <a href="http://www.bionysos.fr"> <img src="images/verre0.jpg" width="87" height="40" border = 0/> <em><font color="#660099">Bordeaux 2009 : Un millésime magnifique</font></em> </a></p> <p align="left" style="width:500px;"> <a href="http://www.bionysos.fr"> <img src="images/verre0.jpg" width="87" height="40" border = 0/> <em><font color="#660099">Bordeaux Fête le Vin 2010 - 24/27 juin</font></em> </a></p> <p align="left" style="width:500px;"> <a href="https://www.bordeaux.com/fr/"> <img src="images/verre0.jpg" width="87" height="40" border = 0/> <em><font color="#660099">Expo photo du CIVB (3/24 décembre2012)</font></em> </a></p>
L'image devrai approximativement se mettre en place. Il faudra sans jouer sur le placement de l'image et sur la largeur des textes que j'ai placé à 500px.
J'en profite pour dire que ton code est pas mal composé d'erreur, de balises qui ne servent à rien, d'autre qui ne semblent pas fermé et est assez mal construit.
En bref c'est un peu l'anarchie.
Tu devrai essayer de le simplifier et de l'organiser un peu mieux.
Superrrrrrrrrrrrrr !!!
Merci beaucoup !
Bon maintenant d' après ce que tu me dits, il va falloir faire du ménage ;)
Malheureusement à la base je ne suis absolument pas un webmaster.... mais je m' y attache bcq.
Je commence à comprendre le code que tu m' a donné .... (pas évident tt de même)
Donc apparement le css ne me servirait à rien dans cette situation ...
Tiens je te redonne le site pour te montrer comment il est, grâce à toi ;)
Encore merci !!!
Merci beaucoup !
Bon maintenant d' après ce que tu me dits, il va falloir faire du ménage ;)
Malheureusement à la base je ne suis absolument pas un webmaster.... mais je m' y attache bcq.
Je commence à comprendre le code que tu m' a donné .... (pas évident tt de même)
Donc apparement le css ne me servirait à rien dans cette situation ...
Tiens je te redonne le site pour te montrer comment il est, grâce à toi ;)
Encore merci !!!
Cela fonctionne effectivement, l' image garde sa place parmis ce qui l' entoure lorsque je réduis ou agrandit la fenêtre.
Mais le problème est que même si l' image est bien là ou je veux en réglant "left" etc, cela me decalle tt car il me reserve quand même la place ...
<img id="image" src="images/bordeaux3.jpg" width="250" height="250" />
Pouvez-vous me dire ou cela se place t'il exactement et comment ?
Merci ...