[RESOLU] Superposition d'image

Bonsoir,

pour un projet, je dois superposé deux div contenant chacune une image.
Sous FF pas de soucis, par contre, sous IE, les deux images sont cote à cote....

voici mon code :

<div class="Image1">
		<img src="image1.png"/>
		<div class="Image2">
			<img src="image2.png">
		</div>
	</div>


<style>
.Image1 {
	width:640px;
	height:400px;
	position:absolute;
	top:0;
	z-index:2;
	}
  
.Image2 {
	margin-top:0;
	width:640px;
	height:400px;
	position:absolute;
	z-index:-1;
	top:0;
 }
 </style>

merci d'avance

Edit : mise en conformité du post avec les règles du Forum!
Modifié par drf14 (09 Apr 2009 - 09:26)

As-tu essayé un left:0; sur tes 2 DIV ?
Sinon, essaye en mettant tes images en tant que background-image sur tes div plutot qu'avec les balises IMG.
Modifié par Javanight (09 Apr 2009 - 00:45)

Et ben non je n'y avait meme pas penser!!! Et effectivement maintenant ça s'affiche comme je le souhaite...

Merci à JavaNight et bonne soirée

Ravi d'avoir pu aidé
En revanche, pense à mettre un   dans tes div si tu veux que ton code soit valide. Les balises vide ne le sont pas. Une autre methode consiste a mettre un texte, genre "Image $nom_de_ton_image" dans le div, et dans le css mettre un padding-left:-1000em pour cacher le texte.

Merci pour le conseil! Mais j'ai supprimer volontairement tout ce qui n'etait pas indispensable pour résoudre mon problème lors de l'écriture du message!

Hello drf14 et bienvenue sur le forum ,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace après le crochet ouvrant).



Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

Bonne continuation

Re-salut,

sacapuss a écrit :
peux-tu mettre "resolu", si tu consideres que ton probleme est resolu ?

Modérateur ! Sors de ce corps !

Javanight a écrit :
As-tu essayé un left:0; sur tes 2 DIV ?
Sinon, essaye en mettant tes images en tant que background-image sur tes div plutot qu'avec les balises IMG.

Hum... la réponse technique à une question est une chose, mais sur le forum d'Alsacréations on s'intéresse surtout aux standards du web et à l'accessibilité !

Du coup on part du principe que le contenu (l'information) doit se trouver dans le code html et que la présentation doit se trouver dans le code css (en précisant que ce dernier peut-être désactivé/indisponible et est donc facultatif... tout comme l'est, par exemple, JavaScript).

En partant de ce postulat cela devient très facile de répondre : "est-ce que mon image contient une information (auquel cas elle doit se trouver dans le code html avec un attribut alt pertinent qui servira d'alternative textuelle en cas d'images désactivées/indisponibles) ? Ou bien est-ce que mon image est purement décorative (auquel cas elle devrait être spécifiée dans le code css -sauf dans certains cas bien particuliers comme par exemple cette astuce- et à priori uniquement parce qu'on ne sait pas faire autrement ) ?

Bonjour à tous et merci de vos réponse!

Effectivement, mon image est très importante, elle se situe donc directement dans le code HTML! Les balises alt, width, height, class,... sont remplis dans ma version complète du code. Je rappelle qu'ici j'ai simplement posté une version simplifié du code (avec le css intégré) pour cerner directement le problème!!!!

a écrit :
bienvenue sur le forum

Merci

Bonne journée à tous

Ps : je n'est pas trouvé comment passé le post en résolu donc j'ai simplement modifier le nom!

drf14 a écrit :
Ps : je n'est pas trouvé comment passé le post en résolu donc j'ai simplement modifier le nom!

C'est exactement ce qu'il fallait faire.