Foros del Web » Creando para Internet » CSS »

problema capas y doctypes

Estas en el tema de problema capas y doctypes en el foro de CSS en Foros del Web. hola, me pasa lo siguiente: Tengo un DIV que me hace de menu, no es un ul o ol, ya que queria hacer rollover con ...
  #1 (permalink)  
Antiguo 23/12/2006, 10:02
 
Fecha de Ingreso: diciembre-2006
Mensajes: 2
Antigüedad: 11 años
Puntos: 0
problema capas y doctypes

hola, me pasa lo siguiente:

Tengo un DIV que me hace de menu, no es un ul o ol, ya que queria hacer rollover con imagenes. Esto ya lo he conseguido, aunque se haya perdido un poco la semantica ya que esta realizado con <a>

Ahora lo que deseo es que al pasar el raton por el primer link de ese menu, se haga visible una capa que a su vez tiene otros elementos como (y aqui si) una lista <ul>

Nada mas sencillo en teoria, se programa el evento onmouseover en el link y el javascript hace visibility:visible, se muestra la capa, funciona bien.

Y luego en esa capa mostrada, para esconderla se programa onmouseout en ella y el manejador hace visibility:hidden, tambien funciona perfectamente.

Pero ... al entrar en los elementos <li> de la lista en esa capa recien mostrada, el evento onmouseout se dispara y me desaparace la capa.

Ya me estoy volviendo loca pq no entiendo lo que sucede. No tiene el div la mayor prioridad sobre los li? pq se esconde la capa que hace de submenu?

Ademas en el modo estricto, que es como me gusta hacer las paginas a mi, es cuando no funciona y si lo hace en modo quirk.

se os ocurre alguna solucion?

Tambien me gustaria hacer eso si es posible sin javascript, pero no se si se puede solo con CSS.

El codigo seria este:

Código HTML:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "...w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns=".../1999/xhtml" xml:lang="es">
<head>

<meta http-equiv="content-type" content="text/html; charset=es-ascii" />
<meta name="author" content="Laia Mestre" />
<meta name="keywords" content="" />
<meta name="description" content="Web de inmobiliaria Trueba S.L." />
<meta name="robots" content="index, follow" />

<title>test de capas y doctypes</title>

<style type="text/css">
#capa1 {
position:absolute;width:100;height:100;top:100;left:100;background-color:blue;
}

#capa2 {
position:absolute;width:100;height:100;top:100;left:200;background-color:red;visibility:hidden;
}

#capa2 p {
color:blue;
}

</style> 

<script type="text/javascript"> 
function mostrar(nombreCapa){ 
document.getElementById(nombreCapa).style.visibility="visible"; 
} 
function ocultar(nombreCapa){ 
document.getElementById(nombreCapa).style.visibility="hidden"; 
} 
</script> 
</head> 
<body> 
<div id="capa1" onmouseover="mostrar('capa2')">Capa 1</div> 
<div id="capa2" onmouseout="ocultar('capa2')">
Capa 2
<p>parrafo uno</p>
</div> 
</body> 
</html> 
Como se puede ver, al entrar en la capa2 y seleccionar el parrafo desaparece la capa, y no deberia no?

Bueno, besos feliz navidad!
  #2 (permalink)  
Antiguo 23/12/2006, 11:20
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: problema capas y doctypes

Hola.
Creo que con la forma que lo has diseñado, simplemente te desaparece la capa dos al salirte de la capa 1, realmente porque tú se lo has pedido. Una forma sencilla de resolverlo es añadir un onmouseover a la capa 2, de manera que cuando estés encima de ella también sea visible:

<div id="capa1" onmouseover="mostrar('capa2')">Capa
1</div>
<div id="capa2" onmouseover="mostrar('capa2')"
onmouseout="ocultar('capa2')">Capa
2
<p>parrafo uno</p>
</div>

Y funciona perfectamente.

Mikel.
  #3 (permalink)  
Antiguo 23/12/2006, 11:31
 
Fecha de Ingreso: diciembre-2006
Mensajes: 2
Antigüedad: 11 años
Puntos: 0
Re: problema capas y doctypes

si! asi es, es lo que deseaba, gracias Mikel
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 23:58.