Ver Mensaje Individual
  #1 (permalink)  
Antiguo 30/03/2011, 02:15
Tarzan
 
Fecha de Ingreso: noviembre-2005
Ubicación: Alicante (España)
Mensajes: 242
Antigüedad: 18 años, 3 meses
Puntos: 1
Css adaptado a la resolución

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,