Comunidad de diseño web y desarrollo en internet online

Cómo hacer este Layout en CSS

Citar            
MensajeEscrito el 03 Mar 2009 11:46 pm
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 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 de los 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.

Este es el código html:

Código :

<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>


Y el código 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.

;-)

Por mllibre

8 de clabLevel



 

web, seo, sem y social media

firefox
Citar            
MensajeEscrito el 04 Mar 2009 12:23 am
Perdón, podeis ver lo que hecho clicando aquí

Por mllibre

8 de clabLevel



 

web, seo, sem y social media

firefox
Citar            
MensajeEscrito el 04 Mar 2009 05:35 am
creo que lo que hace falta es definir el witdh del contenedor como 100% tambien

Por jpcw

Claber

1715 de clabLevel

1 tutorial

Genero:Masculino  

AlgoritmicBrainDesigner

firefox
Citar            
MensajeEscrito el 05 Mar 2009 04:10 pm
Hola jpcw, el contenedor ya está a 100%.

Creo que NO se entienden un div con un ancho fijo al lado de otro div con ancho al 100%. (y los dos estan en un DIV contenedor con un width a 100%)

Al final lo que he hecho es que los dos empiecen des de 0px, y el de 100% que esté por debajo del de ancho fijo.

Si alguien encuentra la solución se lo agradecería.

Saludos.

Por mllibre

8 de clabLevel



 

web, seo, sem y social media

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.