Para nuestro proyecto práctico parto de la base de un diseño de columnas típico. Sin embargo, antes de presentar este proyecto en vivo y en color, me gustaría mostrarte específicamente cómo puedes implementar diseños de columnas tú mismo. Me centraré en los diseños de dos y tres columnas, ya que siguen siendo la base de la mayoría de los sitios web.
El diseño a dos columnas es probablemente el clásico del diseño web por excelencia. La navegación suele presentarse en la zona izquierda de la ventana, mientras que el contenido propiamente dicho puede verse en la columna de la derecha. Por cierto, este comportamiento ha cambiado algo en relación con los blogs. En muchos blogs, la navegación o los anuncios aparecen a la derecha, mientras que el contenido propiamente dicho se presenta a la izquierda.
Este tipo de aplicaciones son relativamente fáciles de implementar en CSS. De hecho, las dos columnas son la forma de diseño más sencilla.
En el siguiente ejemplo, mostraré una maquetación a dos columnas que se arregla con valores porcentuales absolutos.
He aquí el ejemplo completo:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutoriales.es</title> <style> #nav { position: absolute; left: 0; margin: 0; width: 20%; background-color:#66CCCC; } #main { margin: 0; margin-left: 20%; width: 80%; background-color:#6666CC; } </style> </head> <body> <div id="header">Diseño con posicionamiento absoluto</div> <div id="nav">Navegación</div> <div id="main">Esta es el área de contenido</div> <div id="footer">Aquí se encuentra la información de copyright.</div> </body> </html>Y así es como se ve en el navegador:
Puedes mover fácilmente la columna izquierda a la derecha. Ajusta las siguientes instrucciones:
- Para #nav, cambia left: 0 por right: 0.
- Para #main, simplemente cambia margin-left por margin-right.
Una vez guardados los cambios, se puede ver el resultado deseado.
Sin embargo, la maquetación mostrada basada en el posicionamiento absoluto tiene un problema: si el contenido de la columna izquierda se hace más extenso, sobrepasa la zona del pie de página.
Esto se debe simplemente al hecho de que no se "mantiene libre" ningún espacio para los elementos posicionados de forma absoluta. El problema puede evitarse insertando en el área principal un contenido más largo que el de la columna de la izquierda.
Por lo tanto, sólo debe utilizar esta forma de maquetación si está seguro de que el área principal es realmente más alta que la columna izquierda (o derecha).
Una maquetación a dos columnas con float
El problema encontrado en el ejemplo anterior con el área de pie de página superpuesta puede resolverse utilizando la propiedad float. La sintaxis modificada es la siguiente
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutoriales.es</title> <style> #nav { float: left; margin: 0; width: 20%; background-color:#66CCCC; border: 0; } #main { margin: 0; float: left; border: 0; background-color:#6666CCCC; width: 80%; } #footer { clear: both; } </style> </head> <body> <div id="header">Diseño con posicionamiento absoluto</div> <div id="nav">El área para la navegación</div> <div id="main">Esta es el área de contenido</div> <div id="footer">Aquí se encuentra la información de copyright.</div> </body> </html>Aquí, a las dos columnas se les ha dado la propiedad float a cada una. Como resultado, las columnas están ahora dispuestas una al lado de la otra.
A la columna de la izquierda se le asigna una anchura del 20%. Preste especial atención al hecho de que un elemento posicionado mediante float siempre espera una especificación de anchura.
El área de contenido propiamente dicha tiene una anchura del 80%. Esta área también se posiciona con float : left. Como resultado, esta área se muestra junto a la columna de la izquierda.
La siguiente sintaxis se utiliza para que el área de pie de página sea siempre visible en la parte inferior de la ventana, es decir, debajo de las columnas:
#footer { clear: both; }
Ya he señalado la posibilidad de definir una clase aparte para esta variante.
Tres columnas con float
La disposición en tres columnas también es una variante popular en el diseño web. Un diseño típico tiene este aspecto:
- La columna de la izquierda contiene la navegación.
- La columna central contiene el contenido propiamente dicho.
- A la derecha se muestra información adicional o anuncios.
A continuación encontrará un ejemplo en el que se crea un diseño flexible de tres columnas. La sintaxis es, como pronto se dará cuenta, bastante similar a la del ejemplo de dos columnas mostrado anteriormente. Sin embargo, ahora hay un área div adicional con right, que en última instancia representa la columna derecha de la ventana.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutoriales.es</title> <style> #main, #right { margin: 0; border: 0; padding:0; } #nav { float: left; margin: 0; width: 20%; background-color:#66CCCC; border: 0; } #main { margin: 0; float: left; border: 0; background-color:#6666CCCC; width: 60%; } #right { float: right; width: 20%; background-color:#6699FF; } #footer { clear: both; } </style> </head> <body> <div id="header">Diseño con posicionamiento absoluto</div> <div id="nav">El área para la navegación</div> <div id="main">Esta es el área de contenido</div> <div id="right">Esta es la columna de la derecha</div> <div id="footer">Aquí se encuentra la información de copyright.</div> </body> </html>
A la nueva zona se le ha asignado una anchura del 20%. Por lo tanto, la disposición es la siguiente:
- Las columnas izquierda y derecha ocupan cada una el 20% del área de visualización disponible.
- La columna central tiene una anchura del 60%.
Debido a la sintaxis mostrada, el área derecha se muestra realmente a la derecha.
Sin embargo, la sintaxis es flexible a este respecto. También podría adaptar el área principal de la siguiente manera:
#main { margin: 0; float: right; border: 0; background-color:#6666CC; width: 60%; }
Aquí float se estableció a la derecha. Esto mueve el área de la derecha a la izquierda.
En este tutorial, has visto lo fácil que es definir diseños básicos basados en float. Este conocimiento forma ahora la base para construir un sitio web. En los próximos tutoriales, se creará un sitio web paso a paso, comenzando con la estructura básica.
