Foros del Web » Creando para Internet » CSS »

Cómo hacer este Layout en CSS

Estas en el tema de Cómo hacer este Layout en CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 03/03/2009, 18:12
 
Fecha de Ingreso: julio-2004
Mensajes: 45
Antigüedad: 13 años, 4 meses
Puntos: 0
Cómo hacer este Layout en CSS

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.
  #2 (permalink)  
Antiguo 03/03/2009, 18:28
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Cómo hacer este Layout en CSS

Cita:
Iniciado por bookmark Ver Mensaje
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.
Por que en realidad la columna izquierda (el menú), está SOBRE el objeto flash, que efectivamente ocupa el 100% de ancho y el 79% de alto
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 03/03/2009, 18:38
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: Cómo hacer este Layout en CSS

intenta quitando el ancho. El comportamiento normal de los elementos de bloque es llenar toda la pantalla. Si no funciona avisa y buscamos una solución más inteligente.
__________________
twitter: @imbuzu
  #4 (permalink)  
Antiguo 03/03/2009, 18:48
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: Cómo hacer este Layout en CSS

hummm, hice la prueba con fiorebug y al parecer no se soluciona el problema. Lo que puedes hacer es usar javascript para calcular el porcentaje de la pantalla que ocupa tu menu y le asignas el porcentaje restante a tu flash. Nada complicado, pero estoy casi seguro que debe haber una mejor forma de hacerlo.
__________________
twitter: @imbuzu
  #5 (permalink)  
Antiguo 05/03/2009, 10:07
 
Fecha de Ingreso: julio-2004
Mensajes: 45
Antigüedad: 13 años, 4 meses
Puntos: 0
Respuesta: Cómo hacer este Layout en CSS

Buenas, simplemente que no he encontrado la solucón. No se entienden un div con un ancho fijo al lado de otro div con ancho al 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.
  #6 (permalink)  
Antiguo 05/03/2009, 10:09
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Cómo hacer este Layout en CSS

Es exactamente lo que te dije que hacen en la página que pusiste como referencia:
Cita:
Por que en realidad la columna izquierda (el menú), está SOBRE el objeto flash, que efectivamente ocupa el 100% de ancho y el 79% de alto
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 05/03/2009, 16:04
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: Cómo hacer este Layout en CSS

TE lo explico:

Tienes si tu ventana mide 1024 y tienes un elemento que mide 150 px y a lado le pones uno que mide 100% (1024), entonces es lógico que te de ese problema no crees? Te di una solución, tu encontraste otra, necesitas una más?

Saludos.
__________________
twitter: @imbuzu
  #8 (permalink)  
Antiguo 09/03/2009, 06:38
 
Fecha de Ingreso: julio-2004
Mensajes: 45
Antigüedad: 13 años, 4 meses
Puntos: 0
Respuesta: Cómo hacer este Layout en CSS

Gracias a los dos, queda entendida esta solución.

Saludos,



Cita:
Iniciado por buzu Ver Mensaje
TE lo explico:

Tienes si tu ventana mide 1024 y tienes un elemento que mide 150 px y a lado le pones uno que mide 100% (1024), entonces es lógico que te de ese problema no crees? Te di una solución, tu encontraste otra, necesitas una más?

Saludos.
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 08:33.