Foros del Web » Creando para Internet » CSS »

Problema con menu desplegable css

Estas en el tema de Problema con menu desplegable css en el foro de CSS en Foros del Web. Hola, Tengo un menu desplegable hecho en css, y debajo un banner con un swf. en mozilla y safary sin problema, pero en explorer...ya os ...
  #1 (permalink)  
Antiguo 19/03/2009, 01:35
 
Fecha de Ingreso: mayo-2006
Mensajes: 131
Antigüedad: 17 años, 11 meses
Puntos: 1
Pregunta Problema con menu desplegable css

Hola,
Tengo un menu desplegable hecho en css, y debajo un banner con un swf.
en mozilla y safary sin problema, pero en explorer...ya os podeis imaginar que algo pasa, pues si..resulta que los desplegables aparecen por debajo del banner. He probado con los z index a todos los elementos del menu, pero nada de nada.

Alguien se ha encontrado con algo parecido?

muchas gracias :)
__________________
flora
  #2 (permalink)  
Antiguo 19/03/2009, 02:16
 
Fecha de Ingreso: marzo-2009
Mensajes: 23
Antigüedad: 15 años, 1 mes
Puntos: 0
Respuesta: Problema con menu desplegable css

si pusieras el codigo fuente seria mejor

z-index: 1; se vera al fondo mientras subas el valor es el que ganara en la pantalla y se mostrara primero al menu supongo es un ul le pones un z index:2 y listo
  #3 (permalink)  
Antiguo 19/03/2009, 02:17
 
Fecha de Ingreso: septiembre-2008
Ubicación: En algun sitio del CyberSpacio
Mensajes: 150
Antigüedad: 15 años, 7 meses
Puntos: 2
Respuesta: Problema con menu desplegable css

Tal vez te falto probar poniendo z index al swf también, proba poniendo z-index:5; al menu (y si quieres a sus items también) y z-index:1; al swf.

Si no funciona, intenta poniendo el swf en un div, y a ese div ponele el z-index:1; pero que no se te olvide, por lo menos vas a tener que tener un objeto relacionado con el swf con z-index:1; y el menú en z-index:5;
__________________
Visita la mejor web: http://infoadictos.net
  #4 (permalink)  
Antiguo 19/03/2009, 17:45
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: Problema con menu desplegable css

Haz una búsqueda en el foro por wmode transparent (es por no ponértelo mal)
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 20/03/2009, 16:34
 
Fecha de Ingreso: agosto-2007
Ubicación: Barcelona
Mensajes: 39
Antigüedad: 16 años, 7 meses
Puntos: 0
Respuesta: Problema con menu desplegable css

hola,

Recuerda que para que funcione z-index, siempre debes especificar la "posición", ya sea position:absolute o position:relative, con esto el z-index va sin problemas y respeta la superposición de capas.

Un saludo.

Última edición por netizen.01; 20/03/2009 a las 16:36 Razón: agregar énfasis ;)
  #6 (permalink)  
Antiguo 20/03/2009, 16:48
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: Problema con menu desplegable css

No, lo objetos flash no responden al z-index generalmente.

Echa un vistazo a este hilo http://www.forosdelweb.com/f4/menu-d...7/#post2609328
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 20/03/2009, 21:13
 
Fecha de Ingreso: agosto-2007
Ubicación: Barcelona
Mensajes: 39
Antigüedad: 16 años, 7 meses
Puntos: 0
Respuesta: Problema con menu desplegable css

Cita:
Iniciado por Mikmoro Ver Mensaje
No, lo objetos flash no responden al z-index generalmente.

Pues si que responden siempre que definas "position" como dije antes...

Te dejo el código usando tu mismo archivo swf para que hagas la prueba quitando y poniendo dicho atributo del menú, así como cambiando el z-index del object ya sea con superposicion o a la inversa... yo veo que obedece sin problema

Código:
<!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" xml:lang="es">
  <head>
	<style>
	*{margin:0px;padding:0px;}
	
	#menu{
	position:relative;
	z-index:8;
	diaply:block;
	width:800px;
	height:300px;
	overfow:hidden;
	list-style:none;
	}
	ul li{
	float:left;
	display:block;
	width:198px;
	border:1px solid #ccc;
	background:#eee;
	}
	ul li a{
	display:block;
	width:100%;
	height:30px;
	font:normal 1.15em/30px Corbel;
	color:#000;
	}
	ul li ul{
	height:0px;
	overflow:hidden;
	}
	ul li:hover ul{
	height:auto;
	}
	ul li:hover ul li{
	float:none;
	}
	
	object{
	position:absolute;
	z-index:1;
	top:0px;
	}
	</style>
  </head>

  <body>
	
	<ul id="menu">
		<li>
			<a href="#">Item</a>
			<ul>
				<li><a href="#">subitem</a></li>
				<li><a href="#">subitem</a></li>
				<li><a href="#">subitem</a></li>
				<li><a href="#">subitem</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Item</a>
			<ul>
				<li><a href="#">subitem</a></li>
				<li><a href="#">subitem</a></li>
				<li><a href="#">subitem</a></li>
				<li><a href="#">subitem</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Item</a>
			<ul>
				<li><a href="#">subitem</a></li>
				<li><a href="#">subitem</a></li>
				<li><a href="#">subitem</a></li>
				<li><a href="#">subitem</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Item</a>
			<ul>
				<li><a href="#">subitem</a></li>
				<li><a href="#">subitem</a></li>
				<li><a href="#">subitem</a></li>
				<li><a href="#">subitem</a></li>
			</ul>
		</li>
	</ul>
	
	<object id="flash" type="application/x-shockwave-flash" data="http://www.araudi.net/forosdelweb/ejemplo_flash/so_tester.swf" width="800px" height="360px">
		<param name="movie" value="http://www.araudi.net/forosdelweb/ejemplo_flash/so_tester.swf" />
		<param name="quality" value="high" />
		<param name="wmode" value="opaque" />
	</object>
	
  </body>
</html>
saludos!

Última edición por netizen.01; 20/03/2009 a las 21:18
  #8 (permalink)  
Antiguo 21/03/2009, 02:12
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: Problema con menu desplegable css


1.- ¿Lo has visto en IE6?
2.- ¿Podrías explicar que es <param name="wmode" value="opaque" />, para qué sirve y qué ocurre si lo quitas?
3.- En ese hilo nadie hablaba de posición absoluta, sino de seguir el flujo del documento.
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 21/03/2009, 05:55
 
Fecha de Ingreso: agosto-2007
Ubicación: Barcelona
Mensajes: 39
Antigüedad: 16 años, 7 meses
Puntos: 0
Respuesta: Problema con menu desplegable css

Cita:
Iniciado por Mikmoro Ver Mensaje

1.- ¿Lo has visto en IE6?
Si lo he testeado en ie6, y la superposición también funciona sin problema... otro tema son las carencias que tiene ese navegador con los pseudoelementos, pero para eso cada quien utiliza sus propias chapuzas (desde archivos htc o js o condicionales, etc.) y supongo que eso no vienen al cuento pues flora ya tendrá su propio menú desarrollado con ese tema solucionado... si te fijas, lo que ella solicita es ayuda en la superposición de capas mediante z-index

Cita:
Iniciado por Mikmoro Ver Mensaje
2.- ¿Podrías explicar que es <param name="wmode" value="opaque" />, para qué sirve y qué ocurre si lo quitas?
Tienes toda la razón, nunca había reparado en la función de wmode, simplemente lo ponía de cajón en cada object variando opaque o transparent según fuera el caso, no había visto que sin este parámetro los navegadores eran incapaces de relacionar apropiadamente la posición de los objetos swf... aunque después de que me lanzaras tu pregunta me puse a buscar y al parecer estamos jodidos tanto si lo usamos como si no... si quieres que tu swf vaya rápido y sin bugs, no lo uses; si quieres que tu swf acate las directivas de posicionamiento de tu código html/css tendrás que usarlo... difícil elección, pero por el momento es lo que hay.


Cita:
Iniciado por Mikmoro Ver Mensaje
3.- En ese hilo nadie hablaba de posición absoluta, sino de seguir el flujo del documento.
sin comentarios como tú mismo dices eso es cosa del otro hilo y yo solo me he limitado a responder la dudad que se ha planteado en éste hilo que ha abierto flora.

saludos
  #10 (permalink)  
Antiguo 21/05/2010, 20:55
Avatar de SIW
SIW
 
Fecha de Ingreso: octubre-2009
Mensajes: 9
Antigüedad: 14 años, 6 meses
Puntos: 0
Respuesta: Problema con menu desplegable css

Cita:
Iniciado por netizen.01 Ver Mensaje
pues si que responden siempre que definas "position" como dije antes...

Te dejo el código usando tu mismo archivo swf para que hagas la prueba quitando y poniendo dicho atributo del menú, así como cambiando el z-index del object ya sea con superposicion o a la inversa... Yo veo que obedece sin problema

Código:
<!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" xml:lang="es">
  <head>
	<style>
	*{margin:0px;padding:0px;}
	
	#menu{
	position:relative;
	z-index:8;
	diaply:block;
	width:800px;
	height:300px;
	overfow:hidden;
	list-style:none;
	}
	ul li{
	float:left;
	display:block;
	width:198px;
	border:1px solid #ccc;
	background:#eee;
	}
	ul li a{
	display:block;
	width:100%;
	height:30px;
	font:normal 1.15em/30px corbel;
	color:#000;
	}
	ul li ul{
	height:0px;
	overflow:hidden;
	}
	ul li:hover ul{
	height:auto;
	}
	ul li:hover ul li{
	float:none;
	}
	
	object{
	position:absolute;
	z-index:1;
	top:0px;
	}
	</style>
  </head>

  <body>
	
	<ul id="menu">
		<li>
			<a href="#">item</a>
			<ul>
				<li><a href="#">subitem</a></li>
				<li><a href="#">subitem</a></li>
				<li><a href="#">subitem</a></li>
				<li><a href="#">subitem</a></li>
			</ul>
		</li>
		<li>
			<a href="#">item</a>
			<ul>
				<li><a href="#">subitem</a></li>
				<li><a href="#">subitem</a></li>
				<li><a href="#">subitem</a></li>
				<li><a href="#">subitem</a></li>
			</ul>
		</li>
		<li>
			<a href="#">item</a>
			<ul>
				<li><a href="#">subitem</a></li>
				<li><a href="#">subitem</a></li>
				<li><a href="#">subitem</a></li>
				<li><a href="#">subitem</a></li>
			</ul>
		</li>
		<li>
			<a href="#">item</a>
			<ul>
				<li><a href="#">subitem</a></li>
				<li><a href="#">subitem</a></li>
				<li><a href="#">subitem</a></li>
				<li><a href="#">subitem</a></li>
			</ul>
		</li>
	</ul>
	
	<object id="flash" type="application/x-shockwave-flash" data="http://www.araudi.net/forosdelweb/ejemplo_flash/so_tester.swf" width="800px" height="360px">
		<param name="movie" value="http://www.araudi.net/forosdelweb/ejemplo_flash/so_tester.swf" />
		<param name="quality" value="high" />
		<param name="wmode" value="opaque" />
	</object>
	
  </body>
</html>
saludos!
gracias me sirvio esta explicacion.
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 19:15.