viernes, 15 de marzo de 2013

Como diseñar una página a dos columnas con CSS


Después de ver una pequeña entrada sobre estilos en cascada css, vamos a comentar como construir un sitio con dos columnas. Ejemplos de esto lo tenemos, por ejemplo, en Studio manchego. En primer lugar dentro de la etiqueta body, vamos a crear varias etiquetas div para crear la estructura de una página con dos columnas. En primer lugar, para poner una introducción, un título o imagen, o una combinación de las mismas crearemos la cabecera o header.
Después vendrá el contenido principal de la página, que lo vamos a dividir en dos partes, contenido principal y un contenido. La página web contiene todos los elementos que queremos que se vean. Para decidir cómo se van a ver, usaremos una hoja de estilos en cascada. Si no la utilizamos la página quedaría muy pobre. Por hacerlo más sencillo, no introduciremos un pie de página. Tampoco vamos a colocar un menú. No obstante, si deseáis ver como se coloca un menú podemos ver está pagina que se enseña como hacerlo.
La estructura de nuestra página debe quedar de la siguiente forma:




Código de la página web

Para crear la página crearemos el siguiente código:




La página la podemos guardar como index.html. Todo lo que se va a ver en la página estará situado dentro de la etiqueta body. El primer elemento es el div header:



Si nos fijamos, dentro del div con id fondo hemos colocado otro dos div (principal y aside):



Lo que queremos es que principal y aside queden colocados uno al lado de otro así:


  

Hoja de estilos

Ahora que tenemos todos los elementos que nos interesan en index.html vamos crear la hoja de estilos. Tal como muestra index, la llamamos estilos.css y la guardamos dentro de la carpeta css. Si a la carpeta la llamamos Mi sitio, su contenido puede ser así:



Esto significa que la carpeta mi sitio tiene dos carpetas (CSS e Imágenes) junto con la página index.html. CSS, a su vez, contiene el archivo estilos.css y la carpeta imágenes podemos decir que tiene dos imágenes.

Vamos a ver el contenido de estilos.css por apartados. Para hacer referencia a cada div usamos su id. Por ejemplo, a header, le aplicamos los distintos estilos poniendo el carácter # antes de su id. Después colocamos las distintas propiedades encerradas entre llaves, y la final de cada propiedad debemos colocar un punto y coma. Podemos recordar que tenemos una referencia de los estilos sobre posicionamiento en librosWeb.

En primer lugar el div con id de valor header queda así:

#header
{
            width: 100%;
            height: 100px;
            background: #fd23;
            font-style: italic;
            font-weight: bold;
            text-align: center;
}

Esto significa que su ancho va a ser el de toda la página, width: 100%. Le damos una altura de 100 pixeles, un color de fondo con la propiedad background. El texto aparece en cursiva gracias a Font-style, Font-weight nos pone en negrita todo el texto y además, estará centrado gracias a text-align.
Al div fondo le aplicamos los siguientes estilos:

#fondo
{
            width: 100%;
            height: 630px;
            background: #ff23;
}

Es decir fondo va a ocupar todo el ancho de la página. Su altura tendrá 630 pixeles.


#principal
{
            float: left;
            width: 65%;
            height: 630px;
            background: blue;
}

Principal y aside van dentro de fondo. Para que principal quede a la izquierda ponemos float: left. La altura es la misma que de fondo y de aside (height: 630 pixeles). Las anchuras las hemos colocado de forma porcentual. Su suma es del 100%. El color de fondo de principal está puesto a azul.

#aside
{
            float: right;
            width: 35%;
            height: 630px;
            background: yellow;
}

Float lo ponemos a right para que quede a la derecha del div principal. Con float hacemos que el resto de la página “fluya” alrededor del elemento. Así conseguimos que aside se coloque al lado de principal, a su misma altura. Color de fondo amarillo.

Si queremos colocar más columnas, lo podemos hacer, las dos primeras columnas la propiedad float tendrá de valor left. En la última su valor será right. La suma de sus anchos no debe superar al ancho del div que los contiene, de lo contrario, una columna podría caer hacia abajo (digamos que tiene que buscar un sitio donde ponerse).
Para ver más ejemplos de maquetación de paginas web podemos ir a la página de desarrolloweb.
Me despido, espero que resulte de ayuda esta entrada para los lectores. Un saludo!!

2 comentarios: