Positionnement d'image en css et resolution

Bonjour à tous,

J'essaie de positionner une image en css via le code suivant :

#monimage {
 position : absolute;
 background:url(images/monimage.gif) ;
 width:280px;
 height:209px;
 left: 50%; 
 top: 50%;
 margin-top: 205px;
 margin-left: 104px;
}

pour le html :

<div id="monimage"></div>

J'avoue être débutant et avoir copié et adapté le code à partir d'un kit graphique pour essayer d'en comprendre les propriétés.
Sur mon pc, l'image est bien positionnée, aucun problème.
En revanche, sur une résolution de type 1440x900, l'image est décalée et du coup se superpose sur une autre.
J'ai vu sur le net qu'il existe une solution utilisant js permettant d'avoir des css dynamique. Sur les forums en questions il n'y a pas d'autres explications et après de multiples recherches je bloque.
Merci d'avance de vos conseils.

Ton problème vient du fait que ton image est positionné en absolute, c'est à dire qu'elle a une position fixe par rapport à un coin de ton écran (ou du bloc supérieur). Elle se superpose donc avec une autre image si la résolution n'est pas suffisante.

2 possibilités :
Tu acceptes qu'elles se superposent mais tu voudrais choisir laquelle passe au-dessus de laquelle ? Dans ce cas regarde du côté de z-index : http://www.zonecss.fr/style_css/feuille_css_z_index.html . A noter que l'autre image ou bloc (div) doit être positionné en absolute aussi (ou si tu ne veux pas le positionner en absolute, tu mets un position: relative; et ça marche aussi sans changer ta mise en page ^^).

Tu ne veux pas qu'elles se superposent, dans ce cas il faut trouver une autre solution que le position absolute.

P.S. : Si j'ai bien compris, tu cherches à positionner une image de fond ? Dans ce cas, sache que tu peux choisir ou positionner l'image dans ton div avec background-position : http://www.w3schools.com/css/pr_background-position.asp (anglais facilement compréhensible, c'est le tableau qui nous interresse ^^)

Merci Pod pour cette réponse rapide.
En fait le but est d'afficher deux images à droite de mon texte sans passer par un tableau. L'image pour laquelle le code est présenté dans mon 1er message doit être positionnée au dessus de la seconde, sans la chevaucher (sinon c'est très moche ^^).

La premiere image ne contient rien de spécifique hormis un lien (que je n'arrive pas à faire d'ailleurs puisque pour l'instant c'est une image de fond et que je ne sais pas encore faire ^^) , la seconde contient un champs de formulaire permettant aux internaute de laisser leur numéro de téléphone.

Le but de mon explication : la première peut être une image de fond ou non , peut importe, la seconde ne posant aucun pb peut rester en background.

Je vais de ce pas regarder les liens proposés. merci bcp.
Je pensais qu'en ayant un code valide W3C, l'affichage ne changeait pas quelque soit la config de l'internaute : erreur !!!

et avec du float:right ?

Sinon, pour l'image, je ne pense pas que la mettre en fond via CSS soit la meilleur idée, elle fait visiblement partie du contenu. Il vaudrait donc mieux la mettre dans le HTML, puis la positionner en CSS (via une class).

Bonjour Laurie-anne

Je viens d'essayer float right mais vu mon peu de connaissance sur le sujet je n'arrive pas à mes fins, je l'utilise certainement mal.
Sous ie 5 et 6 c'est catastrophique
J'ai essayer :
html :

<div id="monimage">
<img src=monimage.gif" alt="" width="280" height="209" /> 
</div>

Css :

#monimage {
position : absolute;
 width:280px;
 height:209px;
 left: 50%; 
 top: 50%;
 margin-top: 205px;
 margin-left: 104px;
}

J'ai essayer de remplacer absolute par relative, ca décale tout meme sous ie7 .
Je ne sais pas quoi faire je m'arrache les cheveux .
Modifié par mikl86 (24 Feb 2009 - 17:56)