Z-index et ie
Résolu
Meuh68
-
Meuh68 -
Meuh68 -
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 :
Et mon CSS :
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:
- Z-index et ie
- Code ascii de a à z - Guide
- Index téléphonique - Guide
- Gpu z - Télécharger - Informations & Diagnostic
- Cpu z - Télécharger - Informations & Diagnostic
- Telecharger index - Télécharger - Gestion de fichiers
3 réponses
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
par ce code d insertion swf valide xhtml et passant meme ancient IE , avec la valeur opaque mise !
la il devrait reagir au z-index !
a+
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+
tu as due faire une erreur !
voila ta page avec le code que je t ai donne ! regarde le code !
https://travellerz.de/
a+
voila ta page avec le code que je t ai donne ! regarde le code !
https://travellerz.de/
a+
