18068 sujets

Questions générales et questions de débutants

Menu déroulant horizontal + Flash => Problème de Z-index

Bonjour

Pour mon premier post je tiens tout d'abord à remercier l'équipe qui oeuvre à faire vivre ce site, mine d'infos extraordinaire pour qui veut apprendre le language CSS.

Ma question porte sur ce menu déroulant : http://css.alsacreations.com/modelesmenus/hd1.htm

Je souhaite l'utiliser sur l'un de mes sites, problème, le site en question utilise une petite anim' en flash juste en dessous de ce menu.

En faisant des tests sur le menu de Raphaël, je m'aperçois que le menu, une fois déroulé, passe en dessous du flash (même avec un Z-index approprié), d'où ma question :

Y-a-t-il une astuce particulière pour faire passer le menu par dessus le flash ?

Merci de vos lumières avisées.
Brice.
Bonjour,

Pour que z-index fonctionne il faut que le conteneur soit en absolu (et peut être relatif aussi mais je suis pas sur). Peut être que tu peux essayer ca si c'est pas déja fait (?)
SAlut Smiley smile

j'ai le même problème avec ce menu là :
http://css.alsacreations.com/xmedia/exemples/deroulant/cssmenu4.htm

Fonctionne a peu près avec FF, les bordures ont tendence à s'effacer.
Sur Safari (OS X) : les sous-menus passent SOUS le swf.
J'ai monté le z-index à 1000 et j'ai meme testé avec un z-index à 0 pour la balise embed ...
Rien n'y fait ...
Sous IE (OS X) ça marche en ayant mis un z-index sur le #menu
Sous IE 6 (PC), les sous-menu passent SOUS le swf ...

Ayé, je devient chèvre
Smiley biggol Smiley biggol Smiley biggol

j'ai pas mal bidouillé le code mais le voilà :

dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

dl#menu {
	position: absolute;
	width: 186px;
	top: 164px;
	left: 23px;
	background-color: transparent;
	z-index: 1000;
}

dl#menu dt {
	margin: 2px 0;
	height: 33px;
	line-height: 33px;
	text-align: right;
	font-weight: bold;
	border: none;
}

dl#menu dt a {
	display: block;
	color: #fff;
	background: transparent url(images/BD-SANS-CLAIR.gif) no-repeat top left;
	height: 33px;
	font-weight: bold;
	font-size: 1.1em;
	text-decoration: none ;
	line-height: 33px;
	padding: 4px 15px 0 0;
}

dl#menu dt a:hover {
	color: #fff;
	background: transparent url(images/BD-CART-FONCE.gif) no-repeat top left;
}

dl#menu dt a.select {
	background: transparent url(images/BD-CART-FONCE.gif) no-repeat top left;
}

dl#menu dd {
	position: absolute;
	z-index: 1000;
	width: 150px;
	text-align: left;
	background-color: #fff;
	margin: -24px 0 0 189px;
	border: 1px solid #cf6c59;
}

dl#menu li {
	size: 150px;
	text-align: left;
	padding: 0 3px;
	background-color: #fff;
}

dl#menu li a:link, dl#menu li a:visited {
	display: block;
	color: #0082d9;
	text-decoration: none;
	border: 0 none;
	height: 100%;
	padding: 2px 5px 2px 0;
}

dl#menu li a:hover {
	background-color: #e6edf5;
}


et voilà aussi le lien pour voir le désastre : http://sites.guillaumehenot.com/stvictor/index.php

Merci pour votre aide Smiley smile
Modifié par AnakinDSL (26 Jun 2006 - 14:14)
Sujet clos
Aller à