Foros del Web » Creando para Internet » CSS »

Diseños Liquidos(Columnas)

Estas en el tema de Diseños Liquidos(Columnas) en el foro de CSS en Foros del Web. 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): ...
  #1 (permalink)  
Antiguo 13/10/2009, 18:15
Avatar de SPAWN3000  
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 9 años, 9 meses
Puntos: 15
Diseños Liquidos(Columnas)

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.
  #2 (permalink)  
Antiguo 13/10/2009, 18:33
 
Fecha de Ingreso: mayo-2009
Ubicación: Madrid
Mensajes: 62
Antigüedad: 8 años, 6 meses
Puntos: 4
Respuesta: Diseños Liquidos(Columnas)

Entra en dynamicdrive.com y busca los "Liquid Layouts"
  #3 (permalink)  
Antiguo 13/10/2009, 18:51
Avatar de SPAWN3000  
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 9 años, 9 meses
Puntos: 15
Respuesta: Diseños Liquidos(Columnas)

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.
  #4 (permalink)  
Antiguo 13/10/2009, 19:02
 
Fecha de Ingreso: mayo-2009
Ubicación: Madrid
Mensajes: 62
Antigüedad: 8 años, 6 meses
Puntos: 4
Respuesta: Diseños Liquidos(Columnas)

Hay que dártelo todo mascado. Entra en google y teclea:
Liquid Layouts site:dynamicdrive.com
  #5 (permalink)  
Antiguo 13/10/2009, 19:50
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 4 meses
Puntos: 137
Respuesta: Diseños Liquidos(Columnas)

3 columnas diseño liquido
  #6 (permalink)  
Antiguo 13/10/2009, 22:45
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Diseños Liquidos(Columnas)

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!
  #7 (permalink)  
Antiguo 14/10/2009, 07:30
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Diseños Liquidos(Columnas)

Cita:
Iniciado por egrueda Ver Mensaje
Hay que dártelo todo mascado. Entra en google y teclea:
Liquid Layouts site:dynamicdrive.com
+1
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 14/10/2009, 20:53
Avatar de SPAWN3000  
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 9 años, 9 meses
Puntos: 15
Respuesta: Diseños Liquidos(Columnas)

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.
  #9 (permalink)  
Antiguo 14/10/2009, 21:08
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 4 meses
Puntos: 137
Respuesta: Diseños Liquidos(Columnas)

Cita:
Iniciado por egrueda Ver Mensaje
Hay que dártelo todo mascado. Entra en google y teclea:
Liquid Layouts site:dynamicdrive.com
+2

PD: Sino quires ayuda no la pidas.
  #10 (permalink)  
Antiguo 14/10/2009, 22:03
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Diseños Liquidos(Columnas)

Cita:
Iniciado por SPAWN3000 Ver Mensaje
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

Cita:
Iniciado por SPAWN3000 Ver Mensaje
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

Cita:
Iniciado por SPAWN3000 Ver Mensaje
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!

Última edición por cristian_cena; 15/10/2009 a las 12:52 Razón: incluí un link que puede ser util para investigar sobre maquetacion
  #11 (permalink)  
Antiguo 15/10/2009, 06:55
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Diseños Liquidos(Columnas)

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.

Cita:
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.

Cita:
Agradezo el interes pero buscare por mis propios medios. Tk.
Es una buena opción, no esperes inactivo las respuestas.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
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 00:10.