Foros del Web » Creando para Internet » CSS »

Problema Z-Index

Estas en el tema de Problema Z-Index en el foro de CSS en Foros del Web. Buenas tardes compañeros. tengo un problema con la propiedad z-index, la estoy aplicando en una pagina actualmente pero no conozco muy bien su funcionamiento, la ...
  #1 (permalink)  
Antiguo 04/05/2010, 19:43
Avatar de luciio  
Fecha de Ingreso: junio-2009
Ubicación: Guadalajara, MX.
Mensajes: 351
Antigüedad: 8 años, 6 meses
Puntos: 38
Problema Z-Index

Buenas tardes compañeros.

tengo un problema con la propiedad z-index, la estoy aplicando en una pagina actualmente pero no conozco muy bien su funcionamiento, la pagina web es esta: http://www.casaiguana.mx/temp/

como ven hay una hoja en la parte superior derecha que quiero posicionar abajo del menu, y de ser posible encima de el flash, actualmente pues me interesa posicionar esa hoja abajo del menu solo que no se que estoy haciendo mal, ya de plus y si es posible pues no se si se puda posicionar encima del flash. uin saludo y muchas gracias, les dejo el codigo:

HTML:
Cita:
<body>
<div id="contenedor">
<div id="header">
<div id="logoheader"><img src="imagenes/logotipocabecera.jpg" width="274" height="172" alt="Hotel Casa Iguana" title="Hotel Casa Iguana" /></div>
<div id="menuheader">
<a href="#" onMouseOut="window.document['eul'].src = apagada.src" onMouseOver="window.document['eul'].src = iluminada.src"><img src="imagenes/menu/experiencia.jpg" width="164" height="33" title="Experiencia" alt="Experiencia" style="float:left; border:0px; margin-top:3px" name="eul" /></a>
<a href="#" onMouseOut="window.document['eul2'].src = apagada2.src" onMouseOver="window.document['eul2'].src = iluminada2.src"><img src="imagenes/menu/ubicacion.jpg" width="164" height="33" title="Ubicacion" alt="Ubicacion hotel casa iguana" class="botonesmenu" name="eul2" /></a>
<a href="https://reservations.ihotelier.com/istay.cfm?hotelid=15311" onMouseOut="window.document['eul3'].src = apagada3.src" onMouseOver="window.document['eul3'].src = iluminada3.src"><img src="imagenes/menu/reservar.jpg" width="164" height="33" title="Reservar" alt="Reservar habitacion" class="botonesmenu" name="eul3" /></a>
<a href="#" onMouseOut="window.document['eul4'].src = apagada4.src" onMouseOver="window.document['eul4'].src = iluminada4.src"><img src="imagenes/menu/galeria.jpg" width="164" height="33" title="Galeria Fotografica" alt="Galeria Fotografica" style="float:left; border:0px; margin-top:3px" name="eul4" /></a>
<a href="#" onMouseOut="window.document['eul5'].src = apagada5.src" onMouseOver="window.document['eul5'].src = iluminada5.src"><img src="imagenes/menu/atracciones.jpg" width="164" height="33" title="Atracciones" alt="Atracciones puerto vallarta" class="botonesmenu" name="eul5" /></a>
<a href="#" onMouseOut="window.document['eul6'].src = apagada6.src" onMouseOver="window.document['eul6'].src = iluminada6.src"><img src="imagenes/menu/contactanos.png" width="164" height="33" title="Contactanos" alt="Contacto" class="botonesmenu" name="eul6" /></a> </div>
<div id="hoja"><img src="imagenes/hoja.png" width="315" height="354" /></div>
<div id="lenguaje"><a href="#">Español</a> / <a href="#">English</a></div>
</div>
<div class="corte"></div>
<div id="flashheader">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','864','heigh t','305','src','imagenes/headerflash','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movi e','imagenes/headerflash' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="864" height="305" wmode="opaque" >
<param name="movie" value="imagenes/headerflash.swf" />
<param name="quality" value="high" />
<embed src="imagenes/headerflash.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="864" height="305"></embed>
</object>
</noscript></div>
<div id="banners1">
<div id="bannercentro">
<img src="imagenes/bannercentro1.jpg" width="284" height="189" alt="Restaurant Casa Iguana" title="Restaurant Casa Iguana" />
<img src="imagenes/bannercentro2.jpg" width="284" height="131" />
</div>
<div id="bannerderecha">
<img src="imagenes/bannerderecha1.jpg" width="284" height="189" alt="Habitaciones Casa Iguana" title="Habitaciones Casa Iguana" />
<img src="imagenes/bannerderecha2.jpg" width="284" height="131" />
</div>
<img src="imagenes/bannerizquierda.jpg" width="284" height="320" style="float:left;margin-left:6px" /></div>
<div class="corte"></div>
<div id="banners2">
<div id="abajoizquierda">
<p class="titulo1">Casa Iguana All Suites Hotel</p>
<p class="direccion">
<strong>Lada sin costo México:</strong><br /> 01 800 681-9536<br />
<strong>Toll free from USA & CAN:</strong><br /> 1-888-277-5816<br />
</p>
<div id="wx_module_3157">
<a href="http://www.weather.com/weather/local/MXJO0047">Puerto Vallarta Weather Forecast, Mexico</a>
</div>
<div style="text-align:center; margin: 0 auto">
<script type="text/javascript">

var wx_locID = 'MXJO0047';

var wx_targetDiv = 'wx_module_3157';

var wx_config='SZ=180x150*WX=FHW*LNK=SSNL*UNT=C*BGI=sp ring*MAP=null|null*DN=casaiguana.com.mx*TIER=0*PID =1182184139*MD5=645d1d9387d832041fbe78a7e8107dc0';

document.write('<scr'+'ipt src="'+document.location.protocol+'//wow.weather.com/weather/wow/module/'+wx_locID+'?config='+wx_config+'&proto='+document .location.protocol+'&target='+wx_targetDiv+'"></scr'+'ipt>');
</script></div>

</div>
<div id="abajoderecha">
<div class="bannerspa">
<img src="imagenes/bannerspa.jpg" width="200" height="265" alt="Spa Puerto Vallarta" title="Spa Casa Iguana" /> </div>
<div class="banneratracciones">
<img src="imagenes/banneratracciones.jpg" width="199" height="265" alt="Atracciones Puerto Vallarta" title="Atracciones Puerto Vallarta" />
</div>
</div>
</div>
<div class="corte"></div>
<div id="redes">
<img src="imagenes/siguenos.jpg" width="197" height="50" />
<img src="imagenes/botonfacebook.jpg" width="50" height="52" title="Siguenos en Facebook" />
<img src="imagenes/botontwitter.jpg" width="50" height="52" title="Siguenos en Twitter" style="margin-left: 20px" /></div>
<div id="pie">
<p class="pie">© 2010 Casa Iguana - Todos los derechos reservados. Diseñador por: <a style="color:#FFFFFF" href="http://www.lografico.com">lografico.com</a> </p>
</div>
</div>
</body>
</html>
CSS
Cita:
body { text-align:center; margin:0; padding:0; background-image: url(imagenes/fondo.jpg)}

div#hoja { width:315px; height:354px; float: right; position:absolute; top:0px; right:0px; z-index:2 }

#contenedor { margin:0 auto 0 auto; width:890px; text-align:left; margin-top:0px; background-color:#FFFFFF}

#header { width:890px; height:189px; background-image:url(imagenes/cabecera.jpg); position:relative }

div#menuheader { width:498px; height:75px; float:left; left:303px; top:57px; position:absolute; z-index:10 }

a { color:#01b9ba }

div#lenguaje { width:100px; top:160px; left:782px; position:absolute; float:left; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold }

img.botonesmenu { float:left; margin-left:3px; border:0px; margin-top:3px }

div#logoheader { width:274px; height:172px; left:10px; float:left; position:absolute }

#flashheader { width: 864px; height: 305px; margin: 0 auto }

#banners1 { width:864px; height: 320px; margin: 0 auto; margin-top:25px }

#bannercentro { width:284px; height:320px; float:left }

#bannerderecha { width:284px; height:320px; float:left; margin-left:6px }

#banners2 { width:864px; height: 324px; margin: 0 auto; margin-top:25px }

#abajoizquierda { width:260px; height: 294px; float:left; padding:15px }

#abajoderecha { width:574px; height:324px; background-image:url(imagenes/moduloverdeabajo.jpg); float:left }

.banneratracciones { width:199px; height:265px; float:left; margin-left:71px; margin-top:37px; }

.bannerspa { width:200px; height:216px; float:left; margin-left:63px; margin-top:37px }

.corte { clear:both }

P.titulo1 { font-family:Arial, Helvetica, sans-serif; font-size:18px; font-stretch:expanded; color:#ffcd04;font-weight:bold }

p { font-family:Arial, Helvetica, sans-serif; font-size:12px; font-stretch:extra-expanded; font-weight:400 }

p.direccion { font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:20px; font-stretch:extra-expanded; font-weight:400 }

#redes { width:864px; height:60px; margin: 0 auto; margin-top:25px; text-align:center }

#pie { width:864px; height:35px; background-color:#a3c30a; margin: 0 auto; margin-top:25px; text-align:center; padding-top:10px }

p.pie { font-family:Arial, Helvetica, sans-serif; font-size:10px; line-height:20px; font-stretch:extra-expanded; font-weight:400; color:#FFFFFF }
__________________
cursos delineado permanente - mi selección de plantillas para wordpress
  #2 (permalink)  
Antiguo 04/05/2010, 20:50
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.825
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: Problema Z-Index

al flash agrega un parámetro -> wmode="transparent"

y en tu hoja de estilos agrega:

#flashheader -> position:relative;
div#menuheader -> z-index:150;

el z-index necesita que el elemento tenga especificada la propiedad position
el z-index mas alto se mostrara ensima del mas pequeño

ejem z-index:100; se muestra encima de z-index:50;
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #3 (permalink)  
Antiguo 04/05/2010, 23:20
Avatar de luciio  
Fecha de Ingreso: junio-2009
Ubicación: Guadalajara, MX.
Mensajes: 351
Antigüedad: 8 años, 6 meses
Puntos: 38
Respuesta: Problema Z-Index

Hola !!

muchisimas gracias por responder, por fin lo pude solucionar se posiciono la hoja debajo del menu, gracias !!

pero no se pudo posicionar encima del flash, sabes porque?

Saludois !

EH LOGRADO HACERLO, MUCHISIMAS GRACIAS POR TU AYUDA !!!
__________________
cursos delineado permanente - mi selección de plantillas para wordpress

Última edición por luciio; 05/05/2010 a las 01:11

Etiquetas: z-index
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 13:34.