Hola a todos,
Necesito diseñar una serie de capas de forma relativa y con porcentajes para que se adapte a cualquier resolución superior o igual a 1024x768.
(Para 800x600 ya lo tengo implementado con capas fijas y, para menores resoluciones que esta, envío un mensajito que dice: “Tío, deshazte ya del 386 ése y ponte un ordenador en condiciones!!... Ah ¿Qué estás conectándote desde un móvil?... Bueno.. .pues me has pillao… Atento a nuevas versiones…” ;)
El caso es el siguiente.
4 capas, (porque lo quiero hacer con capas).
Situadas sobre una capa contenedora de 100% de ancho y 100 de alto. Para esta capa, creo que debería usar un tipo #contenedor {width:100%;height:100%;}
Las 4 capas deben situarse de forma alineada a la izquierda, (para ello float:left).
.capa_left1{float:left}
.capa_left2{float:left}
.capa_left3{float:left}
.capa_left4{float:left}
Y ahora el problema que no sé resolver.
Las capas 1 y 3, tienen un tamaño fijo de 245px de ancho x 100% alto. Este tamaño de 245 pixeles es porque contienen una imagen.
Las capas 2 y 4 han de tener el mismo ancho pero no ser estático, es decir, dependerá de la resolución de la pantalla. Así que tendría que ponerle un %, pero ¿cuál?
#contenedor{ width:100%;height:100%;}
.capa_left1{ width:245px;height:100%;float:left}
.capa_left2{ width:X%;height:100%;float:left}
.capa_left3{ width:245px;height:100%;float:left}
.capa_left4{ width:X%;height:100%;float:left}
¿Cómo defino el css de estas 4 capas más el contenedor?
Estoy poniendo colorines a cada capa con la propiedad background-color pero no termina de ajustarse bien a lo que quiero en diferentes resoluciones.
Saludos,
