Tema: Propiedad Z-index CSS (Ayudaa!!!)
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 05/08/2011, 13:11
Jsc_dark25
 
Fecha de Ingreso: enero-2011
Mensajes: 60
Antigüedad: 13 años, 2 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