Foros del Web » Creando para Internet » CSS »

Capas superpuestas

Estas en el tema de Capas superpuestas en el foro de CSS en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 12/09/2008, 02:08
Avatar de bex
bex
Colaborador
 
Fecha de Ingreso: julio-2003
Ubicación: Buenos Aires
Mensajes: 2.484
Antigüedad: 20 años, 8 meses
Puntos: 34
Capas superpuestas

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!
  #2 (permalink)  
Antiguo 12/09/2008, 06:23
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 17 años
Puntos: 36
Respuesta: Capas superpuestas

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.
  #3 (permalink)  
Antiguo 12/09/2008, 15:46
Avatar de bex
bex
Colaborador
 
Fecha de Ingreso: julio-2003
Ubicación: Buenos Aires
Mensajes: 2.484
Antigüedad: 20 años, 8 meses
Puntos: 34
Respuesta: Capas superpuestas

Raulm, gracias por tu repsuesta. Para qué sirve cada cosa? El wmode, está validado? Gracias!
  #4 (permalink)  
Antiguo 13/09/2008, 04:15
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 17 años
Puntos: 36
Respuesta: Capas superpuestas

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.
  #5 (permalink)  
Antiguo 13/09/2008, 09:51
Avatar de bex
bex
Colaborador
 
Fecha de Ingreso: julio-2003
Ubicación: Buenos Aires
Mensajes: 2.484
Antigüedad: 20 años, 8 meses
Puntos: 34
Respuesta: Capas superpuestas

Muchas gracias!
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 01:52.