Problema con diseño líquido

[weissbier]

Hola, estoy intentando abarcar el máximo ancho de pantalla posible, sin molestar con el scroll horizontal a aquellas resoluciones inferiores a 960px. Para ello, me viene genial tener tres columnas: una de 960px en medio y dos laterales.
Pero me surge un problema, ¿cómo logro mantener centrado el conjunto sin conocer el ancho fijo? No sé cómo plantear la estructura para que sea lo más efectiva posible... A continuación muestro una imagen para que sea más sencillo comprenderlo:
El ancho del bloque negro es de 960px;
El ancho de los bloques grises es por ejemplo 140px;
En resumen, los anchos en sí son fijos... pero el total dependería del área visible (1,2,3 columnas)



Un saludo.

[novatoide]

Proba al div contenedor que tengas o el que tenga el ancho total de la web con un margin:0px auto;
.
Abrazo.-

[kseso?]

Creo que si busca una solucción vía css para conseguir ese comportamiento partiendo de la estructura inicial de columnas secundarias a los laterales y principal central deberá hacer uso de las @media queries

[weissbier]

Vaya, con eso tengo una divertida tarea. Me gustará manejar algo nuevo... sólo que, ¿estaría correcto este planteamiento?.
Según me he informado, y buscando lo mostrado en la imagen inicial, he de crear tres hojas de estilo diferentes:
[Suponiendo, para facilitar cálculos, las columnas laterales (C1,C3) de 100px y el bloque central (C2) de 500px]

Hoja 1) Tres columnas, metidas en un contenedor de ancho 700px y centrado.
--C1: 100px y float left.
--C2: 500px y float left.
--C3: 100px y float left.
Hoja 2) Tres columnas, metidas en un contenedor de ancho 600px y centrado.
--C1: 100px y float left.
--C2: 500px y float left.
--C3: 600px y float left. (Abarcaría el ancho completo)
Hoja 3) Tres columnas, metidas en un contenedor de ancho 500px y centrado.
--C1: 500px y float left. (Esta se quedaría arriba)
--C2: 500px y float left.
--C3: 500px y float left.

Cargaría:
Hoja 3 si ancho visible es menor de 600px.
Hoja 2 si ancho visible es mayor que 600px y menor que 700px.
Hoja 1 si ancho visible es mayor que 700px.

Ahora bien, ¿cómo solucionar el hecho de que se quede arriba Hoja 3.C1?, ¿cómo debo hacer para llamar a cada hoja en cada caso establecido?. Saludos y gracias por el tiempo tomado.

[kseso?]

Este sería el planteamiento ideal para utilizar un flexbox y sus items, pero... es demasiado pronto.

El comportamiento de sus bloques principales (columnas y central) requiere de jugar un poco con position, margin y float cambiando valores según resolución, pues creo (es una idea sin meditar ni teclear una sóla línea de css) que la aparición en el html debería ser <central /> <colum_Izq /> <colum_Dch />

Espero encontrar un rato a lo largo del fin de semana para jugar con su idea, mientras le toca jugar un poco con css.

[weissbier]

Bueno, tras investigar sobre el asunto de flexbox, puedo entender por qué dices que es demasiado pronto para usar la técnica.
Bueno, muchas veces he notado que al flotar dos elementos a un mismo lado, uno se antepone curiosamente al otro, y supongo que por ahí va la estructura que me has planteado. Aún así, mi duda mayor es... en las media queries. Realmente, ¿sólo intervienen a la hora de importar las hojas de estilo, verdad? ¿No tengo que estructurar mi css con técnicas nuevas ni nada por el estilo (jeje) cierto?

[kseso?]

No responde exáctamente su propuesta inicial, pero como base, creo que le servirá:
http://jsfiddle.net/kseso/EbNJU/embedded/result/

[weissbier]

Muchísimas gracias por tu tiempo. Me ha servido para mucho, sólo investigar un poco. En realidad he modificado bastante el css, pero la solución evitando los elementos float, es de agradecer. Este es el nuevo CSS:

Código CSS:

*{
  margin: 0;
  padding: 0;
  position: relative;    
}
html, body {
  background: #f5f5f5;
  width: 100%;
  height: 100%;
}
#pagina {
  background: #CCC;
  margin: 10px auto;
}
#principal {
  background:#0066CC;
}
#col_izq {
  background:#009966;  
}
#col_dcha {
  background:#FF9933;
}
#principal, #col_izq, #col_dcha {height:120px;}
/***********************
@medias queries
***********************/
@media all and (min-width: 700px) {
    #pagina {
              width: 700px;
     }
    #principal{
              width: 500px;
              position:absolute;
              left:100px;
              top:0;              
     }
    #col_izq {
              width: 100px;
              position: absolute;
              left: 0;
              top: 0;    
     }
    #col_dcha {
              width: 100px;
              position: absolute;
              right: 0;
              top: 0;
     }
}
@media all and (max-width: 699px) and (min-width: 600px) {
    #pagina {
              width: 600px;
     }
    #principal{
              width: 500px;             
     }
    #col_izq {
              width: 600px;
              position: relative;    
     }
    #col_dcha {
              width: 100px;
              position: absolute;
              right: 0;
              top: 0;
     }
}
@media all and (max-width: 599px) and (min-width: 500px) {
    #pagina {
              width: 500px;
     }
    #principal{
              width: 500px;             
     }
    #col_izq, #col_dcha {
              width: 500px;
              position: relative;    
     }
}
</style>
 

¿Algo que se pueda mejorar?

[Tecna]

Buenas,

me ha llamado la atención que se hable de un diseño líquido y sin embargo las medidas estén en px y distintas según las resoluciones pero sólo teniendo en cuenta valores entre 500 y 900 px. El diseño líquido se debería adaptar sea cual sea la resolución y tienes que tener en cuenta que cada vez hay mas combinaciones posibles y multitud de dispositivos diferentes y que controlarlo así sería insostenible.

El diseño que propones y el ejemplo que hizo kseso como ejercicio están bien pero para un diseño real no creo que sea muy recomendable porque al ser un diseño complicado y muy particular y teniendo en cuenta la multitud de dispositivos y navegadores y sus comportamientos particulares, sin olvidar los que no soportan media queries, puede complicarte bastante la vida que se vea bien en todos ellos. También podría resultar confuso para algunos usuarios que las secciones cambien de sitio y más teniendo en cuenta que en tamaños reducidos quedarían fuera del area visual. Aunque depende mucho del tipo de usuario al que vaya dirigida la página y el tiempo que quieras emplear y el resultado que quieras obtener.

[cristian_cena]

Iniciado por Tecna

me ha llamado la atención que se hable de un diseño líquido y sin embargo las medidas estén en px

Comparto, aunque se ven dos propuestas en cuanto al maquetado usando mediaqueries, por un lado la diagramación flexible basada en % y por otro la diagramación fija usando px en la que se puede apreciar un "corte en seco" entre cada "resolución" declarada.

Iniciado por Tecna

sin olvidar los que no soportan media queries

supongo kseso tenía claro este tema cuando escribió este artículo, al respecto recomienda usar respond.js o css3-mediaqueries.js

[kseso?]

Fallo mio, no quedó suficientemente resaltado, a ver si ahora sí:

Iniciado por kseso?

No responde exáctamente su propuesta inicial, pero como base, creo que le servirá:

Iniciado por Tecna

Buenas,

me ha llamado la atención que se hable de un diseño líquido y sin embargo las medidas estén en px y distintas según las resoluciones pero sólo teniendo en cuenta valores entre 500 y 900 px.<-- Me remito a lo resaltado en el quote anterior El diseño líquido se debería adaptar sea cual sea la resolución y tienes que tener en cuenta que cada vez hay mas combinaciones posibles y multitud de dispositivos diferentes y que controlarlo así sería insostenible.<-- Hay vida más allá de conceptos, bastante añejos y superados ya, como el diseño líquido, adaptativo, fluido... Y precisamente para dar una respuesta en función no sólo del media type (css2) sino de la disparidad dentro del mismo media y las modificaciones/variaciones del mismo en un momento dado son la @medias queries.

El diseño que propones y el ejemplo que hizo kseso como ejercicio están bien pero para un diseño real no creo que sea muy recomendable porque al ser un diseño complicado y muy particular y teniendo en cuenta la multitud de dispositivos y navegadores y sus comportamientos particulares, sin olvidar los que no soportan media queries, puede complicarte bastante la vida que se vea bien en todos ellos.<-- ¿Conoce, le recuerdo que estamos en el foro de css, otra vía que cubra más de esos imponderables que las @media queries? Se agradece las sugiera. También podría resultar confuso para algunos usuarios que las secciones cambien de sitio<-- Un usuario "confunsable" no redimensionará ventanas y probablemente no visitará una página con un smartphone y después con un monitor de 800px y más tarde con uno de tropecientospx para comparar y más teniendo en cuenta que en tamaños reducidos quedarían fuera del area visual.<-- De nuevo me remito al resalte del primer quote: "base". Sólo es cuestión de contemplar supuestos (no son tantos) y su @media Aunque depende mucho del tipo de usuario al que vaya dirigida la página y el tiempo que quieras emplear y el resultado que quieras obtener.<-- ¿Pretende que en una idea de base un usuario elabore todas esas variaciones/posibles y más cuando el planteamiento inicial de comportamiento le es ajeno? Yo no estoy dispuesto a hacerlo, y menos gratis.

Quizás no se dio cuenta que la particularidad de inicio no es que pasen las laterales a la parte inferior, sino el orden en que lo hacen y que el supuesto inicial, sobre el que no se entró a valorar, planteaba unas determinadas medidas y unidades.

Iniciado por cristian_cena

Comparto, aunque se ven dos propuestas en cuanto al maquetado usando mediaqueries, por un lado la diagramación flexible basada en % y por otro la diagramación fija usando px en la que se puede apreciar un "corte en seco" entre cada "resolución" declarada.<-- Bueno, es una cuestión menor: una pizca de transition/transform para hacerlo más suave xD

supongo kseso tenía claro este tema cuando escribió este artículo, al respecto recomienda usar respond.js o css3-mediaqueries.js

Cristian, el objetivo de ese artículo no es el usar las media queries y prevenir su "no soporte". No. Sólo es intentar que algún lector del mismo las conozca y comprenda un poco mejor. Sólo eso.
Porque, entre otras muchas razones, ya conoces mi ignorancia supina, también, sobre js.

/************** ADENDA **************/

Hace ya mucho que se advirtió y se recomienda que las cajas no sobrepasen más de cierta anchura por los problemas que conlleva la lectura y comprensión de líneas largas.

[weissbier]

Bueno, después de ver estos comentarios últimos, me queda decir que:

La base del sitio estaba pensada para mostrar los bloques al final de un artículo, tutorial, etc... en una base de 960px de ancho. No creo que haya mucha gente que se dedique a leer posts en una resolución 400px...
El objetivo es para, en caso de ser pantallas extragrandes, que las hay... aprovechar los laterales para mostrar esos bloques y no dejar tanto vacío. Si un navegador no soporta media queries, obtendrá en pantalla el sitio básico (sin laterales), simplemente ese era mi objetivo. Quizás me confundiera al llamarlo diseño líquido, podría ser un diseño "aprovechativo" =)!

Compartiré el resultado final una vez lo termine, igual muchas gracias por el la ayuda proporcionada, en especial a kseso?.

[kseso?]

Iniciado por weissbier

El objetivo es para, en caso de ser pantallas extragrandes, que las hay... aprovechar los laterales para mostrar esos bloques y no dejar tanto vacío. Si un navegador no soporta media queries, obtendrá en pantalla el sitio básico (sin laterales),

Entonces la cuestión cambia, si el orden en que las columnas laterales pasan a la parte inferior no es la mostrada en los diagramas de bloques en #1

¿Recuerda el enlace que le comenté al inicio, el mismo que repitió Cristian?*
Al final hay un enlace a una demo de AlistApart.
Échele un vistazo al código.
Y en última instancia una jaculatoria a san google

Cristian, ya sabes que no problem ::trollface::

[weissbier]

Iniciado por kseso?

Al final hay un enlace a una demo de AlistApart.
Échele un vistazo al código.

Bueno, en realidad ese ejemplo es bastante bueno... pero yo necesito que las columnas sean dos y de ancho fijo. El orden de bajada es indiferente (Es más, mejor como está ahora) puesto que serán bloques de contenidos aleatorios. El ejemplo online ya lo tengo funcionando en mi sitio... lo dejo para que vean cómo ha quedado, y si es alguna molestia tener el link acá lo retiro: es.woording.com.
¿Alguien tiene resolución superior a 1400px, y ve ambas columnas?

[Tecna]

Buenas,

kseso,

no se altere que no es bueno y menos sin motivo ya que mi comentario no iba dirigido a usted, pero como parece que no se entendió voy a intentar explicarme mejor. Puede que no quedara claro porque no puse su nombre al principio, pero mi comentario era en respuesta a weissbier por el planteamiento que hace en #1 y el código que muestra en #8, que parece ser el definitivo que va a usar pero que sigue sin usar medidas relativas.

Si se fija sólo hago mención a su persona en referencia al aporte que hizo en #7 como lo que creo que es y que debe ser el código facilitado en respuesta a una consulta de un foro: un ejemplo, un ejemplo para ilustrar cómo se podría abordar el planteamiento inicial que se hizo en #1, un punto de partida para desarrollar la idea propuesta. Y por simplicidad, siendo un ejemplo, es lógico que contemple el caso más sencillo que es con medidas fijas. Por supuesto es el creador de la pregunta el que debe tener en cuenta todos los detalles de compatibilidad, desarrollar la idea y no esperar que en una respuesta de un foro nos den un código terminado para copiar y pegar, flaco favor nos estarían haciendo, (aunque parece que cada vez hay más gente por aquí que es lo que demanda y espera, pero ese es otro tema y no voy a entrar ahí). También hay muchas veces que la pregunta no merece ni código de ejemplo porque es muy básica y existen miles de ejemplos.

Por suerte, no es este el caso, y como bien apunta en #11 el diseño propuesto inicialmente tiene la particularidad del comportamiento de las columnas laterales cuando pasan a la parte inferior, es por eso que dije que era un diseño complejo y muy particular y aconsejaba a quien lo propuso que ahora que está comenzando a trabajar en él es un buen momento para plantearse si hay alguna razón de peso para que los elementos se tengan que comportar así y si merece la pena todo el trabajo que habría que invertir para llevar a término satisfactoriamente ese diseño, complejo en su planteamiento y más usando medidas relativas, por supuesto en función del resultado que él quisiera conseguir, ya que no es lo mismo hacerlo por puro divertimento, como el caso de su ejemplo, o como aprendizaje, que hacerlo para un cliente, en una página que queramos que se vea bien en cualquier circustancia.

Otra de las cosas que quería hacer notar a weissbier es que en su código no tiene en cuenta tamaños inferiores a 500px con lo que deja fuera a la mayoría de los smartphone incluso de tabletas en orientación portrait, ni mayores de 700px (ahora que me fijo ni siquiera son 900). Ahora según parece el planteamiento es otro, por sus últimos post quiere llenar los espacios laterales en pantallas extra grandes, que desde luego las hay mucho mayores de 700px (la mia tiene más de 1.900) y por eso me llama más la atención que no use medidas relativas.

Para realizar un diseño de esas características media queries nos ayudará mucho pero no nos resolverá todos los problemas y tendríamos que recurrir a otras técnicas para lograr solventar esos problemas, aunque como bien dice este no es el foro adecuado. En ningún momento dije que media queries no sea una buena solución, aunque no sea completa. Me sorprende mucho que diga que el diseño líquido es un concepto añejo cuando precisamente y como también apunta, una de las aplicaciones interesantes de media queries es contemplar las variaciones en el mismo medio y en otros, discerniendo en funcion de unas caracteristicas como puedan ser el tamaño u orientacion de la pantalla del dispositivo. El uso de medidas relativas también hará nuestro diseño más flexible y es importantísimo en medidas de fuentes no sólo por estética, también por accesibilidad. Como está claro que hay dispositivos con características muy dispares, multitud de navegadores y configuraciones diferentes, parece lógico que cuanto más flexible sea nuestro diseño mejor se verá en cada una de las combinaciones posibles. Si bien es verdad que es mas trabajoso ajustar todos los elementos en un principio, nos evitará el uso de múltiples hojas de estilo, lo que nos daría más trabajo a la hora de actualizar y mantener el código y también hará la experiencia del usuario más satisfactoria al poder aprovechar al máximo las caracteristicas de su dispositivo. Y no me digan que es que los usuarios no redimensionan ventanas o no usan el zoom porque eso no es cierto y aunque lo fuera las posibilidades existen y se tendrían que tener en cuenta. Muchas veces veo páginas hechas para el lucimiento del diseñador pero en absoluto pensadas para quien las va a usar. Y lo que comenta del tamaño de las cajas de texto se puede controlar con la propiedad max-width o el propio usuario si en realidad le molesta podrá hacer la ventana más pequeña, pero que tenga la libertad si así lo quiere de hacerla más grande es respeto hacia el usuario. Aunque claro está, es mi opinión y respeto cualquier otra.

Respecto a lo de que se muevan los elementos de sitio y de si puede molestar, habrá opiniones, pero yo creo que si es molesto y que diseños con ese tipo de comportamiento están mas bien pensados para dispositivos con pantalla reducida en los que normalmente no se redimensiona la ventana. Este comportamiento, aunque el orden no sea el mismo, es parecido al que ocurre cuando el tamaño de unos divs flotados excede del tamaño de su contenedor y normalmente esto se intenta evitar entre otras cosas porque desplaza posibles elementos que pueda haber debajo como pudiera ser el pie de la página.

A su última cita de mi anterior mensaje no le contesto porque como ya dije mi comentario no iba dirigido a usted ni a su ejemplo y ya lo comenté en los primeros parrafos de este mensaje.

Hacía mucho tiempo que no escribía un mensaje aquí y después de aclarar esto creo que pasará mucho más hasta el próximo. Y para que no se diga que troleo y sólo busco polémica, que no es mi estilo y se pueden revisar mis mensajes para comprobarlo, aquí va mi propuesta a #1 con medidas relativas. Como no queda claro en que orden están cuando están debajo, yo he puesto debajo del todo la columna izquierda, pero se puede cambiar simplemente cambiando el orden de los dos divs de las columnas en el html. La columna centro es lógico que esté antes porque se supone que es el contenido principal de la página, no sólo por razones de diseño. Sólo funciona en navegadores que soporten media queries.

archivo.css

Código CSS:

/* ejemplo media queries */
 
* {margin: 0; padding: 0;}
 
body {
    min-width: 40em;
    height: 40em;
    background: #ff0;
    font-size: 16px;
    font-family: 'Times new Roman'; 
}
 
p {width: 80%; min-width: 9em; padding: 0.5em ;}
 
#izda, #dcha {
    width: 20%;
    min-width: 10em;
    height: auto;
    min-height: 10em;
    position: absolute;
    top: 0; 
}
 
#centro {
    width: 60%;
    min-width: 35em;
    height: auto;
    min-height: 10em;
    background: #f0f;
    margin: 0 20%;
}
 
#centro p {min-width: 35em; height: 100%; margin: 0 auto; }
 
#dcha {
    background: #0ff;   
    left: 80%;
}
 
#izda {
    background: #0f0;
    left: 0%;   
}
 
@media screen and (max-width: 959px) {
    #centro {width: 80%;    margin-left: 0%;}
    #izda {position: static; width: 100%;}
}
 
@media screen and (max-width: 799px) {
    #centro {width: 100%;}
    #dcha {position: static; width: 100%;}
}
 
/* fin */
 

archivo html

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="archivo.css">
<meta name="viewport" content="width=device-width">
<title>ejemplo media queries</title>
</head>
<body>
    <div id="centro"><p>texto del cuerpo principal. texto del cuerpo principal. texto del cuerpo principal. texto del cuerpo principal. texto del cuerpo principal. texto del cuerpo principal. texto del cuerpo principal. texto del cuerpo principal. texto del cuerpo principal.</p></div>
    <div id="dcha"><p>texto de la columna derecha</p></div>     
    <div id="izda"><p>texto de la columna izquierda</p></div>       
</body>
</html>
 

[kseso?]

Tecna:
OK
Sólo hacerle notar lo siguiente:

Buenas,

kseso,

no se altere que no es bueno...

Me hizo releer varias veces mi respuesta. ¿Realmente trasmite alteración de ánimo?
Si esa fue su conclusión a leerme, ya lo siento. Se ve que lo que era normal hace no mucho tiempo, no sólo en este foro sino en cualquier ámbito, ahora se toma como ataques, enfados o yo se qué.

Me refiero a las réplicas, contraréplicas, y contra-contra de 2 o más ponentes. Vamos, lo que siempre fueron los debates o discusiones.

Hacía mucho tiempo que no escribía un mensaje aquí y después de aclarar esto creo que pasará mucho más hasta el próximo.

Al respecto, es soberano en sus decisiones. Pero es una pena que lo haga en base a tan poco.

[weissbier]

Bueno, tras el denso mensaje de Tecna, no me ha quedado otra que regresar a la duda. Creo que voy a adaptarme al diseño líquido en su esencia y usaré medidas relativas. Pero:

¿Hasta qué ancho mínimo me conviene dar soporte? ¿Estaría bien mostrar el scroll a partir de los 480px, o los hay mucho menores?