Sujet Précédent Sujet Suivant

Z-index et ie

Résolu/Fermé
Meuh68 - 5 nov. 2012 à 21:46
 Meuh68 - 6 nov. 2012 à 17:33
Bonjour,

J'ai une animation flash sur une page html, qui est sensée se placer derrière un menu. Tout fonctionne parfaitement sous Chrome grâce à des z-index, mais pas sous Firefox ni IE... Le menu se place systématiquement sous l'animation. Pouvez-vous m'aider ?

Voilà mon html : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>Caraibos</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="styles/style.css"/>
</head>

<body>

	<div id="menu">
		<div id="boutons_menu">
		<div id="bouton_accueil"><a href="index.html">Accueil</a></div>
		<div id="bouton_galleries"><a href="pages/galleries.html">Galeries</a></div>
		<div id="bouton_marque"><a href="pages/marque.html">La marque</a></div>
		<div id="bouton_astuces"><a href="pages/astuces.html">Astuces</a></div>
		<div id="bouton_panier"><a href="pages/panier.html">Mon panier</a></div>
		</div>
	</div>
	
<!-- ANIMATION FLASH -->
	
	<div id="anim_logo">
	<object type="application/x-shockwave-flash" data="images/anim_logo.swf" width="600" height="900">
	<param name="movie" value="images/anim_logo.swf" />
	</object>
	</div>
	
<!-- FOOTER -->
	
	<div><img src="images/fruits_gauche.png" id="fruits_gauche" alt="" /></div>
	<div><img src="images/fruits_droite.png" id="fruits_droite" alt="" /></div>
	
	<div id="footer"></div>

</body>
</html>


Et mon CSS : 

body {
	background-color	:#a9d5d4;
	margin				:0;
	padding				:0;
}

#boutons_menu a {
	text-decoration		:none;
	color				:white;
}
	
@font-face{
    font-family : stereo;
    src : url('../fonts/stereofidelic.ttf');
}

/* MENU */

#menu {
	background-color	:#bb212b;
	position 			:absolute;
	top					:0;
	z-index				:5;
	
	height				:40px;
	width				:100%;
}

#boutons_menu {
	width: 500px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 3px;
}

#boutons_menu>div {
	font-family			:stereo;
	font-size			:30px;
	margin-left			:30px;
	cursor				:pointer;
	opacity : 1.0;
    -moz-opacity : 1.0;
    -ms-filter: "alpha(opacity=100)"; /* IE 8 */
    filter : alpha(opacity=100); /* IE < 8 */
}

#boutons_menu>div:hover {
	opacity : 0.5;
    -moz-opacity : 0.5;
    -ms-filter: "alpha(opacity=50)"; /* IE 8 */
    filter : alpha(opacity=50); /* IE < 8 */
}

#bouton_accueil {
	float				:left;
	color				:white;
}

#bouton_galleries {
	float				:left;
	color				:white;
}

#bouton_marque {
	float				:left;
	color				:white;
}

#bouton_astuces {
	float				:left;
	color				:white;
}

#bouton_panier {
	float				:left;
	color				:white;
}

#logo_grand {
	height				:387px;
	width				:600px;
	
	position			:absolute;
	top					:200px;
	left				:580px;
}



/* ANIMATION FLASH */



#anim_logo {
	position			:absolute;
	width				:600px;
	top					:-350px;
	left				:50%;
	margin-left			:-300px;
	z-index				:-1;
}


/* VERRES */

#verre_alcool {
	height				:306px;
	width				:200px;
	position			:absolute;
	background-image	:url(../images/verre_alcool.png);
	background-repeat	:no-repeat;
	
	bottom				:130px;
	right				:150px;
}

#verre_noalcool {
	height				:320px;
	width				:250px;
	position			:absolute;
	background-image	:url(../images/verre_noalcool.png);
	background-repeat	:no-repeat;
	
	bottom				:130px;
	left				:150px;
}

#verre_noalcool:hover {
	cursor				:pointer;
	background-image	:url(../images/verre_noalcool_hover.png);
	background-repeat	:no-repeat;
}

#verre_alcool:hover {
	cursor				:pointer;
	background-image	:url(../images/verre_alcool_hover.png);
	background-repeat	:no-repeat;
}

/* FOOTER */

#logo {
	position			:relative;
	height				:64px;
	width				:100px;
	left				:35px;
	top					:25px;
}

#logo:hover {
	cursor				:pointer;
}

#fruits_gauche {
	height				:173px;
	width				:280px;
	
	position			:absolute;
	left				:10%;
	z-index				:10;
	bottom				:10%;
}

#fruits_droite {
	height				:142px;
	width				:300px;
	
	position			:absolute;
	right				:10%;
	z-index				:10;
	bottom				:8%;
}

#footer {

	background-color	:#edcb73;
	position			:fixed;
	bottom				:0;
	
	height				:120px;
	width				:100%;
}


A voir également:

3 réponses

Réponse 1 / 3
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
5 nov. 2012 à 22:44
Salut

flash a son propre mode de fenetrage , pour le rendre comme n importe quel element html il faut lui donner le param opaque

tu remplace 
<object type="application/x-shockwave-flash" data="images/anim_logo.swf" width="600" height="900">
	<param name="movie" value="images/anim_logo.swf" />
	</object>


par ce code d insertion swf valide xhtml et passant meme ancient IE , avec la valeur opaque mise ! 

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="600" height="900" id="logo">				
   <param name="movie" value="images/anim_logo.swf" />				
   <param name="wmode" value="opaque" />				
      <!--[if !IE]>-->				
      <object type="application/x-shockwave-flash" data="images/anim_logo.swf" width="600" height="900">					
        <param name="wmode" value="opaque" />				
        <!--<![endif]-->					
        <a href="https://get.adobe.com/flashplayer/">						
          <img src="https://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />					</a>				
        <!--[if !IE]>-->				
      </object>				
      <!--<![endif]-->			
    </object>


la il devrait reagir au z-index !

a+
1
Réponse 2 / 3
Utilisateur anonyme
5 nov. 2012 à 22:17
Essaye avec des z-index vachement élevés genre 2000 ou 5000
0
Réponse 3 / 3
Meuh68
5 nov. 2012 à 22:48
Salut,
Merci beaucoup, mais avec ce code, l'animation disparaît sous IE !
0
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
Modifié par RAD ZONE le 5/11/2012 à 23:48
c est de ma faute !

j ai donne une id a <objet qui etait deja attribue ! j avais pas vue !!

change l id logo par n importe quoi , et ca ira ! :-)) 

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="600" height="900" id="logo">


a+
0
Meuh68
6 nov. 2012 à 08:24
Toujours pareil :(
0
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
6 nov. 2012 à 08:44
tu as due faire une erreur !

voila ta page avec le code que je t ai donne ! regarde le code !
https://travellerz.de/

a+
0
Meuh68
6 nov. 2012 à 08:58
effectivement, le tien marche sous IE, mais toujours pas le mien... j'ai copié dans la code source de ta page, ça marche sous chrome, mais toujours pas sous ie
0
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
6 nov. 2012 à 09:05
?? on va essaye un truc , i ai un doute !!

juste en dessous de <title>Caraibos</title> ajoute cette ligne 
<!-- saved from url=(0014)about:internet -->

et dis moi !
0

Discussions similaires

A quoi sert CPU-Z ?
mathilde15 -
fabul -

1 réponse
Facture de google 380€ !
Misternet -
okapi -

61 réponses
Arnaque frauduleuse Ireland ltd
Mymy -
mel -

4 réponses
Bonjour j'ai un z sur ma carte cadeau v bucks
GiantKitchen6349 -
Jean20B -

3 réponses
Arnaque de Google Ireland Limited
Sortideli -
jordane45 -

1 réponse