Menu desplegable sobre una imagen

AJDC · #1 (**permalink**) 24/02/2011, 02:24

Hila.
estoy montando una web que tiene un menú desplegable con css, dentro de una celda en una fila...
En la siguiente fila, de una celda también.. tengo una imagen (que en el futuro será un flash).
En FF y otros no tengo problema, pero en IE no se despliega bien el menu, porque es como si la imagen "capturara" el hover del ratón, ocultando el menu...

¿Cómo puedo hacer para que le menú "flote" siempre sobre la imagen o el flash?

Gracias

tresj · #2 (**permalink**) 24/02/2011, 03:32

Hola, pienso que lo buscas se podría conseguir usando z-index.
Te dejo un enlace de referencia:
http://es.html.net/tutorials/css/lesson15.php
saludos

AJDC · #3 (**permalink**) 24/02/2011, 03:35

Gracias.. pero .. ¿qué se lo aplico sóloa los DIV? Si no tengo, me imagino que tendré que meter lso elementos dentro de sus divs..¿no?

tresj · #4 (**permalink**) 24/02/2011, 03:41

Prueba primero a ver si con eso se corrige el problema con IE y en función de eso decides.
saludos

AJDC · #5 (**permalink**) 24/02/2011, 03:46

¡Qué va!
Meto dentro de cada celda un div con su estilo y el z... y dentro de cada div, en un o el menu. y en otro la imagen .... pero nada

tresj · #6 (**permalink**) 24/02/2011, 03:52

Postea el html y css. Igual cuando insertes el swf ten en cuenta que por defecto se posicionará sobre el resto de elementos, o sea que si quieres superponer tu menú habrá que usar z-index.
saludos

AJDC · #7 (**permalink**) 24/02/2011, 04:03

voy a probar .. y pongo el codigo ...

AJDC · #8 (**permalink**) 24/02/2011, 04:24

Nada.. pongo el menu y el flash en sus divs.. y nada...
Pongo el código...
Del html ...

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">         
 
<LINK href="/Numenti/Web/PtNumenWeb.nsf/cssgeneral.css" REL="stylesheet"  TYPE="text/css">
<LINK href="/Numenti/Web/PtNumenWeb.nsf/cssmenu.css" REL="stylesheet"  TYPE="text/css">
<SCRIPT src="/Numenti/Web/PtNumenWeb.nsf/pCNavegador.js"></SCRIPT>
<SCRIPT src="/Numenti/Web/PtNumenWeb.nsf/pVentana.js"></SCRIPT>
<SCRIPT src="/Numenti/Web/PtNumenWeb.nsf/pJavaScript.js"></SCRIPT>
 
<script language="JavaScript" type="text/javascript"> 
<!-- 
document._domino_target = "_self";
function _doClick(v, o, t, h) {
  var form = document._aaa;
  if (form.onsubmit) {
     var retVal = form.onsubmit();
     if (typeof retVal == "boolean" && retVal == false)
       return false;
  }
  var target = document._domino_target;
  if (o.href != null) {
    if (o.target != null)
       target = o.target;
  } else {
    if (t != null)
      target = t;
  }
  form.target = target;
  form.__Click.value = v;
  if (h != null)
    form.action += h;
  form.submit();
  return false;
}
// -->
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF" topmargin=0 marginheight=0 leftmargin=0 marginwidth=0>
 
<form method="post" action="/Numenti/Web/PtNumenWeb.nsf/aaa?OpenForm&amp;Seq=1" name="_aaa">
<input type="hidden" name="__Click" value="0">
<table class="Contenedor" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top"><td class="ContenedorLados" style="background-image:url(/Numenti/Web/PtNumenWeb.nsf/imgLateral.gif?OpenImageResource); background-repeat: repeat; " width="1%"><img width="1" height="1" src="/icons/ecblank.gif" border="0" alt=""></td><td class="ContenedorCentro" width="98%">
<table class="Contenedor2" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top"><td width="100%">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top"><td width="50%" rowspan="3"><img width="1" height="1" src="/icons/ecblank.gif" border="0" alt=""></td><td width="50%"><img width="1" height="1" src="/icons/ecblank.gif" border="0" alt=""></td></tr>
 
<tr valign="top"><td height="1px"  width="50%"><img width="1" height="1" src="/icons/ecblank.gif" border="0" alt=""></td></tr>
 
<tr valign="top"><td height="1px"  width="50%"><img width="1" height="1" src="/icons/ecblank.gif" border="0" alt=""></td></tr>
</table>
</td></tr>
 
<tr valign="top"><td class="ContenedorMenu" width="100%" valign="middle"><DIV id="con-menu" ><div id="menu"><UL> <!-- The strange spacing herein prevents an IE6 whitespace bug. --><LI class="nivel1"><a href="#" TARGET="_self" class="nivel1">la empresa</a><UL><LI class="nivel2"><a href="vOpcionesMenuxID/633DEA748C5ED6C5C1257830003B58F2?OpenDocument" TARGET="_self" class="nivel2">presentación</a></LI><LI class="nivel2"><a href="vOpcionesMenuxID/163B031766956115C1257830003B6E84?OpenDocument" TARGET="_self" class="nivel2">misión</a></LI><LI class="nivel2"><a href="vOpcionesMenuxID/A97F7A16EF2340EBC1257830003B7378?OpenDocument" TARGET="_self" class="nivel2">visión</a></LI><LI class="nivel2"><a href="vOpcionesMenuxID/EE4E015945F4DCD4C1257830003B778C?OpenDocument" TARGET="_self" class="nivel2">valores corporativos</a></LI><LI class="nivel2"><a href="vOpcionesMenuxID/FF6C0E866A4156F0C1257830003B7E0C?OpenDocument" TARGET="_self" class="nivel2">sectores</a></LI></UL></LI><LI class="nivel1"><a href="$$ViewTemplate for wvNoticiasWeb?Open" TARGET="_self" class="nivel1">noticias</a></LI><LI class="nivel1"><a href="wfUnete?Open" TARGET="_self" class="nivel1">únete a nosotros</a></LI><LI class="nivel1"><a href="vOpcionesMenuxID/F6D80F21D406421AC1257830003B320F?OpenDocument" TARGET="_self" class="nivel1">intranet</a></LI><LI class="nivel1"><a href="vOpcionesMenuxID/CC950127AA0A66EAC1257830003B35C0?OpenDocument" TARGET="_self" class="nivel1">contacto</a></LI></UL></DIV></DIV><DIV id="con-flash" ><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="962" height="381"> <param name="movie" value="ImgCentral.swf"> <param name="quality" value="high"> <param name="wmode" value="transparent"> <embed src="ImgCentral.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent" width="962"  height="381" border="0"> </embed> </object></DIV></td></tr>
 
<tr valign="top"><td width="100%"><img width="1" height="1" src="/icons/ecblank.gif" border="0" alt=""></td></tr>
 
<tr valign="top"><td width="100%"><img width="1" height="1" src="/icons/ecblank.gif" border="0" alt=""></td></tr>
 
<tr valign="top"><td width="100%"><img width="1" height="1" src="/icons/ecblank.gif" border="0" alt=""></td></tr>
 
<tr valign="top"><td width="100%"><img width="1" height="1" src="/icons/ecblank.gif" border="0" alt=""></td></tr>
</table>
 
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top"><td class="Pie" width="100%"><img width="1" height="1" src="/icons/ecblank.gif" border="0" alt=""></td></tr>
</table>
</td><td class="ContenedorLados" style="background-image:url(/Numenti/Web/PtNumenWeb.nsf/imgLateral.gif?OpenImageResource); background-repeat: repeat; " width="1%"><img width="1" height="1" src="/icons/ecblank.gif" border="0" alt=""></td></tr>
</table>
 
<input name="URLBD" type="hidden" value="/Numenti/Web/PtNumenWeb.nsf/">
<input name="PORTALPATH" type="hidden" value="Numenti\Web\PtNumenWeb.nsf">
<input name="PORTALSERV" type="hidden" value="srvlab04/iprlab">
<input name="URLPORTAL" type="hidden" value="Numenti\Web\PtNumenWeb.nsf">
<input name="HTTP_User_Agent" type="hidden" value="Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)">
<input name="Menu" type="hidden" value="[&lt;div id=&quot;menu&quot;&gt;&lt;UL&gt; &lt;!-- The strange spacing herein prevents an IE6 whitespace bug. --&gt;&lt;LI class=&quot;nivel1&quot;&gt;&lt;a href=&quot;#&quot; TARGET=&quot;_self&quot; class=&quot;nivel1&quot;&gt;la empresa&lt;/a&gt;&lt;UL&gt;&lt;LI class=&quot;nivel2&quot;&gt;&lt;a href=&quot;vOpcionesMenuxID/633DEA748C5ED6C5C1257830003B58F2?OpenDocument&quot; TARGET=&quot;_self&quot; class=&quot;nivel2&quot;&gt;presentación&lt;/a&gt;&lt;/LI&gt;&lt;LI class=&quot;nivel2&quot;&gt;&lt;a href=&quot;vOpcionesMenuxID/163B031766956115C1257830003B6E84?OpenDocument&quot; TARGET=&quot;_self&quot; class=&quot;nivel2&quot;&gt;misión&lt;/a&gt;&lt;/LI&gt;&lt;LI class=&quot;nivel2&quot;&gt;&lt;a href=&quot;vOpcionesMenuxID/A97F7A16EF2340EBC1257830003B7378?OpenDocument&quot; TARGET=&quot;_self&quot; class=&quot;nivel2&quot;&gt;visión&lt;/a&gt;&lt;/LI&gt;&lt;LI class=&quot;nivel2&quot;&gt;&lt;a href=&quot;vOpcionesMenuxID/EE4E015945F4DCD4C1257830003B778C?OpenDocument&quot; TARGET=&quot;_self&quot; class=&quot;nivel2&quot;&gt;valores corporativos&lt;/a&gt;&lt;/LI&gt;&lt;LI class=&quot;nivel2&quot;&gt;&lt;a href=&quot;vOpcionesMenuxID/FF6C0E866A4156F0C1257830003B7E0C?OpenDocument&quot; TARGET=&quot;_self&quot; class=&quot;nivel2&quot;&gt;sectores&lt;/a&gt;&lt;/LI&gt;&lt;/UL&gt;&lt;/LI&gt;&lt;LI class=&quot;nivel1&quot;&gt;&lt;a href=&quot;$$ViewTemplate for wvNoticiasWeb?Open&quot; TARGET=&quot;_self&quot; class=&quot;nivel1&quot;&gt;noticias&lt;/a&gt;&lt;/LI&gt;&lt;LI class=&quot;nivel1&quot;&gt;&lt;a href=&quot;wfUnete?Open&quot; TARGET=&quot;_self&quot; class=&quot;nivel1&quot;&gt;únete a nosotros&lt;/a&gt;&lt;/LI&gt;&lt;LI class=&quot;nivel1&quot;&gt;&lt;a href=&quot;vOpcionesMenuxID/F6D80F21D406421AC1257830003B320F?OpenDocument&quot; TARGET=&quot;_self&quot; class=&quot;nivel1&quot;&gt;intranet&lt;/a&gt;&lt;/LI&gt;&lt;LI class=&quot;nivel1&quot;&gt;&lt;a href=&quot;vOpcionesMenuxID/CC950127AA0A66EAC1257830003B35C0?OpenDocument&quot; TARGET=&quot;_self&quot; class=&quot;nivel1&quot;&gt;contacto&lt;/a&gt;&lt;/LI&gt;&lt;/UL&gt;&lt;/DIV&gt;]"></form>
</body>
</html>

AJDC · #9 (**permalink**) 24/02/2011, 04:25

la hoja de estilo, la que actua sobre esos elementos ...

Código:

* { margin: 0px;
padding: 0px; 
outline: 0;
}
html, body { width: 100%;}


body {
font-family: Calibri;
}

DIV#con-flash{
position:relative;
align: center;

}
DIV#con-menu{
position:relative;
align: center;
z-index:6;
}


#menu {  text-align: center;
font-size: 0.7em;
width: 962px;
margin: 0px auto;
/*vertical-align: middle;*/

z-index:5; 

}

#menu ul { list-style-type: none;}

#menu ul li.nivel1 { float: left;
width: 162px;
margin-right: 0px;
}



#menu ul li a {display: block;
text-decoration: none;
color: #fff;
background-color: #44707D; /*Color de fondo del nivel que sea*/
/*border: solid 1px #fff; *//*Color de los bordes de las celdas*/
border-top: solid  #ffffff 0px;
border-right: solid  #ffffff 1px;
border-bottom: solid  #ffffff 0px;
border-left: solid  #ffffff 0px;


padding: 8px;
position: relative;
/*z-index:-1; */
}

/*PARA ASPECTO SIMPLE DEL NIVEL 2*/
#menu ul li.nivel2 a.nivel2 {
display: block ;
text-decoration: none;
color: #fff;
background-color: #939393; /*Color de fondo del nivel que sea*/
border: solid 1px #fff;
padding: 1px 1px 1px 1px;  /*padding: 1px;*/
position: relative;
margin: 3px 1px 1px 1px; /*margin: 3px;*/
}


#menu ul li:hover {position: relative;
display: block!important; 
}


/*#menu ul li a:hover, #menu ul li:hover a.nivel1 {*/
/*background-color: #5CC9BA; /*Color sobre nivel1*/*/
/*color: #000;*/
/*position: relative;*/
/*}*/

/*#menu ul li a:hover, #menu ul li:hover ul {*/
/*background-color: #5CC9BA; /*Color sobre nivel1*/*/
/*color: #000;*/
/*position: relative;*/
/*}*/


/*#menu ul li a.nivel1 {display: block!important;display: none;   */
#menu ul li a.nivel1 {display: block; 
position: relative;
}

#menu ul li ul {display: none; 
} 


#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;
left: 0px;
}

/*NIVEL 2*/
#menu ul li ul li a {width: 200px; /*Aspecto normal  - Ancho de las celdas de nivel2*/
padding: 6px 0px 8px 0px; /*padding: 6px 0px 8px 0px;*/
border-top-color: #000;
}

#menu ul li ul li.nivel2 a.nivel2:hover {border-top-color: #000;   /*Aspecto cuando es hover  .. Color sobre nivel2*/
position: relative;
background-color: #646464;
color: #fff;
border: solid 1px #fff;
}
/*FIN NIVEL 2*/


table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}

gracias...

tresj · #10 (**permalink**) 24/02/2011, 06:30

Vi los estilos para el div pero en tu html no sé dónde lo pusiste.
De todos modos al CSS del div de tu Flash no le pusiste z-index. Lo tienes así:

Código CSS:

Ver originalDIV#con-flash{
position:relative;
align: center;
 
}

y debería estar por ejemplo así:

Código CSS:

Ver originalDIV#con-flash{
position:relative;
align: center;
z-index:1;
}

Mira con más calma el uso de z-index y también ten en cuenta que explorer y z-index tienen sus encontrones, ya sabes que explorer es explorer...
Hay trucos para resolver las incompatibilidades:
http://innominepixel.wordpress.com/2...rnet-explorer/
http://www.forosdelweb.com/f53/probl...pas-ie-617213/
http://www.iuttu.com/2008/12/z-index...rnet-explorer/
http://www.forosdelweb.com/f53/tablas-z-index-731944/
etc.

saludos

AJDC · #11 (**permalink**) 24/02/2011, 06:33

Muchas gracias...
me opngo a mirar los enlaces.. para el futuro...
Resolví el problema metiendo debajo de los li del nivel2 "algo" para que mantuviera el foco.
De esa forma parece que sí funcionaba el z-index.

Muchas gracias de todos modos

tresj · #12 (**permalink**) 24/02/2011, 06:41

Ok, aunque la solución es un poco parche, no sé yo si a la larga te dará problemas. Como te comenté, no estás usando el z-index de forma adecuada y ojo también con las incompatibilidades con IE.
saludos

AJDC · #13 (**permalink**) 24/02/2011, 06:42

gracias... intentaré depurar al máximo según me indicas...

mil gracias de nuevo

yoni87 · #14 (**permalink**) 30/03/2011, 11:15

somebody help me..
estoy creando una tabla dinamica donde cada tupla me muestra el icono de una compu, y quiero que al clicar la imagen me aparezca un menu con tres opciones..,

lo q hare es un modulo q me despliegue las maquinas disponibles de un area y cambiarles el estado desde el menu que quiero q despliegue.

ayuda!!