Sous menu d'une liste incliquable

Question

dark_orodreth

10 Apr 2008 à 11:06

Bonjour à tous,

Voici mon souci. J'ai un menu déroulant en haut de ma page dans un div se trouvant au-dessus d'une animation flash. Lors du passage de la souris sur mon menu, tout va bien, il se déroule et superpose mon flash. Or lorsque je descend le curseur pour aller sur mes sous menus, ceux-ci disparaissent, comme si la souris était hors du menu. Cela me le fait seulement sur IE7, sur Firefox tout est OK. Merci d'avance.

Voici l'html de ce menu :

		<div id="menu">
            <ul id="nav">
				<li><a href="index.html">Accueil </a></li>                
				<li><a href="produit.html">Produits</a>
			<ul>
				<li><a href="framework.html">Framework<br />De Gamma Suite </a></li>
				<li><a href="arcole.html">Progiciels <br />Arcole 3G </a></li>
			</ul>
				</li>

				<li><a href="solution.html">Solutions</a>
				  <ul>
					<li><a href="solution.html">Solutions</a></li>
					<li><a href="benefice.html">B&eacute;n&eacute;fices</a></li>
              	</ul>
				</li>
				
				<li><a href="client.html">Cas clients </a></li>
				<li><a href="societe.html">Soci&eacute;t&eacute;</a>
				  <ul>
					<li><a href="societe.html">Equipe</a></li>
					<li><a href="societe.html#actu">News & Ev&egrave;nements</a></li>
              	</ul>
                </li>				
			      <li><a href="contact.html">Contact</a></li>				
		    </ul>  
 		<p> <a href="en/contact.html"><img src="images/flag.gif" alt="" width="20" height="13" border="0"/></a></p>
	    </div>

Le CSS :

#menu{
	font-size:0.77em;
	position:absolute;
	top:25px;
	left:25px;
	z-index: 10000;
}

#menu ul{
  font-weight:bold;
  color:#666;
  margin:0px;
  padding:0px;
  font-size:1em;
}

#menu ul ul{
  font-weight:bold;
  color:#666;
  margin:0px 0px 0px 0em;
  padding:0.2em 0.2em 0.1em 0.2em;
  background-color: transparent;
  font-size:0.92em;
  width: 80px;
}

#menu li{
  float:left;
  margin:0px 0.2em 0.2em 0px;
  padding:0;
  width:80px;
  text-align:center;
  list-style: none;
}

#menu li li{
  list-style:none;
  clear:left;
  margin:0px 0px 0px 0px;
  padding:0px 0px 0px 0px;
  float:none;
  height:100% !important;
  position:relative !important;  
}

/* style des liens */

#menu li a, #menu li span {
	display:block;
	margin:0px 0px 0px 0px;
    padding:0.2em;
	text-decoration:none;
	color:#606060;	
	background-color:#fff;
}

#menu li a:hover, #menu li a:focus, #menu li span:hover, #menu li span:focus, #menu li.encourt a {
	color:#cc0000;	
	background-color:#fff;
}


#menu li li a, #menu li li span, #menu li.encourt li a{
	background-color:#FFF;
	color:#3c3c3c;
	margin:0px 0px 2px 0px;	
	border:1px #eee solid;
	width:100px;
}

#menu li li a:hover, #menu li li span:hover, #menu li li.encourt span, #menu li li.encourt a, #menu li li.focus a{
	background-color:#fff;
	color:#CC0000;
	border:1px solid #cc0000;
}

#nav li ul {
	position: absolute;
	left: -1000px;
	margin-left:-52px;	
}

#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
}

.titre {
	position:absolute;
	left:60px;
	top:220px;
	color: #CC0000;
	font-weight: bold;
	font-size: 16px;
	font-family: Arial, Helvetica, sans-serif;
	width:auto;
	z-index: 1000;
}

/*FLASH*/

.flash {
	position:absolute;
	top:0px;
	left:1px;
}

6l20

10 Apr 2008 à 14:33

Bonjour dark_orodreth,

A priori l'ajout du paramètre ci-dessous dans le code d'insertion de ton flash permet de résoudre ce type de problème :

<param name="wmode" value="transparent">

Si ce paramètre est déjà présent, peut-être faudra-t-il nous montrer l'ensemble de ton code ou mettre une page d'exemple en ligne Smiley cligne

Cdt,
Sylvain

dark_orodreth

11 Apr 2008 à 08:54

Eh oui, ce paramètre est déjà codé dans Flash...
Voici un lien vers la page pour que vous voyez ce problème de vos yeux : http://frank.dimitri.free.fr/arcole.html
L'animation flash n'est qu'un test, ce n'est pas cette animation qui sera sur le site ^^

Et voici le CSS complet :

a, input
{
position: relative;
z-index: 1;
}

/* Basic Default Styles */
body {
	font: 12px Arial;
	color: #000;
	background: #c4cbd0; 
	margin: 5px 0 5px 50%;
	}
	

table#titre 
{ 
     margin-top:25px;
} 

.texte {left:500px;
background:url(images/fond.gif) repeat-y;}

p {padding-left:10px;
padding-right:10px;
}

a:link, a:visited {
	font: 12px "Arial", Verdana;
	text-decoration: none;
	font-weight:bold;
	color: #000;
}

a:hover, a:active {
	font: 12px "Arial", Verdana;
	text-decoration: none;
	font-weight:bold;
	color: #8d012c;
	}

#container {
	position: relative;
	width: 1024px;
	background: url(images/top.jpg) no-repeat top left;
	margin: 0 0 0 -515px;
	border: 0px solid #FFF;
}

#pageHeader {
	height: 255px;
}

#footer {
	position: absolute;
	left: 0px;
	width: 1024px;
	height: 47px;
	background: url(images/down.gif) no-repeat bottom left;
	z-index: 100;
}

#menu{
	font-size:0.77em;
	position:absolute;
	top:25px;
	left:25px;
	z-index: 10000;
}

#menu ul{
  font-weight:bold;
  color:#666;
  margin:0px;
  padding:0px;
  font-size:1em;
}

#menu ul ul{
  font-weight:bold;
  color:#666;
  margin:0px 0px 0px 0em;
  padding:0.2em 0.2em 0.1em 0.2em;
  background-color: transparent;
  font-size:0.92em;
  width: 80px;
}

#menu li{
  float:left;
  margin:0px 0.2em 0.2em 0px;
  padding:0;
  width:80px;
  text-align:center;
  list-style: none;
}

#menu li li{
  list-style:none;
  clear:left;
  margin:0px 0px 0px 0px;
  padding:0px 0px 0px 0px;
  float:none;
  height:100% !important;
  position:relative !important;  
}

/* style des liens */

#menu li a, #menu li span {
	display:block;
	margin:0px 0px 0px 0px;
    padding:0.2em;
	text-decoration:none;
	color:#606060;	
	background-color:#fff;
}

#menu li a:hover, #menu li a:focus, #menu li span:hover, #menu li span:focus, #menu li.encourt a {
	color:#cc0000;	
	background-color:#fff;
}


#menu li li a, #menu li li span, #menu li.encourt li a{
	background-color:#FFF;
	color:#3c3c3c;
	margin:0px 0px 2px 0px;	
	border:1px #eee solid;
	width:100px;
}

#menu li li a:hover, #menu li li span:hover, #menu li li.encourt span, #menu li li.encourt a, #menu li li.focus a{
	background-color:#fff;
	color:#CC0000;
	border:1px solid #cc0000;
}

#nav li ul {
	position: absolute;
	left: -1000px;
	margin-left:-52px;	
}

#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
}

.titre {
	position:absolute;
	left:60px;
	top:220px;
	color: #CC0000;
	font-weight: bold;
	font-size: 16px;
	font-family: Arial, Helvetica, sans-serif;
	width:auto;
	z-index: 1000;
}

/*FLASH*/

.flash {
	position:absolute;
	top:0px;
	left:1px;
}

Merci !
Modifié par dark_orodreth (14 Apr 2008 - 10:58)

dark_orodreth

14 Apr 2008 à 10:59

Personne n'a des idées SVP ?

fvsch

14 Apr 2008 à 11:07

Oh cool, encore un site qui utilise la superposition d'éléments HTML sur une animation Flash... ce qui rend le site inutilisable sous Linux (l'animation Flash passe par dessus). Smiley smile

Ce n'est pas forcément rédhibitoire. Mais en règle générale, on aura intérêt à éviter autant que possibles les superposition d'animations Flash et de contenus HTML, vu les divers problèmes engendrés (du plus radical comme la superposition pure et simple, et plus subtils comme le problème que tu évoques). Pas que ça soit inintéressant, mais c'est beaucoup de complications pour un intérêt souvent limité.

PS: le site est trop large (donner une largeur de 1024px aux principaux conteneurs d'un site est une erreur).
Modifié par Florent V. (14 Apr 2008 - 11:12)

dark_orodreth

14 Apr 2008 à 16:11

Merci. Pour la largeur du site, la résolution d'un ordinateur étant de plus en plus large, je me suis dit que 1024 n'était pas trop large. Quoiqu'il en soit ce site n'est pas le définitif.
D'autre part pour le flash j'en conclue deux choses :
- soit je supprime l'animation et laisse donc mon CSS en arrière plan,
- soit il faut que je fasse mon menu déroulant en flash également et que je l'inclue à mon animation ?

Sujet clos

CSS et mise en forme, CSS3

Sous menu d'une liste incliquable