Foros del Web » Creando para Internet » CSS »

Estructura pseudolíquida

Estas en el tema de Estructura pseudolíquida en el foro de CSS en Foros del Web. Muy buenas. Hace unos tres años empecé a hacer una web que tenía un menú vertical de un ancho fijo, y el contenido se adaptada ...
  #1 (permalink)  
Antiguo 08/03/2009, 18:15
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2100
Estructura pseudolíquida

Muy buenas.

Hace unos tres años empecé a hacer una web que tenía un menú vertical de un ancho fijo, y el contenido se adaptada a la resolución de pantalla. El proyecto quedó algo bastante de lado, pero me éstos días a la mente que quería hacer una cosa parecida para otra web.

El asunto es que, quería hacer una web, de tres columnas. La columna del centro sería de un ancho fijo y las otras dos laterales (izquierda y derecha) serían líquidas. El problema es que no tengo ni idea como logré hacerlo con la otra web. Por mucho que mire el código, no le veo sentido.

¿Alguien tiene por ahí un manual o sabe como hacerlo?

Un saludo.

PD: Usad comentarios en vuestros proyectos.
  #2 (permalink)  
Antiguo 08/03/2009, 18:21
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Estructura pseudolíquida

Cita:
Iniciado por Bonez Ver Mensaje
La columna del centro sería de un ancho fijo y las otras dos laterales (izquierda y derecha) serían líquidas.
Pero el ejemplo que pones no hace eso en absoluto: la izquierda es fija y las otras dos líquidas.
¿Qué es realmente lo que quieres hacer? ¿el ejemplo del enlace o la explicación que cito?
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 08/03/2009, 18:27
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2100
Respuesta: Estructura pseudolíquida

Por eso decía que quería hacer una cosa parecida.

Lo que quiero hacer es eso, que la del centro sea de un ancho fijo.

En la web del ejemplo, se ve que usé márgenes con porcentajes para las capas de dentro de #contenido (envuelve el diseño líquido), pero ésta capa no tiene ningún ancho fijado.
  #4 (permalink)  
Antiguo 08/03/2009, 20:04
 
Fecha de Ingreso: octubre-2008
Ubicación: Bs As
Mensajes: 128
Antigüedad: 9 años, 1 mes
Puntos: 0
Sonrisa Respuesta: Estructura pseudolíquida

MMM... a la columna del centro le tenes que indicar el tamaño en px, ocea el with y el height.

A las de la derecha e izquierda tenes que indicarles el tamño con pocentajes.

Doy por supuesto que ya sabes de que se trata la propiedad float.

Suerte, .
  #5 (permalink)  
Antiguo 09/03/2009, 03:39
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2100
Respuesta: Estructura pseudolíquida

marcosnc_08, ese es precisamente el problema. Que así como lo planteas, que es lo primero que se pensaría, no estaría bien hecho ni funcionaría bien.

  #6 (permalink)  
Antiguo 09/03/2009, 05:38
 
Fecha de Ingreso: marzo-2009
Mensajes: 4
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Estructura pseudolíquida

si buscas en google
diseño liquido+css
tienes muchos resultados, y entre ellos en primera pagina esta composicion
araudi.net / ejemplos / 3columnas.html
pero solo es una de tantas
suerte
  #7 (permalink)  
Antiguo 09/03/2009, 14:01
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2100
Respuesta: Estructura pseudolíquida

Celiborcae tampoco me sirve ese ejemplo.

El problema es que no puedo darle un tamaño a las capas laterales, con ningún tipo de medida. Ese es el problema.
  #8 (permalink)  
Antiguo 09/03/2009, 14:05
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Estructura pseudolíquida

Cita:
Iniciado por Bonez Ver Mensaje
El problema es que no puedo darle un tamaño a las capas laterales, con ningún tipo de medida. Ese es el problema.
¿Absolutamnte ningún tipo? ¿ni siquiera porcentaje? pues entonces va a ser difícil, creo.
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 09/03/2009, 15:29
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2100
Respuesta: Estructura pseudolíquida

Claro, es que si pongo valores porcentuales a los laterales, no ocupará siempre desde el borde del explorador a la capa central.

En el ejemplo que puse, he mirado y se ve que en su día en la capa #contenedor (que realmente es solo una capa elástica) no tiene ninguna medida. Solamente el margen hacia los dos lados es 0, pero ésto no tiene nada que ver en el fondo. ¿O si? Que cacao.
  #10 (permalink)  
Antiguo 09/03/2009, 17:08
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Estructura pseudolíquida

Veamos: en primer lugar reiterar que el ejemplo que pusiste no tiene absolutamente nada que ver con lo que persigues ahora.
Por otro lado en el ejemplo, no hay una caja #contenedor, sino #contenido (que yo vea), sin flotar y sin medida, por lo que ocupa el 100%, pero como tiene un margen izquierdo (que no es cero):
Cita:
#contenido {margin:0pt 20px 0pt 210px;
padding:0pt;
}
deja ver el menú. Luego dentro de esta haydos cajas, con el 45% y el 55% de ancho respectivamente.

Pero vamos, como digo, lo básico es que no te fijes en ese ejemplo, porque no se parece en absoluto.
Realmente no veo nada claro cómo se podría hacer lo que buscas.
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 09/03/2009, 17:13
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2100
Respuesta: Estructura pseudolíquida

Si organizais un asadero, acordaros de que los filetes y demás los podeis hacer al punto encima de mi cabeza.

Por si sirviera de algo, pongo una imagen a ver si eso ayuda más.



  #12 (permalink)  
Antiguo 09/03/2009, 17:15
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Estructura pseudolíquida

mmm... bueno, quizá a alguien le sirva, yo al menos no tenía ninguna duda de que era eso lo que buscabas, pero... lo veo chungo. A ver si se nos ocurre algo entre todos.
__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 09/03/2009, 17:17
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Estructura pseudolíquida

¿Te has dado cuenta de que con este diseño en según qué tamaño de ventana tus laterales podrían llegar a desaparecer? ¿qué habrá en esas laterales?
__________________
Visita mi nueva web idplus.org
  #14 (permalink)  
Antiguo 09/03/2009, 17:18
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2100
Respuesta: Estructura pseudolíquida

Cita:
Iniciado por Mikmoro Ver Mensaje
Veamos: en primer lugar reiterar que el ejemplo que pusiste no tiene absolutamente nada que ver con lo que persigues ahora.
Por otro lado en el ejemplo, no hay una caja #contenedor, sino #contenido (que yo vea), sin flotar y sin medida, por lo que ocupa el 100%, pero como tiene un margen izquierdo (que no es cero):

deja ver el menú. Luego dentro de esta haydos cajas, con el 45% y el 55% de ancho respectivamente.

Pero vamos, como digo, lo básico es que no te fijes en ese ejemplo, porque no se parece en absoluto.
Realmente no veo nada claro cómo se podría hacer lo que buscas.
Si, igual no debía poner el ejemplo. Es solo algo parecido en el sentido de tener una capa fija y otras dos líquidas.

Se me pasó por la cabeza, de poner una capa central primera, con su ancho fijo, y luego las otras dos capas y posicionarlas partiendo desde ahí, con posición relativa. ¿Cómo ves ese camino?

El problema es ese, que el ancho tiene que ser variable pero no se pueden usar medidas porcentuales. Una paradoja...
  #15 (permalink)  
Antiguo 09/03/2009, 17:22
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2100
Respuesta: Estructura pseudolíquida

Cita:
Iniciado por Mikmoro Ver Mensaje
¿Te has dado cuenta de que con este diseño en según qué tamaño de ventana tus laterales podrían llegar a desaparecer? ¿qué habrá en esas laterales?
Si, he pensado en eso. Pero tiene solución con meterle un min-width. Pero vamos, sería un caso muy raro creo yo. La capa central me debería de ocupar unos 500 píxeles. Así que partiendo de que el 800*600 es un extremo y está desapareciendo cada vez más, aún sobran 150 píxeles.

Estará en una capa lateral la navegación, y la otra es multifuncion.
  #16 (permalink)  
Antiguo 09/03/2009, 17:56
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Estructura pseudolíquida

Me refería al reducir la ventana, no sólo al 800. Y sí podrá tener un ancho mínimo, pero puede que eso también te complique.
¿De verdad quieres que las cajas laterales de navegación y multifunción sean elásticas? yo veo ahí un buen foco de problemas.

Fíjate un detalle: la caja izquerda es de navegación, es decir, digamos un menú de enlaces vertical. Un menú suele tener la anchura de las palabras que forman los enlaces aproximadamente, con cierto padding.
En ese caso, ¿qué es lo que será elástico al crecer la resolución? porque aunque los enlaces tengan fondo, por ejemplo, quedará igualmente un gran espacio vacío hasta el contenido, ya que las palabras en sí no van a crecer. ¿Me explico?

Para intentar ayudarte yo al menos tendría que ver tu idea bien clara, diseñada como la captura que has mostrado antes, y sabiendo que después de trabajarte durante horas una posibilidad no te darás cuenta de que tiene poco sentido y vaya todo a la basura.
Eso que comentas se suele ver cuando los laterales son gráficos, fondos, etc., pero ¿para contenido como un menú? creo que viendo el resultado no te va a gustar, pero el gusto es algo muy particular. Personalmente te lo desconsejaría.
__________________
Visita mi nueva web idplus.org
  #17 (permalink)  
Antiguo 09/03/2009, 18:11
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2100
Respuesta: Estructura pseudolíquida

Pues oye, toda la razón del mundo tienes.

No quiero hacer la web adaptable del todo a cualquier resolución. Es decir, necesito que el contenido, al menos el de la portada, sea de un ancho fijo. Es porque digamos que las noticias (por llamarlo de alguna forma) incorporan imágenes del mismo ancho que el artículo, es una imagen que está por encima o por debajo. Una solución sería ponerlas de fondo o en una caja con overflow:hidden, pero claro, no es algo que me convence pues en muchos casos se perderá tiempo cargando y por otro, tiene un punto de chapucero para mi gusto.

Debería de centrarme entonces en poner solamente la capa de multifunción como elástica. Pero entonces, tal vez ocupe demasiado, porque el espacio a repartir que antes pensaba era entre dos ahora es todo para esa capa...

Bueno, si un día vienes por Lanzarote te invito a alguna cerveza, o dos, jaja.

Gracias por todo.

De todas formas, me quedo un poco mosqueado con éste asunto, será por cabezonería o algo.
  #18 (permalink)  
Antiguo 09/03/2009, 18:15
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Estructura pseudolíquida

Si se me ocurre algo te lo contaré. pero como te digo lo veo poco práctico.
Igual podrías hacerlo fijando tamaños máximo y mínimo para los laterales, y dándoles porcentaje.

Ya contarás en qué queda la cosa.

Saludos.
__________________
Visita mi nueva web idplus.org
  #19 (permalink)  
Antiguo 09/03/2009, 20:43
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2100
Respuesta: Estructura pseudolíquida

Que cosas...

Pues bastaba con poner dos capas, con medidas porcentuales. Y a la de la izquierda, ponerle una capa de medidas fijas flotada a la derecha.

Bueno, ¡podré dormir en paz!

No es cosecha mía, me pasaron éste vínculo en webmastertalk, así de paso se ve el efecto bien.
http://www.modtalk.co.uk/_site/demos/wmt/three-column/

Una bofetada de la simpleza.
  #20 (permalink)  
Antiguo 09/03/2009, 22:03
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 13 años, 2 meses
Puntos: 10
Respuesta: Estructura pseudolíquida

He seguido este hilo por lo "raro" de su petición y el final es de apoteósis: pero no habiamos quedado que no podía o quería medidas porcentuales:

http://www.forosdelweb.com/f53/estru...1/#post2815263

No me he enterado de nada...
  #21 (permalink)  
Antiguo 09/03/2009, 22:53
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: Estructura pseudolíquida

Pues eso no resuelve el problema del todo, porque la columna del medio tendria que medir 20% para que realmente quede centrada. Me gustaria ver cuando la tengas finalizada, va a ser dificil que en cualquier resolucion logres el efecto deseado.
__________________
- León, Guanajuato
- GV-Foto
  #22 (permalink)  
Antiguo 10/03/2009, 03:59
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2100
Respuesta: Estructura pseudolíquida

Triby, nadie dijo nada de centrada.

Lo único era eso, dos capas laterales elásticas y la del centro con medidas fijas. Vamos, era lo que yo buscaba vaya.
  #23 (permalink)  
Antiguo 10/03/2009, 04:01
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2100
Respuesta: Estructura pseudolíquida

Cita:
Iniciado por ssclamp Ver Mensaje
He seguido este hilo por lo "raro" de su petición y el final es de apoteósis: pero no habiamos quedado que no podía o quería medidas porcentuales:

http://www.forosdelweb.com/f53/estru...1/#post2815263

No me he enterado de nada...
Si, en principio era así, porque pensaba que no podrían darse medidas. En el fondo, realmente la capa de la izquierda no tiene medida. Vale, en el ejemplo es un 60%, pero el 60% es el tamaño de la capa izquierda y centro. Es una especie de fake en el fondo.
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 14:20.