Estructura pseudolíquida

[pzin]

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.

[Mikmoro]

Iniciado por Bonez

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?

[pzin]

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.

[marcosnc_08]

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, .

[pzin]

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.

[Celiborcae]

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

[pzin]

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.

[Mikmoro]

Iniciado por Bonez

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.

[pzin]

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.

[Mikmoro]

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):

#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.

[pzin]

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.

[Mikmoro]

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.

[Mikmoro]

¿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?

[pzin]

Iniciado por Mikmoro

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

[pzin]

Iniciado por Mikmoro

¿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.

[Mikmoro]

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.

[pzin]

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.

[Mikmoro]

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.

[pzin]

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.

[ssclamp]

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

[Triby]

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.

[pzin]

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.

[pzin]

Iniciado por ssclamp

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.