Diseños Liquidos(Columnas)

[SPAWN3000]

Hola a todos,

Hace algun tiempo encontre un diseño en una web el cualestaba maquetado de la siguiente forma(La información se extrae de una bd):

(DIV ESTATICO FIJO) (DIV LIQUIDO) - Se amolda al espacio libre.
(DIV LIQUIDO--------) (DIV LIQUIDO)
(DIV LIQUIDO--------) (DIV LIQUIDO)
(DIV LIQUIDO--------) (DIV LIQUIDO)
(DIV LIQUIDO----TODA LA SECCION)

- SOLO (DIV ESTATICO FIJO) MANTIENE EL
TAMAÑO Y POSICION. El resto pertenecian
a una sola clase y se acomodaban por si solos.
- EL ultimo ocupa toda la seccion y que no hay mas capas. PEro en sistesis todos son iguales en definicion y estructura, saldo el div fijo.

No se si alguien conoce esta web y tiene algun ejemplo, ya recorri la web y no he podido encontrarla.

[egrueda]

Entra en dynamicdrive.com y busca los "Liquid Layouts"

[SPAWN3000]

No retorna nada la consulta, de todas formas gracias. Recuerdo que la web estba algo fea y sencilla pero exitia un link desde CSS garden que apuntaba a ella. Ya no existe.

[egrueda]

Hay que dártelo todo mascado. Entra en google y teclea:
Liquid Layouts site:dynamicdrive.com

[alexk]

3 columnas diseño liquido

[cristian_cena]

Hola Spawn:

Desconozco la web de la cual hablas pero creo que te refieres a un diseño hibrido, a lo mejor te pueda servir este link http://www.csslab.cl/2007/07/27/layout-hibrido/ y este otro que a mi me ha sido util en el aprendizaje http://www.grancomo.com/e/diseno_fij...l_es_mejor.php

Saludos!

[kseso?]

Iniciado por egrueda

Hay que dártelo todo mascado. Entra en google y teclea:
Liquid Layouts site:dynamicdrive.com

+1

[SPAWN3000]

Si fuese algo tan sencillo como crear un diseño hibrido o simplemente columnas 3 0 4, con header y footer no habria problema se que de esto actualmente se encuentra mucho en internet...Pero no es asi,

La idea es que el modelo se plantea de la sig. manera.


<------HEADER------>
<-------MENU-------->
|||.........................|||
|||.........................|||
|||.........................|||
|||.........................|||
|||.........................|||
|||.........................|||
<------FOOTER------>

Esto ya esta creado con un header, un menu, columna izq fija, contenido liquido,
columan derecha liquida y footer.

Ahora el problema esta en los puntos(El body):
debe existir una capa fija, luego varias capas
que se van agrupando hacia abajo de dos en dos y
al final si solo hay una capa que ocupe todo el espacio.
La capa fija puede ser una clase, pero el resto debe todas
pertenecer a una segunda clase.

A...B
B...B
B...B
B...B
B....

Donde A es fija, y en el espacio sobrante se acomoda B, luego como solo deben caber dos por fila la siguiente efectúa un salto pero no ocupa todo el ancho, solo un porcentaje, y la siguiente se acomoda junto a esta, luego existe un nuevo salto por que ya no hay mas espacio...etc. No existe un número definido de cuantas capas ya que todo se recupera de una BD en forma de publicaciones.
Ahora lo dificil en la ultima como ya no hay mas capas ocupa todo.

Aun parece que se mascado(No es imposible por que vi hacer e incluso en algunas paginas de diseño nombraban la complejidad del ejemplo(Por algo será).

"Por cierto nada de JS script". Aclaro que el número de capas hacia abaja no esta definido, "Que se puede implementar con ayuda de PHP es correcto, pero no es la idea".

De ser tan sencillo no me encontraria recurriendo a este sitio(Donde encuentro tanto experto pero uno que otro medio. Punto).
En este sitio hay bastante de lo que ya se ha propuesto pero no es lo que se busca: http://blog.html.it/layoutgala/
y aqui: http://www.dynamicdrive.com/style/layouts/

Agradezo el interes pero buscare por mis propios medios. Tk.

[alexk]

Iniciado por egrueda

Hay que dártelo todo mascado. Entra en google y teclea:
Liquid Layouts site:dynamicdrive.com

+2

PD: Sino quires ayuda no la pidas.

[cristian_cena]

Iniciado por SPAWN3000

Ahora el problema esta en los puntos(El body):
debe existir una capa fija, luego varias capas
que se van agrupando hacia abajo de dos en dos y
al final si solo hay una capa que ocupe todo el espacio.
La capa fija puede ser una clase, pero el resto debe todas
pertenecer a una segunda clase.

A...B

Donde A es fija, y en el espacio sobrante se acomoda B, luego como solo deben caber dos por fila la siguiente efectúa un salto pero no ocupa todo el ancho, solo un porcentaje, y la siguiente se acomoda junto a esta, luego existe un nuevo salto por que ya no hay mas espacio...etc.

Bien, crea un div y dale una id, luego llama esa id en <style> y aplicale la propiedad float

#mi_id_div_A {float:left, width:50%; ...} /*acomoda width a tu gusto*/
#mi_id_div_B {float:left, width:50%; ...} /**/

Sugerencia: investiga sobre la propiedad "position" de css. Buscala www.librosweb.es hay mucha info.

Disculpame, a que te refieres precisamente con "debe existir una capa fija" a lo mejor te sirva pasar por este hilo en el que dejo algunos links al respecto: http://www.forosdelweb.com/f4/como-d...2/#post3067349

Iniciado por SPAWN3000

No existe un número definido de cuantas capas ya que todo se recupera de una BD en forma de publicaciones.

Lamento no poder ayudarte, no se nada de bases de datos, pero supongo que puedes encontrar la forma de vincular algunos datos al divA y otros al divB

Iniciado por SPAWN3000

Ahora lo dificil en la ultima como ya no hay mas capas ocupa todo.

Crea un <div style="clear:both"></div> (Si, vacío) y ya los divs posteriores no se flotarán más a su alrededor

Espero te sirva, aunque no se si estoy a la altura de comprenderte muy bien.

Saludos!

[kseso?]

La estructura central vista desde css es sencilla, tanto como o bien como dice Cristian cada dos div's incluyes un corte o empaquetas de dos en dos los que llamas B en otro contenedor. Y estos div's (B) con asignarle las propiedades correspondientes (flotados y ajustando su anchura entre otras.

Y al igual que recuperas información de una BD utilizando programación (¿php?) utiliza el mismo lenguaje para asignar la clases a las cajas contenedoras, o crear los div de corte o para crear el div envoltorio de las dos.

Y eso último ya lo deberás preguntar en el foro del lenguaje correspondiente.

De ser tan sencillo no me encontraria recurriendo a este sitio(Donde encuentro tanto experto pero uno que otro medio. Punto).

Y tranquilo, ni te enfades ni pilles rebotes tontos, las respuestas que recibiste de ir a google estuvieron perfectas. Si no te esfuerzas en explicar tu problema, no esperes que los usuarios de este foro suplamos tu "baguería" (sí, con b) y superficialidad con altas dosis de adivinación.
Quizás esta realización te sirva. No tiene sidebars, pero en la parte central se alternan distintas cajas. Ahora aplica la programación para que se generen dinámicamente.

Agradezo el interes pero buscare por mis propios medios. Tk.

Es una buena opción, no esperes inactivo las respuestas.

Un saludo