Image non-fixe !

[Résolu/Fermé]
Signaler
Messages postés
1
Date d'inscription
jeudi 3 décembre 2009
Statut
Membre
Dernière intervention
3 décembre 2009
-
Messages postés
3538
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
-
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

2 réponses

Messages postés
3538
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
464
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.
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 ...
Messages postés
3538
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
464
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.
Messages postés
3538
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
464 > Boris333
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.
>
Messages postés
3538
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016

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 !!!
Messages postés
3538
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
464 > Boris333
Le CSS est utilisé dans ce cas précis. Le CSS est embraqué dans la balise.
<p align="left" style="width:500px;">

style="" permet d'inclure directement le CSS dans la balise <p>.

Trois manière d'utiliser le CSS.
1 - Le mettre dans un fichier .css et l'appeler avec la balise
<link href="style.css" rel="stylesheet" type="text/css" />
[...]
<p class="width:500px;"></p>

a placer entre les deux balises <head>

Le fichier CSS:
p.bloc{width:500px;}

2 - Le mettre directement entre les balises <head>
<style>
p.bloc{width:500px;}
</style>

3 - Le mettre directement dans les balises concerné
<p style="width:500px;"></p>

>
Messages postés
3538
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016

Parfait !
Merci beaucoup
Messages postés
3538
Date d'inscription
jeudi 15 mai 2008
Statut
Membre
Dernière intervention
11 septembre 2016
464 > Boris333
Mais de rien.
N'hésite pas à te renseigner sérieusement sur CSS pour concevoir correctement ton site.

Si ton problème est résolu, change le statu en résolu en haut de cette page.