Foros del Web » Creando para Internet » CSS »

Menu desplegable sobre una imagen

Estas en el tema de Menu desplegable sobre una imagen en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 24/02/2011, 02:24
 
Fecha de Ingreso: agosto-2003
Mensajes: 324
Antigüedad: 14 años, 4 meses
Puntos: 1
Menu desplegable sobre una imagen

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
  #2 (permalink)  
Antiguo 24/02/2011, 03:32
 
Fecha de Ingreso: diciembre-2010
Ubicación: Madrid
Mensajes: 342
Antigüedad: 7 años
Puntos: 28
Respuesta: Menu desplegable sobre una imagen

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
__________________
diseño web
  #3 (permalink)  
Antiguo 24/02/2011, 03:35
 
Fecha de Ingreso: agosto-2003
Mensajes: 324
Antigüedad: 14 años, 4 meses
Puntos: 1
Respuesta: Menu desplegable sobre una imagen

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?
  #4 (permalink)  
Antiguo 24/02/2011, 03:41
 
Fecha de Ingreso: diciembre-2010
Ubicación: Madrid
Mensajes: 342
Antigüedad: 7 años
Puntos: 28
Respuesta: Menu desplegable sobre una imagen

Prueba primero a ver si con eso se corrige el problema con IE y en función de eso decides.
saludos
__________________
diseño web
  #5 (permalink)  
Antiguo 24/02/2011, 03:46
 
Fecha de Ingreso: agosto-2003
Mensajes: 324
Antigüedad: 14 años, 4 meses
Puntos: 1
Respuesta: Menu desplegable sobre una imagen

¡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
  #6 (permalink)  
Antiguo 24/02/2011, 03:52
 
Fecha de Ingreso: diciembre-2010
Ubicación: Madrid
Mensajes: 342
Antigüedad: 7 años
Puntos: 28
Respuesta: Menu desplegable sobre una imagen

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
__________________
diseño web
  #7 (permalink)  
Antiguo 24/02/2011, 04:03
 
Fecha de Ingreso: agosto-2003
Mensajes: 324
Antigüedad: 14 años, 4 meses
Puntos: 1
Respuesta: Menu desplegable sobre una imagen

voy a probar .. y pongo el codigo ...
  #8 (permalink)  
Antiguo 24/02/2011, 04:24
 
Fecha de Ingreso: agosto-2003
Mensajes: 324
Antigüedad: 14 años, 4 meses
Puntos: 1
Respuesta: Menu desplegable sobre una imagen

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> 
  #9 (permalink)  
Antiguo 24/02/2011, 04:25
 
Fecha de Ingreso: agosto-2003
Mensajes: 324
Antigüedad: 14 años, 4 meses
Puntos: 1
Respuesta: Menu desplegable sobre una imagen

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...
  #10 (permalink)  
Antiguo 24/02/2011, 06:30
 
Fecha de Ingreso: diciembre-2010
Ubicación: Madrid
Mensajes: 342
Antigüedad: 7 años
Puntos: 28
Respuesta: Menu desplegable sobre una imagen

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 original
  1. DIV#con-flash{
  2. position:relative;
  3. align: center;
  4.  
  5. }

y debería estar por ejemplo así:
Código CSS:
Ver original
  1. DIV#con-flash{
  2. position:relative;
  3. align: center;
  4. z-index:1;
  5. }

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
__________________
diseño web
  #11 (permalink)  
Antiguo 24/02/2011, 06:33
 
Fecha de Ingreso: agosto-2003
Mensajes: 324
Antigüedad: 14 años, 4 meses
Puntos: 1
Respuesta: Menu desplegable sobre una imagen

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
  #12 (permalink)  
Antiguo 24/02/2011, 06:41
 
Fecha de Ingreso: diciembre-2010
Ubicación: Madrid
Mensajes: 342
Antigüedad: 7 años
Puntos: 28
Respuesta: Menu desplegable sobre una imagen

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
__________________
diseño web
  #13 (permalink)  
Antiguo 24/02/2011, 06:42
 
Fecha de Ingreso: agosto-2003
Mensajes: 324
Antigüedad: 14 años, 4 meses
Puntos: 1
Respuesta: Menu desplegable sobre una imagen

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

mil gracias de nuevo
  #14 (permalink)  
Antiguo 30/03/2011, 12:15
Avatar de yoni87  
Fecha de Ingreso: febrero-2011
Mensajes: 1
Antigüedad: 6 años, 9 meses
Puntos: 0
Respuesta: Menu desplegable sobre una imagen

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!!

Etiquetas: desplegable
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:07.