Problema con div's

-=ArgoN=- · #1 (**permalink**) 11/09/2007, 14:02

Hola amig@s,

Tengo el siguiente problema.
Resulta que tengo una tabla con contenido, por lo cual el alto de esta tabla puede variar. Lo que quiero conseguir es que el fondo de esta tabla sea una película flash. Es decir, que la película flash se vea detrás del contenido de la tabla, y que además que este fondo flash sea tan grande como la tabla (la tabla varia de alto dependiendo de la cantidad de contenido).

Aquí está el último código que he probado:

Código HTML:

<html>
<head>
<title>Prueba</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#contenedor {
	position:relative;
	overflow:hidden;
	width:100%;
	z-index:1;
	border: 2px solid #0080FF;
}
#contenido {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	z-index:2;
	border: 2px solid #FF0000;
}
</style>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="contenedor">
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="100%" height="100%" id="tronco" align="middle">
	  <param name="allowScriptAccess" value="sameDomain" />
	  <param name="movie" value="fondo.swf" />
	  <param name="quality" value="high" />
	  <param name="scale" value="exactfit" />
	  <param name="salign" value="lt" />
	  <param name="wmode" value="transparent" />
	  <embed src="fondo.swf" quality="high" scale="exactfit" salign="lt" bgcolor="" wmode="transparent" width="100%" height="100%" name="tronco" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
	</object>
 <div id="contenido">
  <table id="taula_general" class="taula_general" cellpadding="0" cellspacing="0">
    <tr>
      <td colspan="4" width="100%">
        <!-- Cabecera flash !-->
      </td>
    </tr>
    <tr> 
      <td width="208" height="509" valign="top">
        <!-- Menu flash !-->
      </td>
      <td width="6" rowspan="2">&nbsp;</td>
      <td valign="top" align="center" width="100%" height="auto" rowspan="2">
       <!-- Contenido variable de la página en HTML !-->
      </td>
      <td rowspan="2" width="6">&nbsp;</td>
    </tr>
    <tr>
      <td width="208" valign="top">
	<!-- Otro objeto flash que se adapta al alto de la página !-->
      </td>
    </tr>
    <tr>
      <td colspan="4"> 
        <!-- Pie flash !-->
      </td>
    </tr>
  </table>
 </div>
</div>
</body>
</html>

Lo único que consigo con esto es ver la tabla con su contenido html variable y el flash de fondo detrás. Hasta aquí todo bien.
El problema es que el flash que esta en el div contenedor y hace de fondo solo ocupa el alto de la pantalla, de manera que si el contenido html sigue más para abajo, el flash se corta justo cuando empezamos a bajar la barra de desplazamiento.
Esto pasa debido seguramente a que los parametros del flash son: scale=exactfit y height=100% por lo que el alto lo pone al 100% pero de la ventana, no del div que lo contiene y no sé como hacerlo

No se si me he explicado bien, pero os pido que hagáis un esfuerzo para imaginaroslo.

¡Muchas gracias!

ArgoN

PatomaS · #2 (**permalink**) 11/09/2007, 23:33

Hola

Controlar las dimensiones verticales de los objetos es un poco truculento debido a las diferencias de interpretación del viewport. Sin duda, la mejor manera es asignar una dimensión fija a dicha capa.

Claro que como dices, la tabla puede variar.

La mejor solución que se me ocurre, es que analices las dimensiones de la capa de la tabla o de la propia tabla mediante JavaScript y una vez las sabes, modifiques en tiempo de ejecución la dimensión de la capa con flash.

Felicidad