Capas superpuestas

bex · #1 (**permalink**) 12/09/2008, 02:08

Hola maestros,

Estoy rediseñando mi sitio, primera vez que lo hago maquetando con divs y no con tablas (difícil transición). Me encuentro con dos problemas.

Por un lado pueden ver que en la página http://www.computacionclases.com.ar/prueba/index.html, tengo varias capas. #titulo es la primera dentro del contenedor, es absolut y tiene un z-index superior a todas las demás, que son relative. Sin embargo, al cargarse queda tapada por una animación flash en una capa relative con z-index: 1 (#header).

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
#header {
	width: 720px;
	height: 125px;
	z-index: 1;
}
#part-der {
	float: right;
	width: 175px;
	height: 600px;
}
#titulo {
	width: 320px;
	z-index: 5;
	position: absolute;
	top: 40px;
	height: 30px;
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 14pt;
}
#contenedor {
	width: 720px;
}
body {
	text-align: center;
}
#part {
	width: inherit;
	height: 600px;
}
-->
</style>
</head>

<body>
<div id="contenedor">
 <div id="titulo">Clases de computaci&oacute;n</div>
 <div id="header">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="720" height="110" title="Clases de computacion - Header">
      <param name="movie" value="header.swf" />
      <param name="quality" value="high" />
      <embed src="header.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="720" height="110"></embed>
    </object>
 </div>
 <div id="part">
  <div id="part-der">
  </div>
 </div>
</div>
</body>
</html>

Y por otro lado, veo que el atributo text-aling: right me sirve para centrar el contenedor en IE pero no en Firefox. Hay alguna solución para ambos navegadores?

Gracias!

Raulmmmm · #2 (**permalink**) 12/09/2008, 06:23

Para el primer problema una solución que funciona es poner el atributo wmode="opaque":

Código HTML:

<object wmode="opaque" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" title="Clases de computacion - Header" width="720" height="110">
      <param name="movie" value="header.swf">
      <param name="quality" value="high">
  <param name="wmode" value="opaque">
      <embed wmode="opaque" src="index_files/header.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="720" height="110">
    </object>

Para tu segundo problema, pon margin: 0 auto; en el #contenedor.

bex · #3 (**permalink**) 12/09/2008, 15:46

Raulm, gracias por tu repsuesta. Para qué sirve cada cosa? El wmode, está validado? Gracias!

Raulmmmm · #4 (**permalink**) 13/09/2008, 04:15

Es un atributo que creo que no es válido. Robnix explicó que sirve para esto:
window = El flash queda por encima del resto del html.
opaque = El flash queda por detrás del resto del html.
transparent = El flash queda por detrás o por delante, segun se especifique en el z-index.

bex · #5 (**permalink**) 13/09/2008, 09:51

Muchas gracias!