Primeramente recordemos como se hacía esto con tablas, para así poder apreciar la mayor sencillez de utilizar CSS con capas:
<table> <tr> <td> <table><tr><td>Cabecera</td></tr></table> </td> </tr> <tr> <td> <table><tr> <td>Menu Lateral Izquierdo</td> <td>Contenido</td> </tr></table> </td> </tr> <tr> <td> <table><tr><td>Pie</td></tr></table> </td> </tr> </table>
Faltaría definir anchuras de las tablas anteriores, pero no vamos a entrar en detalle con las tablas. Ahora aplicando capas tendríamos el siguiente código:
<div id="cabecera"> Cabecera </div> <div id="menulateral"> Menu Lateral Izquierdo </div> <div id="contenido"> Contenido </div> <div id="pie"> Pie </div>
Se puede apreciar ya una mayor sencillez. Los campos id de las capas (etiquetas div) son utlizados para dar estilos con CSS tal y como vemos a continuación:
Primero le damos una anchura y altura fija a la cabecera, además de un color al fondo para apreciar claramente la posición de la capa.
#cabecera {
width: 600px;
height: 100px;
background: green;
}
Ahora al menu lateral y al contenido les hacemos lo mismo, anchura, altura y color de background, pero además añadimos la propiedad float con valor left. Esto le dice a ambos elementos que se coloquen como flotantes a la izquierda. En otras palabras nos permite por en una misma "línea" dos elementos de tipo bloque como son las capas (div).
#menulateral {
float: left;
width: 250px;
height: 100px;
background: yellow;
}
#contenido {
float: left;
width: 350px;
height: 200px;
background: blue;
}
Finalmente al pie le damos también anchura,altura y color de background, y le añadimos la propiedad clear con el valor left, cuyo significado es no permitir elementos flotantes por la izquierda de este elemento. Por tanto el pie aparecera en una línea nueva, debajo del menu lateral y el contenido.
#pie {
width: 600px;
height: 50px;
background: cyan;
clear: left;
}
Para apreciar mejor dicho comportamiento podemos cambiar la propiedad float de la capa contenido y poner la propiedad float con el valor "right", de esta manera la capa aparece desplaza a la esquina derecha del navegador, y se ve como "flota" sobre el elemento pie, es decir, como sobrepasa la línea que ocupa el pie. Para solucionar esto tendremos que cambiar la propiedad clear del pie y ponerle el valor "both", para así no permitir elementos flotantes ni a izquierda, ni a derecha.
Para poder centrar la página web, se suele englobar todas las capas en una capa contenedora que será la que centremos, es decir, ponemos:
<div id="contenedor"> ...código de capas anterior... </div>
Ahora para poder centrar la capa contenedora debemos definirle una anchura, pues por defecto tiene toda la anchura disponible, y es por ello que los elementos con float right aparecen pegados a la derecha, por ello le aplicamos el siguiente código CSS:
#contenedor {
width: 600px;
margin: 0 auto;
}
Aquí además de la anchura le definimos la propiedad margin (margen), con valor 0 para el top y bottom, y auto para izquierda y derecha. Este auto provocará que la capa contenedora se centre.
Una buena práctica para maquetar es realizar previamente un reseteo de los estilos, puesto que no todos los navegadores utilizan los mismo valores por defecto para cada etiqueta, por ello nos podemos encontrar con qué se vea diferente nuestra página en distintos navegadores. Con un reseteo se evitan gran parte de estas posibles diferencias.
Aquí un ejemplo de reseteo:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
Si probamos este código tal cúal en Internet Explorer podremos ver que no se centra a no ser que definamos el doctype del documento, por ello siempre es recomendable ponerlo:
<!DOCTYPE html> <html> <head> </head> <body> ...código anterior de capas... </body> </html>
Comentarios