Foros del Web » Creando para Internet » CSS »

Propiedad Z-index CSS (Ayudaa!!!)

 Estas en el tema de Propiedad Z-index CSS (Ayudaa!!!) en el foro de CSS en Foros del Web. Hola amigos, necesito una ayuda, estoy desarrollando un sitio web, ya casi por terminar, tngo un efecto zoom realizado con CSS, a la vez tengo ...
  #1 (permalink)  
Antiguo 05/08/2011, 13:11
 
Fecha de Ingreso: enero-2011
Mensajes: 60
Antigüedad: 13 años, 3 meses
Puntos: 0
Propiedad Z-index CSS (Ayudaa!!!)
Hola amigos, necesito una ayuda, estoy desarrollando un sitio web, ya casi por terminar, tngo un efecto zoom realizado con CSS, a la vez tengo un plugin JQUERY (J-Cycle), que no me deja mostrar bien el zoom, se q es eso pues en otra seccion de la pagina que tambien hago zoom, y no ocupo el Plugin Jquery, se ve todo bien, les paso la pagina, acabo de subirla www.twiiti.com/gutierrez2 , en la pagina de INICIO , exactamente en las fotos de las casas, no me muestra bien, quiero q se sobreponga a los contenedores padres, en la seccion de INMUEBLES ahi muestro bien el efecto zoom con CSS. Espero q me ayuden, ya llevo horas con esto ..


Código HTML: 
Ver original
  1. CODIGO HTML DEL CONTENEDOR DE LAS IMAGENES
  2.  
  3. <div class="fichero">
  4.  
  5.     <div style="width:97px;height:19px;position:absolute;z-index:4;float:left;margin-top:9px;margin-left:111px;"><a href="index.php?dir=ver_inmueble"><img src="template/Inmuebles/pestana.png" border="0px"/></a></div>
  6.     
  7.     <!-- Si esta VENDIDO o en OFERTA la CASA, MOSTRAR 'template/Inmuebles/etiqueta_vendido.png' o template/Inmuebles/etiqueta_oferta.png -->
  8.     <div style="width:78px;height:78px;position:absolute;z-index:4;float:left;margin-top:-10px;margin-left:-15px;" class="etiqueta_normal"><img src="template/Inmuebles/etiqueta_oferta.png" border="0px"/></div>
  9.     <!-- -->
  10.     
  11.     <div class="sombra">
  12.             
  13.             <div class="contenido" onmouseover="this.className='fichero_zoom imagen venta_zoom detalle_zoom leer_mas_zoom detalle'" onmouseout="this.className='contenido'">
  14.             
  15.                 <!-- Si esta VENDIDO o en OFERTA la CASA, MOSTRAR 'template/Inmuebles/etiqueta_vendido_zoom.png' o template/Inmuebles/etiqueta_oferta_zoom.png -->
  16.                 
  17.                 <div class="etiqueta_zoom"><img src="template/Inmuebles/etiqueta_oferta_zoom.png" border="0px"/></div>
  18.                 <!-- -->
  19.             
  20.                 <a href="index.php?dir=ver_inmueble"><img class="imagen" src="template/Inmuebles/img6.jpg" border="0px" /></a>
  21.         
  22.                 <!-- VENTA U OFERTA -->
  23.             <!-- <div class="venta estrangelo">VENTA</div> -->
  24.                 <div class="venta estrangelo" style="color:#D93132">OFERTA</div>
  25.                 
  26.            <!-- <div class="venta_zoom estrangelo" style="font-size:17px;color:#2D4E25;display:none;">VENTA</div> -->
  27.                 <div class="venta_zoom estrangelo" style="font-size:17px;color:#D93132;display:none;">OFERTA</div>
  28.         
  29.                 <div class="detalle estrangelo">
  30.                 CASA: Av. San Martín (detrás Hotel Yotaú),(Mostrar Max. 70 caracteres)
  31.                 </div>
  32.                 
  33.                 <div class="detalle_zoom estrangelo" style="font-size:14px;display:none;">
  34.                 CASA: Av. San Martín (detrás Hotel Yotaú), Santa Cruz (Mostrar Max. 100 caracteres)
  35.                 </div>
  36.         
  37.                 <div class="leer_mas estrangelo"><a href="index.php?dir=ver_inmueble" style="text-decoration:none;color:#000000;">...Ver mas</a></div>
  38.                 
  39.                 <div class="leer_mas_zoom estrangelo" style="font-size:15px;display:none;"><a href="index.php?dir=ver_inmueble" style="text-decoration:none;color:#000000;">...Ver mas</a></div>
  40.                 
  41.                 <div class="precio_zoom estrangelo" style="visibility:hidden"><a href="#" style="display:block;color:#FFFFFF;text-decoration:none;padding-top:3px;font-size:20px;">$us. 250.000</a></div>
  42.                 
  43.                 <script>
  44.                     $('.contenido').mouseover(function() {
  45.                         $('.fichero_zoom .precio_zoom').css("visibility","visible");
  46.                         
  47.                         $('.fichero_zoom .etiqueta_zoom').css("visibility","visible");
  48.                         
  49.                         $('.fichero_zoom .venta_zoom').css("display","block");
  50.                         $('.fichero_zoom .venta').css("display","none");
  51.                         
  52.                         $('.fichero_zoom .detalle_zoom').css("display","block");
  53.                         $('.fichero_zoom .detalle').css("display","none");
  54.                         
  55.                         $('.fichero_zoom .leer_mas_zoom').css("display","block");
  56.                         $('.fichero_zoom .leer_mas').css("display","none");
  57.                         
  58.                             
  59.                     });
  60.                     $('.contenido').mouseout(function() {
  61.                         $('.precio_zoom').css("visibility","hidden");
  62.                     
  63.                         $('.etiqueta_zoom').css("visibility","hidden");
  64.                         
  65.                         $('.venta_zoom').css("display","none");
  66.                         $('.venta').css("display","block");
  67.                         
  68.                         $('.detalle_zoom').css("display","none");
  69.                         $('.detalle').css("display","block");
  70.                         
  71.                         $('.leer_mas_zoom').css("display","none");
  72.                         $('.leer_mas').css("display","block");
  73.                         
  74.                     });
  75.                 </script>
  76.             </div> 
  77.         
  78.     </div>
  79.     
  80.     <div class="precio estrangelo"><a href="#" style="display:block;color:#FFFFFF;text-decoration:none;">$us. 250.000</a></div>
  81.     
  82. </div>


Código CSS: 
Ver original
  1. <!-- CSS DEL CONTENEDOR (FICHERO) -->
  2.  
  3. .fichero
  4. {
  5.     width:222px;
  6.     height:262px;
  7.     margin:0px;
  8.     padding:0px;
  9.     border:0px;
  10.     float:left;
  11.     background-image:url(../template/Fichero/bg_fichero1.png);
  12.     background-repeat:no-repeat;
  13.     position:relative;
  14. }
  15.  
  16. .fichero .sombra
  17. {
  18.     width:216px;
  19.     height:220px;
  20.     margin:0px;
  21.     margin-left:2px;
  22.     margin-top:14px;
  23.     padding:0px;
  24.     border:0px;
  25.     float:left;
  26.     background:url(../template/Inmuebles/fondo_contenido.png);
  27.     background-repeat:no-repeat;
  28.     display:inline;
  29. }
  30. .fichero .sombra .contenido
  31. {
  32.     width:194px;
  33.     height:auto;
  34.     margin:0px;
  35.     margin-left:12px;
  36.     margin-top:14px;
  37.     padding:0px;
  38.     border:0px;
  39.     float:left;
  40. }
  41. .fichero .sombra .contenido .imagen
  42. {
  43.     width:194px;
  44.     height:138px;
  45.     margin:0px;
  46.     padding:0px;
  47.     border:0px;
  48.     float:left;
  49. }
  50. .fichero .sombra .contenido .venta
  51. {
  52.     width:189px;
  53.     height:15px;
  54.     margin:0px;
  55.     padding:0px;
  56.     padding-top:2px;
  57.     padding-left:5px;
  58.     border:0px;
  59.     float:left;
  60.     font-size:14px;
  61.     color:#2D4E25;
  62.     background:#FFFFFF;
  63. }
  64. .fichero .sombra .contenido .detalle
  65. {
  66.     width:189px;
  67.     height:30px;
  68.     margin:0px;
  69.     padding:0px;
  70.     padding-left:5px;
  71.     border:0px;
  72.     float:left;
  73.     font-size:11px;
  74.     color:#000000;
  75.     text-align:justify;
  76.     background:#FFFFFF;
  77. }
  78. .fichero .sombra .contenido .leer_mas
  79. {
  80.     width:179px;
  81.     height:15px;
  82.     margin:0px;
  83.     padding:0px;
  84.     padding-bottom:3px;
  85.     padding-right:15px;
  86.     border:0px;
  87.     float:left;
  88.     font-size:12px;
  89.     color:#000000;
  90.     text-align:right;
  91.     background:#FFFFFF;
  92. }
  93. .fichero .precio
  94. {
  95.     width:139px;
  96.     height:20px;
  97.     margin:0px;
  98.     margin-top:3px;
  99.     padding:0px;
  100.     border:0px;
  101.     float:right;
  102.     background-color:#80B740;
  103.     text-align:center;
  104.     font-size:16px;
  105.     color:#FFFFFF;
  106. }
  107.  
  108. .fichero_zoom  
  109. {
  110.     position:absolute;
  111.     left:-65px; top:-15px; 
  112.     width:318px; 
  113.     height:334px;
  114.     background-color:#FFFFFF;
  115.     z-index:5; 
  116.     -webkit-box-shadow: 6px 6px 20px #333;
  117.     -moz-box-shadow: 6px 6px 20px #333;
  118.     box-shadow:#333 6px 6px 20px; /*future browser*/
  119. }
  120.  
  121. .fichero_zoom  .imagen
  122. {width:277px;height:195px;margin:0px;margin-left:17px;margin-top:14px;padding:0px;border:0px;float:left;}
  123.  
  124. .fichero_zoom .venta_zoom
  125. {
  126.     width:300px;
  127.     height:20px;
  128.     margin:0px;
  129.     padding:0px;
  130.     padding-top:9px;
  131.     padding-left:17px;
  132.     border:0px;
  133.     float:left;
  134.     font-size:20px;
  135.     background:#FFFFFF;
  136. }
  137. .fichero_zoom .detalle_zoom
  138. {
  139.     width:300px;
  140.     height:auto;
  141.     margin:0px;
  142.     padding:0px;
  143.     padding-left:17px;
  144.     border:0px;
  145.     float:left;
  146.     font-size:20px;
  147.     color:#000000;
  148.     text-align:justify;
  149.     background:#FFFFFF;
  150. }
  151.  
  152. .fichero_zoom .leer_mas_zoom
  153. {
  154.     width:300px;
  155.     height:15px;
  156.     margin:0px;
  157.     padding:0px;
  158.     padding-bottom:3px;
  159.     padding-right:15px;
  160.     border:0px;
  161.     float:left;
  162.     font-size:12px;
  163.     color:#000000;
  164.     text-align:right;
  165.     background:#FFFFFF;
  166. }
  167.  
  168. .fichero_zoom .precio_zoom
  169. {
  170.     width:175px;
  171.     height:26px;
  172.     margin:0px;
  173.     margin-top:5px;
  174.     padding:0px;
  175.     border:0px;
  176.     float:right;
  177.     background-color:#80B740;
  178.     text-align:center;
  179.     font-size:16px;
  180.     color:#FFFFFF;
  181. }
  182.  
  183. .etiqueta_zoom
  184. {
  185.     width:92px;
  186.     height:92px;
  187.     position:absolute;
  188.     z-index:4;
  189.     float:left;
  190.     margin-top:-8px;
  191.     margin-left:-7px;
  192.     visibility:hidden;
  193. }
  194.  
  195.  
  196.  
  197. .fichero_zoom  
  198. {
  199.     position:absolute;
  200.     left:-65px; top:-15px; 
  201.     width:318px; 
  202.     height:334px;
  203.     background-color:#FFFFFF;
  204.     z-index:5; 
  205.     -webkit-box-shadow: 6px 6px 20px #333;
  206.     -moz-box-shadow: 6px 6px 20px #333;
  207.     box-shadow:#333 6px 6px 20px; /*future browser*/
  208. }

GRACIAS
Última edición por Jsc_dark25; 05/08/2011 a las 14:58
  #2 (permalink)  
Antiguo 05/08/2011, 15:29
Avatar de ArturoGallegos
Moderador
  
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 2 meses
Puntos: 1146
Respuesta: Propiedad Z-index CSS (Ayudaa!!!)
si sabes que es por ese js ve revisándolo parte por parte... lo que si te puedo decir es que no es un problema con el z-index... con el js estas agregando overflow:hidden; y por consiguiente el contenido que exceda el tamaño asignado no se muestra

Cita:
<ul class="slide_inicio" style="width: 922px; height: 272px; margin: 0px; padding: 0px; border: 0px none; position: relative; overflow: hidden;">
  #3 (permalink)  
Antiguo 06/08/2011, 10:15
 
Fecha de Ingreso: enero-2011
Mensajes: 60
Antigüedad: 13 años, 3 meses
Puntos: 0
Respuesta: Propiedad Z-index CSS (Ayudaa!!!)
Gracias!!!... no me habia fijado en eso .. T agradezco!!!!:. Me iban a sacar la Mier.... en mi trabajo jajajajajajjaa Saludos desde Bolivia

Etiquetas: jquery, zoom
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 17:33.