Sujet Précédent Sujet Suivant

Image non-fixe !

Résolu/Fermé
Boris333 Messages postés 1 Date d'inscription jeudi 3 décembre 2009 Statut Membre Dernière intervention 3 décembre 2009 - 3 déc. 2009 à 20:00
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 - 4 déc. 2009 à 21:47
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
A voir également:

2 réponses

Réponse 1 / 2
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
3 déc. 2009 à 21:23
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: 
#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.
0
Boris333
3 déc. 2009 à 23:27
Bonjour,

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 ...
0
Réponse 2 / 2
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
3 déc. 2009 à 23:36
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.
0
Boris333
3 déc. 2009 à 23:42
Je te remercie beaucoup pour ton aide apportée !

http://www.bionysos.fr

concernant l' image représentant la France en rouge
0
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475 > Boris333
4 déc. 2009 à 00:24
Tu souhaites la placer où précisément ?
0
Boris333 > arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016
4 déc. 2009 à 01:49
ENTRE:

Bordeaux 2009 : Un millésime magnifique
Bordeaux Fête le Vin 2010 - 24/27 juin
Expo photo du CIVB (3/24 décembre2012)

ET:

les logos "paypal" et "cnil"

Merci
0
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475 > Boris333
4 déc. 2009 à 02:45
Tu peux essayer quelques chose comme ça (vers la fin de ton code) : 
<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.
0
Boris333 > arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016
4 déc. 2009 à 13:25
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 !!!
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
Comment enlever le rouge sur la photo svp ?
lucas0909 -
Benji -

20 réponses