29 abril 2012

Truco rápido y sencillo para que el ancho de un elemento en un diseño fijo, se vea completo en la ventana del navegador

Una página con un diseño fijo, es aquel que utiliza un ancho comúnmente definido en pixeles (px). En este tipo de diseños, no cambia el ancho de la página si es visto en distintas resoluciones de pantalla, siempre se mantiene igual, por lo que, si el blog o página es visto en una resolución de pantalla "menor" al ancho que se tiene definido en dicha página, se formará una barra de desplazamiento horizontal para permitir desplazar la página horizontalmente y verla completa.

Si en dicho diseño, se tienen ciertas secciones como la cabecera, con un ancho definido de 100% para que éste ocupe el 100% de la ventana del navegador, al ser vista la página en resoluciones menores que el ancho definido de la página o blog, el fondo de dicha sección no se verá completa, ya que el navegador la cortará, por decirlo así, pues tomará en cuenta la resolución de pantalla en que sea visto.

Nota: Esto no ocurrirá si la cabecera o la sección además de tener definido un ancho en 100% tiene también definida una posición "fixed", es decir, que siempre se mantiene visible al desplazar la página hacia abajo. A ésto se le conoce comúnmente como: "que flota".

Para ilustrar lo que estoy diciendo, en la siguiente imagen se muestra el diseño de una página con diseño fijo. Tiene 960px (pixeles) de ancho, y tiene una cabecera o header (en inglés) con un ancho de 100% lo que hace que éste ocupe el total del ancho de la ventana del navegador.



A continuación  puedes ver una simulación de cómo se vería el mismo diseño, pero visto en una resolución de pantalla de 800 pixeles.



Como puede apreciarse en la simulación, el fondo de la cabecera (header) no se verá completo a la derecha, puesto que la resolución de pantalla es menor que el ancho de la página.

También, la barra de desplazamiento horizontal aparecerá por la misma causa, aunque ésto último sólo se soluciona si todo el blog es fluido (usa porcentajes) o es un diseño de respuesta (responsive en inglés) que es aquel que cambia según la resolución de pantalla del usuario y por supuesto, esté bien diseñado, ya que, puede ser que en un diseño de respuesta se forme una barra de desplazamiento horizontal si algún elemento se está desbordando, es decir si está desplazado a la derecha y rebasa el ancho de la ventana del navegador.

Si el ancho de la página es todavía más grande, por ejemplo de 1200 pixeles, la barra de desplazamiento horizontal se activará desde una resolución menor a dicha medida.

La solución.
Lograr que el fondo del elemento definido con 100% de ancho se vea completo, es más fácil de lo que imaginas, y funcionará incluso en Internet Explorer 7. Sólo necesitas definir un ancho mínimo en el cuerpo de la página o documento, y lo harías así

body {
min-width:980px;
}

El valor del ancho mínimo, que en el código anterior se muestra como 980 pixeles, deberá ser igual al ancho del blog o página.

Pero, ¿a quién le interesa si se ve o no completo el fondo de ciertos elementos en una resolución menor de 800 pixeles? suponiendo que el ancho de la página mide 960 pixeles...

No es para preocuparse tanto, puesto que la mayoría de tabletas o tienen una resolución superior de 1024 pixeles de ancho, aunque si las hay de menor resolución, y siendo ésta una solución tan simple, creo que vale la pena implementarla.

Luego veremos cómo crear un diseño que pueda adaptarse a las distintas resoluciones de pantalla de los internautas, así que tienes que estar atento (a) ;)


Referencias:
Ver más información sobre la propiedad min-width.



Artículos recomendados:

Gracias por compartir tu comentario y hacernos saber tu opinión.