[SOLUCIONADO] Una capa transparente tapa links

[luisvasquez]

Amigos, buenas noches.

Acudo a ustedes para ver si alguno puede detectar algo que yo no veo. La verdad estoy agotado tratando de resolver este misterio.

Tengo un joomla en el cual instalé un módulo de menú que no es el que trae la plantilla por defecto. Al instalarlo, me di cuenta de que las subopciones se mostraban por debajo (debajo es "detrás de" en este caso) de un módulo de "slide show" que estaba en la portada.

Me puse a jugar con z-index dentro de los css y logré que se mostrara sobre el slide show, por lo que pensé que todo estaba resuelto.

Luego me di cuenta de que algunos enlaces no funcionan. Al parecer hay una capa div transparente que cubre dichos enlaces y no he podido ver cual es para cambiarle el z-index.

Uso firebug pero no logro detectar cual es ese div.

La web es la siguiente:

http://www.vivirdespeinadas.com/index.php.

Como pueden ver, no funcionan los links de redes sociales (a la derecha debajo del slide) y tampoco la parte superior del banner. (Si pueden observar, la parte inferior de ese banner si funciona el link)

Agradezco la ayuda que puedan darme. Sólo falta eso para entregar la web y no he podido.

1000 gracias,
Luis

[C2am]

El problema es que le diste un z-index:-1 al contenedor del slider y demás:

Código HTML:

<div id="rt-transition"...>
 

Código CSS:

#rt-transition {
position: relative;
z-index: -1;
}
 

Sí le das un valor 0 o negativo se pondrá fuera del alcance de la selección (mouse, tab, etc.)
Deberías ponerle un z-index mayor al submenu.

Fijate que tienes algunos errores de javascript lo cual puede hacer que las cosas no funcionen correctamente.

Lo investigue desde la Herramienta de desarrollo de Chrome.
Saludos

PD: me llamó la atención la cantidad de hojas de estilos y de js que tienes. Sólo un comentario.Saludos

[luisvasquez]

Iniciado por C2am

El problema es que le diste un z-index:-1 al contenedor del slider y demás:

Código HTML:

<div id="rt-transition"...>
 

Código CSS:

#rt-transition {
position: relative;
z-index: -1;
}
 

Sí le das un valor 0 o negativo se pondrá fuera del alcance de la selección (mouse, tab, etc.)
Deberías ponerle un z-index mayor al submenu.

Fijate que tienes algunos errores de javascript lo cual puede hacer que las cosas no funcionen correctamente.

Lo investigue desde la Herramienta de desarrollo de Chrome.
Saludos

PD: me llamó la atención la cantidad de hojas de estilos y de js que tienes. Sólo un comentario.Saludos

Gracias por tu respuesta. Efectivamente, al cambiar el z-index del #rt-transition a uno mayor que el del submenu funcionan los enlaces, peeeero, regreso al problema original, que el sub menu aparece por detrás del slide.

Lo que parece que debería hacer es colocarle a los enlaces un z-index mayor que el submenu, pero La propiedad z-index solo aplica a elementos que tengan la propiedad position en absolute o relative, el cual no es el caso del class donde están los iconos de las redes sociales.

http://www.vivirdespeinadas.com/index.php

¿Que me sugieres amigo? La verdad estoy ya agotado con este asunto.

Gracias de nuevo,
Luis

[pzin]

Pues ponle una posición relativa al menú y un z-index mayor, ¿qué problema hay?

[luisvasquez]

Iniciado por pzin

Pues ponle una posición relativa al menú y un z-index mayor, ¿qué problema hay?

Eso hice y se ve el menú sobre el slide, pero eso es precisamente lo que causa el problema que estoy planteando: Los links de las redes sociales y parte del banner que aparece a la derecha no funcionan.

Saludos,
Luis

[pzin]

Si, pero a eso ya te dijeron que quitaras el z-index negativo:

Código CSS:

#rt-transition {
  position: relative;
  z-index: -1;
}
 

No tiene sentido eso ahí y es lo que causa prácticamente el problema.

[luisvasquez]

Iniciado por pzin

Si, pero a eso ya te dijeron que quitaras el z-index negativo:

Código CSS:

#rt-transition {
  position: relative;
  z-index: -1;
}
 

No tiene sentido eso ahí y es lo que causa prácticamente el problema.

Gracias. Eso lo se. Quiero recapitular, porque ocurren 3 cosas diferentes:

1. Con el z-index:-1; en el contendedor del slide, el submenu se muestra pero no funciona el enlace de las redes sociales

2.- Con el z-index:2 (o cualquier valor positivo) el submenu ( de la opción "Nuestras secciones") se esconde debajo del slide.

3.- Si quito el z-index (no cambiando el valor sino borrandolo), funcionan los enlaces de las redes sociales y se muestra el submenú sobre el slide PERO sus links (los del submenu) no funcionan.

En fin, la verdad es que he probado cientos de combinaciones sin éxito.

(por cierto, acabo de dejarlo en la opción 3. Puedes ver que no funcionan los links del submenu)

¿Alguna otra sugerencia?

Saludos,
Luis Vásquez

[pzin]

Vale. Ahora con la solución número 3, esta

Iniciado por luisvasquez

3.- Si quito el z-index (no cambiando el valor sino borrandolo), funcionan los enlaces de las redes sociales y se muestra el submenú sobre el slide PERO sus links (los del submenu) no funcionan.

Aplicas también lo que te comenté en #4. A alguna de los mil contenedores del menú le aplicas un z-index mayor.

[pzin]

Como ves, tal como tienes la página aplicando el z-index como digo funciona:

[C2am]

A alguna de los mil contenedores del menú ...

Es un caso terminal de divitis aguda, junto con una colección infinita de .css y sobre todo librerías js.
Supongo que se debe a que es Joomla.

[luisvasquez]

Iniciado por C2am

Es un caso terminal de divitis aguda, junto con una colección infinita de .css y sobre todo librerías js.
Supongo que se debe a que es Joomla.

Exacto. Se debe a que es Joomla. Ahora estoy intentando encontrar los DIVs que contienen los enlaces en el submenu y no los encuentro. Al parecer Firebug no es tan bueno como pensaba y no se que otra herramienta usar.

[luisvasquez]

Iniciado por pzin

Como ves, tal como tienes la página aplicando el z-index como digo funciona:

Ya va mi hermano. No había visto este post ¿como le hiciste para que funcionara? ¿A quién tengo que matar??

[luisvasquez]

Iniciado por luisvasquez

Ya va mi hermano. No había visto este post ¿como le hiciste para que funcionara? ¿A quién tengo que matar??

Gracias gracias gracias 1000 gracias. Allí había que cambiar el z-index y se resolvió.