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!!
