Foros del Web - Ver Mensaje Individual - Problema Z-Index

luciio · #1 (**permalink**) 04/05/2010, 18:43

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 }