Para aplicar esta técnica en Internet Explorer: max-width y min-width en Internet Explorer
Líquido ó elástico
- Diagramación líquida
Páginas que se acomodaban al ancho de la ventana del navegador…
- Diagramación elástica
Todo lo que se defina basado en
em
dependerá del tamaño de letra que el usuario use…
Citas (y más información) de Ni fijo, ni líquido. Elástico.
Aunque muchos vean a un metodo como superior al otro, ambos tienen sus inconvenientes.
Como bien aclara el autor, una diagramación liquida puede volverse contraproducente cuando la ventana del navegador es demasiado ancha — puede provocar lineas de texto de un ancho casi kilométrico. O en el caso de que la ventana sea muy pequeña, lineas en las que apenas entra una palabra. Ejemplo 1
Por otro lado, una diagramación elástica permitiría que el ancho de las lineas se adapte al tamaño de la fuente. Ejemplo 2. El problema es que uno puede terminar agrandando tanto el tamaño de las fuentes que el ancho del contenedor puede terminar sobrepasando el ancho de la ventana.
La solución es muy simple. Combinar:
Líquido y elástico.
Para esta primera parte, alcanza con un documento con algo de texto
<body>
<p>Párrafo de texto…
</body>El primer problema es que el ancho del contenedor (y en consecuencia de las lineas) sea relativo al tamaño de las fuentes. No es gran problema. Se usa em para el contenedor.
p {
width:40em;
}El siguiente problema es evitar que el contenedor supere el ancho de la ventana (dicho de otra manera, evitar el scroll horizontal). No es gran problema tampoco. Usaremos max-width.
p {
width: 40em;
max-width: 100%;
}max-width, en este caso, es relativo al ancho de BODY (que como no tiene un ancho definido, es igual al ancho de la ventana). El navegador primero resuelve el ancho el valor de width. Suponiendo que, relativo a la configuración del usuario, 40 em fueran igual a 1000 pixels, y que la ventana tuviera un ancho de 800 pixels, entonces se resolvería como width: 1000px y max-width: 800px. max-width tiene prioridad sobre width, entonces el nuevo ancho de P es 800 pixels.
(Usando casi cualquier navegador que no sea Internet Explorer 6 o anterior) probá agrandar la fuente tantas veces como quieras. Las barras de desplazamiento horizontal no deberían aparecer. Ejemplo 3.
Ahora tomemos el caso de alguien que tiene una ventana muy pequeña pero usa un tamaño grande para las fuentes. En este caso terminaríamos con letras tan grandes que apenas permitirían a una palabra entrar en un renglón — exagerando un poco, claro. En este caso, quizás sería útil asegurarle al lector que las lineas van a tener un ancho mínimo. Por supuesto, min-width.
p {
width: 40em;
max-width: 100%;
min-width: 20em;
}Suponiendo que la ventana tuviera un ancho de 150 pixels (y nuevamente, que 40 em son 1000 px), el navegador resolvería: width: 1000px, max-width: 150px y min-width: 500px. max-width tendrá prioridad sobre width, pero min-width tiene prioridad sobre ellos dos; entonces el nuevo ancho sería 500 pixels.
El ejemplo 4 es igual al 3, salvo por la inclusión de min-width. Probá, nuevamente, agrandar varias veces el tamaño de las fuentes. Llegará un punto en que las barras de desplazamiento horizontal se activaran y el contenido dejará de adaptarse a la ventana.
Dos columnas y min-width
Usar esta tecnica en una diagramación de dos (o más) columnas no representa ningun problema. Tomando este código:
<div id="contenedor">
<div id="izquierda">
</div>
<div id="derecha">
</div>
</div>La hoja de estilos sería:
#contenedor {
width: 40em;
max-width: 100%;
min-width: 20em;
}
#izquierda {
float:left;
width:60%;
}
#derecha {
margin-left:60%;
}Lo importante en este caso es determinar el ancho de los bloques (#izquierda y #derecha) en relación a su contenedor (o sea, usando porcentajes). Nuevamente probá agrandar la fuente o reducir el tamaño de la ventana en el Ejemplo 5.
El mejor min-width
En el ejemplo anterior, supongamos que #izquierda es el contenido principal del sitio, y por tal, es lo último que queremos que quede oculto. Entonces el valor ideal para min-width debería ser el ancho más legible para el contenido más un extra para las demás columnas.
Supongamos que la columna izquierda debe medir 200 pixels. Entonces el ancho mínimo para el contenedor debería ser, por ejemplo, 250 pixels (min-width: 250px). Cuando la ventana sea más chica que esos 250 pixels, se activarán las barras de desplazamiento. Lo primero que dejaríamos de ver seria la columna de la derecha, pero la columna izquierda se mantendría visible y con un ancho de linea que facilitaría la legibilidad del texto.
Si quieren ver otro ejemplo de esta tecnica, pueden probar cambiar el tamaño de la fuente o de la ventana en este mismo blog.
13 comentarios. Agregá el tuyo →
ala_747
Hola, Federico.
Que buen remate para mi artículo. Lo del
max-widthes una buena opción para solucionar las barras de scroll horizontal pero, como siempre (o casi, a rigor de verdad), no funciona en IE. Por eso (y porque el artículo ya estaba quedando largo y denso para leer) decidí no incluirlo.Personalmente, suelo usar la solución
min-widthmás ligado al tema gráfico que a otra cosa, buscando definir el ancho mínimo en píxeles necesario para que los gráficos del diseño no se “monten” y se rompa todo en el caso de que algún zarpado decida calzarse la lupa y achicar todo más de la cuenta. Cómo además suelo usar CSS distinto para “screen” que para los demás “media”, tampoco necesito que el ancho mínimo sea mucho menor a unos 600px (ya que para “print” y “handheld”, por ejemplo, uso directamente otros tipos de valores) y a la vez, si alguien achica más que eso, y ya que no va a leer un pito por el tamaño de la tipografía, que al menos vea el diseño “bonito”Me ha gustado mucho, gracias por escibirlo.
27 de enero de 2006
Federico
Este blog no funciona en IE, así que verás que es lo que menos interesa.
Igualmente no tomas en cuenta una cosa: un (muy estimado) conocido trabajando en 640×480 que no quiere maximizar su navegador. En realidad, suele directamente desactivar CSS pero al menos esta técnica demuestra que definir un ancho no siempre tiene que terminar en algo malo.
Y gracias a vos por considerarlo digno.
27 de enero de 2006
marcoss
Estoy de acuerdo con que IE apesta y demás críticas, pero a la hora de diseñar lamentablemente las estadísticas mandan…
Para tu blog, todo bien. Que lo lea quien lo vea
Pero el resto de los mortales no conoce FF u Opera y no los usa por lo que hay que buscar soluciones para ellos.
Yo personalmente, uso reglas del tipo IF IE {} para definir algunos “hacks”, que como dice Nicolás conservan el diseño ya que la tipografía es ilegible despues de cierto punto.
Espero que el IE7 logré lo que promete.
27 de enero de 2006
max-width y min-width en Internet Explorer @ 5.1.1.
max-width y min-width en Internet Explorer…
Simular max-width y min-width en Internet Explorer para lograr una diagramación líquida y elástica.
28 de enero de 2006
r00z’s Blog » Maquetació líquida i elàstica
Descobreixo a 5.1.1. una interessant combinació d’estils per estructurar una web fent que el resultat tingui alhora característiques d’una estructura líquida (relativa al tamany de la lletra) i d’una elàstica (relativa al tamany de la finestra)…
30 de enero de 2006
Alex Sancho
Muy bueno el articulo, justamente estos dias estoy tratando de implementar algo parecido, y he encontrado este genial trozo de codigo para hacer que el ie reconozca las propiedades min/max-width/height
http://www.doxdesk.com/software/js/minmax.html
31 de enero de 2006
Federico
Alex:
max-widthymin-widthen Internet Explorer.31 de enero de 2006
Alex Sancho
Sip, vi el post despues de poner el comentario, aunque sigo prefiriendo la solucion javascript, normalmente trato de evitar el uso de propiedades especificas en el css
1 de febrero de 2006
Federico
Mi estimado, ¿para qué cree que se inventaron los comentarios condicionales para Internet Explorer?
Y si no querés ensuciar el HTML, podés hacer un doble browser sniffing (desde el servidor): Sí no es Internet Explorer, envías tu documento normalmente. Si se trata de Internet Explorer, usas comentarios condicionales para enviar los dos archivos CSS (el avanzado y el “a prueba de IE”), sólo que uno lo escondes con comentarios condicionales. De esta forma te aseguras que incluso quienes dicen ser IE puedan acceder al CSS completo.
1 de febrero de 2006
Alex Sancho
yaya, pero sinceramente, merece la pena tanto esfuerzo?
Normalmente ya uso los comentarios para esconder el css exclusivo del ie, pero cada dia le hago menos caso a este pseudonavegador, por eso creo que las soluciones JS se adaptan mas a lo que necesito, y si encima de usar IE, deshabilitan el soporte JS, pues ajo y agua.
2 de febrero de 2006
Santi
Hola, esta interesante eso
, ahora el tema es con las imagenes… si se agrandarian en relacion de EM, se pixelarian 
y si se achicarian, quedaria medio feo el efecto “sharp”.
Saludos!
3 de abril de 2006
Los mejores textos sobre CSS y estándares web en castellano « Disenia
[…] Combinar una diagramación líquida y elástica […]
9 de mayo de 2007
Pegándonos con el diseño web. Monitores y resoluciones at Coredump
[…] The Pegándonos con el diseño web. Monitores y resoluciones by Coredump, unless otherwise expressly stated, is licensed under a Creative CommonsAttribution-Share Alike 2.5 Spain License. […]
7 de noviembre de 2007