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:
Ver original/* 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:
Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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"> <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>