28172 sujets

CSS et mise en forme, CSS3

Bonjour.

Voici mon problème :
J'ai une DIV header (1000 x 150) dans laquelle je souhaite mettre une animation Flash (fichier SWF de la même taille) et poser en surimpression dessus une DIV contenant un fichier PNG avec des zones transparentes (aussi de la même taille).

Mon site est une colonne centrée. Voici la partie du CSS concernant le header :

#header {
	width: 1000px;
	height: 150px;
	text-align: center;
}


et voici mon code HTML :

<div id="header">

<object type="application/x-shockwave-flash" data="images/header.swf" width="1000" height="150" style="position:absolute; z-index:0;">
        <param name="wmode" value="Transparent" />
        <param name="movie" value="images/header.swf" />
</object>
	<div style="position:absolute; z-index:1; height:150px; width:1000px;" onclick="alert('test DIV sur un Flash');">
   <img src="images/h0.png" alt="" /></div>
	</div>


Sous IE9 et Opera, tout se passe bien : mon fichier SWF est à sa place et mon image PNG aussi, quelle que soit la taille de la fenêtre du navigateur. Mais sous Firefox, mon fichier SWF est décalé vers la droite, de 500 px.

Comment faire pour résoudre ce problème ?

Merci beaucoup. Smiley smile
Bon, j'ai réussi. Voici le code (j'ai changé de fichier SWF mais ça marche aussi avec le premier) :

<div id="header">
	<div style="position:absolute; z-index:10; height:150px; width:1000px;" onclick="alert('test DIV sur un Flash');"><img src="images/h0.png" alt="" /></div>
<object type="application/x-shockwave-flash" data="images/dewslider.swf?xml=images/dewslider.xml" width="1000" height="150" style="z-index:0;">
        <param name="wmode" value="Transparent" />
        <param name="movie" value="images/dewslider.swf" />
</object>

	</div>