Bonsoir,

J'ai suivi un tuto sur le net pour ajouter une ombre à une de mes images. Tuto : http://www.alistapart.com/articles/cssdropshadows/

J'ai ensuite eu besoin de superposer 2 images (jpg + png transparent). Le problème c'est que je suis perdu. A force de faire trop de manip je n'arrive pas à concorder les styles css.

Mes codes :

<div id="b_pages">
		<div class="img-shadow">
		<div id="Layer1" style="position:absolute; width:887px; height:326px; z-index:1">
			<img name="Fond" src="styles/images/index_fond.jpg" width="887" height="326" alt="">
		</div>
		<div id="Layer2" style="position:absolute; width:887px; height:326px; z-index:2">
			<?php echo "<img name=\"Drapeau\" src=\"styles/images/$lang/i_flag.png\" width=\"887\" height=\"326\" alt=\"\">"; ?> 
		</div>
		</div>
	</div>

Le *.css

#b_pages
{
	width: 900px;
	margin-bottom: 10px;
	margin: auto;
}

.img-shadow {
  float:left;
  background: url("images/shadowAlpha.png") no-repeat bottom right !important;
  background: url("images/shadow.gif") no-repeat bottom right;
  margin: 10px 0 0 10px !important;
  margin: 10px 0 0 5px;
  }

.img-shadow img {
  display: block;
  position: relative;
  border: 1px solid #a9a9a9;
  margin: -6px 6px 6px -6px;
  }

Résultat : L'image s'affiche bien, la superposition aussi mais je ne vois pas d'ombre !

Merci d'avance pour votre aide

Amicalement,
Ilan

beaucoup de site commence a mettre de coté IE, je te conseil de faire la meme chose surtout pour se genre de chose, j'espere que d'ici la fin de l'année une version d'IE surportera d'autre type de CSS3 (y'en pas beaucoup d'activé actuellement mais y'en a)

http://www.css3.info/preview/box-shadow/

Merci pour la réponse rapide

Je préfère pour l'instant rendre compatible au maximum mon site avec IE. N'oublions pas que c'est le navigateur majoritairement utilisé

Ce qui m'étonne c'est que cela fonctionne très bien sur mes autres images. Mais lorsque je veux utiliser mon petit code pour superposer 2 images, ça plante :S

Je suis sur que cela doit être juste un petit détail mais qui m'échappe

J'ai trouvé, il suffisait d'arranger un peu l'ordre des div..

Pour les curieux :

<div id="b_pages">
		<div style="height:326px;">
		<div class="img-shadow" id="Layer1" style="position:absolute; width:887px; height:326px; z-index:1">
			<img name="Fond" src="styles/images/index_fond.jpg" width="887" height="326" alt="">
		</div>
		<div class="img-shadow" id="Layer2" style="position:absolute; width:887px; height:326px; z-index:2">
			<?php echo "<img name=\"Drapeau\" src=\"styles/images/$lang/i_flag.png\" width=\"887\" height=\"326\" alt=\"\">"; ?> 
		</div></div>
	</div>

Merci