Problema por superpocision de animaciones con jquery

[sarumanice]

Buenas noches, estoy modificando un sitio web desde una plantilla, la cual tiene un slider por defecto usando jquery, y bueno encontre una bonita aplicacion en jquery en la parte izquierda de la pagina. Todo funciona OK, incluso el codigo esta validado en css3 y html5 (No quiere decir que la use al 100% pero no tiene errores para tal tipo)

El problema es que en pantallas de 19" o 20" se ve perfecto, la pagina al centro y la animacion adicional esta al lado y no causa problema.

Lo que sucede es que cuando la pagina se ve desde un monitor de 15" o 17" creo, la pagina se ve grande y la 2da animacion lateral se despliega por debajo del slider principal.

Me intereza saber como solucionar este problema.

Pueden ver la pagina en: www. disolu .com/ hosting
Agranden la vista precionando CTRL + (Tecla suma) y luego seleccionen el widget lateral y veran que se despliega por detras del slider principal.

Espero puedan ayudarme con ella, otro problema que tengo es que mi sitio aun no es compatible con i9.

Gracias por su ayuda

[evairdesign]

La solucion es bastante simple, la probé con el inspector de código de Chrome, le agregue a la clase .rp_list un z-index de 999 para superponerlo sobre las imágenes del slider y funciona perfect, pruebalo y me cuentas...

Código CSS:

.rp_list {
font-family: Verdana, Helvetica, sans-serif;
position: fixed;
right: -220px;
top: 40px;
margin: 0;
padding: 0;
z-index: 999;
}
 

[sarumanice]

Funciona Perfecto!

Gracias :D

ahora el problema es hacerl compatible todo el sitio con I9 :D

[sarumanice]

Gracias nuevamente funciona a la perfeccion, pero tengo una duda.. como supiste que solo era eso?. y otra cosa el z-index que agregas para que otra cosa sirve?. Y cual es su funcion en si.

Saludos.

Iniciado por evairdesign

La solucion es bastante simple, la probé con el inspector de código de Chrome, le agregue a la clase .rp_list un z-index de 999 para superponerlo sobre las imágenes del slider y funciona perfect, pruebalo y me cuentas...

Código CSS:

.rp_list {
font-family: Verdana, Helvetica, sans-serif;
position: fixed;
right: -220px;
top: 40px;
margin: 0;
padding: 0;
z-index: 999;
}
 

[evairdesign]

De nada men y bueno supe que era eso, porque el problema se debe a la superposición de los divs y la propiedad z-index en CSS funciona como capas, no sé si alguna vez haz trabajado con photoshop y sus capas, es lo mismo, por ejemplo si tu Slider tuviera un z-index de 2 y el widget lateral un z-index de 1, se mostraria el widget por debajo del slider, se podria decir que mientras mas grande sea el z-index mayor importancia tendrá, por eso le puse 999 para que no haya ningun valor mas alto que eso y sea de mayor prioridad

de todas maneras aqui tienes un ejemplo mejor explicado http://www.sidar.org/recur/desdi/mcss/manual/ejemplos/zindex.html

y la unica manera de hacerlo compatible con i9 es trabajando con hojas de estilos condicionales de internet explorer, debido a que siempre los programadores tenemos problemas con este navegador, la unica solucion es definirle su propia hoja de estilos de la siguiente manera.

tu archivo normalmente asigna el estilo asi:

Código HTML:

<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
 

Ahora para internet explorer tienes que hacer lo siguiente, asignándole su propia hoja de estilos.

Código HTML:

<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" media="screen" href="ie9.css" />
<![endif]-->
 

Hay muchas maneras de utilizar las condicionales, aqui tienes algunos ejemplos

http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

Espero a ver sido de ayuda, Saludos!!

[sarumanice]

Gracias Brother, si sabia de los stilos personalizados para navegador, solo que ahora el tema es probar que cambiar :D.

Con respecto al z-index nunca oi ni lei de del, y gracias por la informacion, creo que este foro no es solo que otros solucionen nuestros problemas si no aprender. :D

Saludos desde Peru.