Como hacer un diseño web liquido o fluido
2Para empezar esta entrada me gustaría lo primero diferenciar dos tipos de diseño web (aunque podríamos dar 3 o incluso más):
- Diseño Fijo: Es aquél en el que se establecen como tamaño de la estructura unas medidas inalterables por el navegador. (por ejemplo este blog)
- Diseño líquido: Son diseños creados para no tener un ancho fijo, permiten que el navegador lo adapte a su tamaño. Se diseñan usando porcentajes (%), por lo que los elementos que seleccionemos podrán tener un tamaño proporcionado al tamaño del navegador. Fueron creados para aprovechar al máximo los nuevos monitores (panorámicos).
En esta entrada vamos a ver cómo realizar un diseño web líquido sin morir en el intento o caer en errores.
Para empezar necesitamos una estructura, en este caso he escogido una de tres columnas, para jugar con dos sidebar laterales y un contenedor central dinámico.
La idea es la siguiente:
Como podeis ver, además del header y footer (cabecera y pié de página respectivamente), contaremos con tres columnas, dos laterales (una a cada lado) de ancho fijo y una central de ancho dinámico.
Para conseguir esto basta con este código HTML dentro del body de nuestro sitio:
Como CSS tendremos lo siguiente:
- #contentRight, #contentLeft, #contentCenter {
- height: 100%;
- overflow: hidden;
- }
- #contentRight {
- float: right;
- width: 200px;
- }
- #contentLeft {
- float: left;
- width: 200px;
- }
El header y footer lo dejo a vuestra elección, para que veáis que realmente funciona tenéis aquí un ejemplo de diseño web fluido
[...] podríamos dar 3 o incluso más): Diseño Fijo: Es aquél en el que …Ver archivo completo Se proponen los siguientes archivos en busca del conocimiento: 100 mejores [...]
[...] a izquierda y tendrá un diseño extendido a todo lo que es el marco del navegador web, llamado liquido o fluido. Otro de los cambios ha sido la introducción del logotipo. Por fin tenemos [...]