Foros del Web » Creando para Internet » CSS »

Problema con capas (z-index)

Estas en el tema de Problema con capas (z-index) en el foro de CSS en Foros del Web. Me ha surgido un problema al que no encuentro solución por ningún lado. Solo espero que la tenga. A ver si me podéis ayudar. Tengo ...
  #1 (permalink)  
Antiguo 31/03/2009, 18:29
Avatar de gorkreg  
Fecha de Ingreso: julio-2008
Mensajes: 305
Antigüedad: 9 años, 4 meses
Puntos: 8
Problema con capas (z-index)

Me ha surgido un problema al que no encuentro solución por ningún lado. Solo espero que la tenga. A ver si me podéis ayudar.

Tengo una web con un menú desplegable (usando exclusivamente CSS) y un "banner" donde hay un enlace a una dirección email. Para que el "banner" no me cubra el desplegable y quede en una capa inferior, le he dado un z-index de "-1". Al desplegable, un z-index de "1". Para que el menú desplegable desaparezca de la pantalla (y aparezca solo al posicionarse sobre un elemento del menú principal), lo he posicionado absolutamente y le he dado un margen negativo de -1000 cm.

Lo que sucede es que el menú desplegable, aunque no aparezca, siempre está por encima del "banner" con lo que el enlace a la dirección de email no funciona, no se puede clickar en él pues está tapado por el desplegable (aunque el texto del enlace en sí, aparezca. La dirección de correo).

Os incluyo el código por si puede servir de ayuda:

MENÚ DESPLEGABLE:

#main_nav li ul {
position: absolute;
margin-top: 0px;
width: 250px;
left: -1000cm;
z-index: 1;
}
#main_nav li ul a {
width: 250px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #292929;
}
#main_nav li:hover ul {
left: auto;
}

BANNER:

#contact {
background-image: url(../img/backgrounds/b_contact.jpg);
background-repeat: repeat-x;
background-position: left top;
color: #FFFFFF;
font-size: 15px;
font-weight: bold;
height: 150px;
line-height: 140%;
position: relative;
z-index: -1;
}

No creo que tenga importancia pero el "banner" se despliega verticalmente (efecto acordeón) mediante un código javascript.

Gracias de antemano.
  #2 (permalink)  
Antiguo 31/03/2009, 19:29
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: Problema con capas (z-index)

Cita:
No creo que tenga importancia pero el "banner" se despliega verticalmente (efecto acordeón) mediante un código javascript.
y yo creo que tal vez si, ya que seguramente en ese código hay algo que indica la profundidad del banner. Todos los banner con ese efecto que ví siempre, siempre pasan por encima del contenido de la pagina. Yo que vos preguntaría también en el foro de Javascript
  #3 (permalink)  
Antiguo 01/04/2009, 08:10
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
Respuesta: Problema con capas (z-index)

Bueno, no sé cómo lo estarás haciendo tú. Mira este ejemplo a ver si te sirve de orientación.
  #4 (permalink)  
Antiguo 01/04/2009, 08:37
Avatar de gorkreg  
Fecha de Ingreso: julio-2008
Mensajes: 305
Antigüedad: 9 años, 4 meses
Puntos: 8
Respuesta: Problema con capas (z-index)

Gracias Mikmoro. El problema no lo tengo con el menú desplegable, que funciona perfectamente (puedes ver el código que uso más arriba). La cosa se complica pues tengo un banner y el menú desplegable que tiene aparecer por encima del banner (dos capas distintas). Este desplegable tapa al banner y, en consecuencia, también al ancla que tengo en ese banner. No se si me explico.

En este otro post está el código javascript que estoy usando para que el banner se abra con ese efecto acordeón:
http://www.forosdelweb.com/f13/probl...-capas-685276/
  #5 (permalink)  
Antiguo 01/04/2009, 08:39
Avatar de gorkreg  
Fecha de Ingreso: julio-2008
Mensajes: 305
Antigüedad: 9 años, 4 meses
Puntos: 8
Respuesta: Problema con capas (z-index)

¡Ah! Acabo de darme cuenta de lo que quieres decir. Estaba viendo el ejemplo a 1200x1024 y la caja con el enlace quedaba a un lado del menú no debajo. Ahora a 1024x768 queda debajo.

Me pongo a investigarlo.
Gracias.
  #6 (permalink)  
Antiguo 01/04/2009, 09:13
Avatar de gorkreg  
Fecha de Ingreso: julio-2008
Mensajes: 305
Antigüedad: 9 años, 4 meses
Puntos: 8
Respuesta: Problema con capas (z-index)

Pues ya está solucionado. Tan simple como eliminar la posición relativa del banner. Ahora ni siquiera necesito los z-index para que el menú desplegable aparezca por encima.

Gracias a todos.
  #7 (permalink)  
Antiguo 01/04/2009, 09:44
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
Respuesta: Problema con capas (z-index)

Como habrás visto, mi ejemplo no usa z-index (ni posición relativa en la caja (banner en tu caso).

Saludos.
  #8 (permalink)  
Antiguo 14/04/2009, 02:25
 
Fecha de Ingreso: mayo-2006
Mensajes: 131
Antigüedad: 11 años, 6 meses
Puntos: 1
Respuesta: Problema con capas (z-index)

Pues yo tengo el mismo problema y no se me soluciona quitando la posicion relativa ni el zindex al div que tiene los enlaces que no me funcionan.

alguna otra posible solución?

Gracias
__________________
flora
  #9 (permalink)  
Antiguo 14/04/2009, 04:10
Avatar de gorkreg  
Fecha de Ingreso: julio-2008
Mensajes: 305
Antigüedad: 9 años, 4 meses
Puntos: 8
Respuesta: Problema con capas (z-index)

Pon el código relevante o un enlace a la web a ver si te puedo ayudar.
__________________
}8[/
  #10 (permalink)  
Antiguo 14/04/2009, 06:08
 
Fecha de Ingreso: mayo-2006
Mensajes: 131
Antigüedad: 11 años, 6 meses
Puntos: 1
Respuesta: Problema con capas (z-index)

Este es el css de los enlaces que no me funcionan por culpa del zindex del menu que los tapa:

#regitro_idioma_buscador{
width:490px;
height:35px;
position:relative;
float:right;
z-index:400;
margin:63px 10px 0px 0px;
text-align:right;
z-index:1;
}
#registro_idioma{
width:280px;
height:35px;
float:left;
text-align:right;
margin:0px 0px 0px 0px;
}
#registro_idioma p{
width:140px;
height:35px;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#333;
margin:0;
padding:0px 0px 0px 150px;
text-align:right;
}
#registro_idioma p a{
width:140px;
height:35px;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#333;
text-decoration:none;
}

Si aumento el z index de #regitro_idioma_buscador funcionan los enlaces, pero entonces el desplegable del menú no aparece por encima.

Se te ocurre alguna posible solución?

Muchas gracias:)
__________________
flora
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 11:06.