Hola a todos, estpu intentando hacer el layout en CSS de la siguiente web:
http://www.de-dietrich.es/
Donde supongo que hay un DIV que contiene un flash que se adapta a la resolución de cada usuario, y se redimensiona si se modifica la ventana del navegador.
El layout creo que debería ser algo como esto:
El problema es que el DIV MENU tiene anchura fija, y el DIV FLASH debe ser varibable para que se adapta a la anchura de la pantalla. Si pongo 100% se desborda por la derecha. Tampoco sé si la altura del DIV CONTENIDOR, que contiene estos dos DIV's debe se en % o no.
Podeis ver lo que hecho
aquí.
En la web esta de
www.de-dietrich.es, el DIV que contiene el flash escalable empieza en el 0, y no tiene este problema.
A ver si alguien me pudiera decir la mejor manera de hacer este layout.
Código HTML:
<div id="header">Header</div>
<div id="contenidor">
<div id="menu">Menu</div>
<div id="flash"><script language="javascript">
if (AC_FL_RunContent == 0) {
alert("Esta página requiere el archivo AC_RunActiveContent.js.");
} else {
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0',
'width', '100%',
'height', '100%',
'src', 'pandohome',
'quality', 'high',
'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'noscale',
'wmode', 'window',
'devicefont', 'false',
'id', 'pandohome',
'bgcolor', '#000000',
'name', 'pandohome',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'pandohome',
'salign', ''
); //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=8,0,0,0" width="100%" height="100%" id="pandohome" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="pandohome.swf" /><param name="quality" value="high" /><param name="scale" value="noscale" /><param name="bgcolor" value="#000000" /> <embed src="pandohome.swf" quality="high" scale="noscale" bgcolor="#000000" width="100%" height="100%" name="pandohome" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</noscript></div>
<div id="footer">Footer</div>
</div> CSS:
Código:
#header {
height:100px;
background-color:yellow;
}
#contenidor {
position:absolute;
top:100px;
width:100%;
height:80%;
background-color:grey;
}
#menu {
float:left;
width:150px;
height:100%;
background-color:pink;
}
#flash {
position: absolute;
top: 0px;
left: 150px;
float:left;
width:100%;
height:100%;
background-color:green;
overflow:hidden;
}
#footer {
float:left;
width:100%;
height:50px;
background-color:red;
}
Muchas gracias por la ayuda.