Hola kemie,
kemie guaida escribió:
Hola ovilleros,
Estoy en un dilema. Necesito hacer la maquetacion de un sitio con 3
columnas que tengan el mismo alto. Hasta aquí no habria ningún problema,
podría utilizar faux columns, height 100% o incluso javascript.
Pero el esquema de la maquetacion es este:
http://pixilate.com/dreamless/layout.gif
por lo que col 2 y col 3 no deben de estar al 100% ni ser del mismo
alto que col1. La opcion que me quedaría es utilizar faux columns, pero
mi idea era maquetar con medidas relativas para que los contenedores se
expandan con el tamaño del texto.
Alguien sabe de alguna tecnica para poder hacerlo?
Hice algo parecido en http://textilmandiyu.com/ aunque usando al menos
un div extra.
En tu caso, se podría hacer usando un par de div más de lo mínimamente
necesario para maquetar el sitio, lo cual últimamente no me parece "el"
pecado.
Te explico mi idea:
<div id="cont1">
<div id="header">
</div>
<div id="cont2">
<div id="col1">
</div>
<div id="intro">
</div>
<div id="cont3">
<div id="col2">
</div>
<div id="col3">
</div>
</div>
</div>
</div>
Y en la CSS, aparte de las propiedades para maquetar el conjunto, cada
#containerN con una imagen repetida para simular el fondo de cada columna:
#cont1 {background: url(imagen_col1) 0 0 repeat-y; }
#cont2 {background: url(imagen_col2) 15em 0 repeat-y; }
#cont3 {background: url(imagen_col3) 45em 0 repeat-t; }
Nota 1: 15em y 45em son ejemplos de medidas relativas de la ubicación de
cada columna respecto al margen izquierdo.
Nota 2: las imagenes deberían ser más anchas que cada columna que
representa para cuando el layout se agranda.
En síntesis, la idea es que los fondos se desplacen hacia la derecha
según el ancho cada columna, se superpongan y se repitan de arriba a abajo.
Nota 3: se me acaba de ocurrir que si desearas agregarle un borde a cada
columna para simular "cajas", el borde derecho de col1 debería estar en
la imagen de col2 y el desplazamiento del background debería ser menor.
Pero esto implicaría agregar un nuevo div con una cuarta imagen, para
hacer el borde derecho de col3.
En fin, espero que se entienda explicado así "en el aire". Si la idea
resulta interesante, ya tengo un nuevo artículo en carpeta para mi
futuro blog, jeje.
Saludos
--
Camilo Kawerín
27Sur comunicación & diseño
http://www.27sur.com
Recuerde *RESPONDER* a este mail, así puedo hacer un seguimiento de la
conversación.
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
