Cuando empecé a entender y a manejar esto del CSS pensaba que estaba muy bien y que molaba mucho para cambiar los colorines de los enlaces y que se subrayaran y cosas así, pero no le veía mucha más aplicación. No digamos ya cuando se trataba de centrar un diseño en la página, por favor… eso se hace con tablas!!!. Pues no amigos, con CSS se puede, y además es más lógico, tiene más sentido y el diseño es más limpio.
Para empezar, ¿que entendemos por un diseño centrado?, pues aquel diseño web que permanece centrado verticalmente en el navegador que utilicemos (en cualquier navegador: Firefox, IE, Opera… como el ejemplo de la imagen de la izquierda) sea cual sea la resolución de nuestra pantalla. Así de sencillo y de dificil a la vez. Si nosotros no indicamos al diseño web via CSS que esté centrado, por defecto, el diseño se centrara a la izquierda y en la esquina superior, en el mismo orden en el que escribimos, por ejemplo. Así que una vez que esto es claro y meridiano, que diría alguno, pasemos a explicar como se hace.
En primer lugar creamos el documento HTML de nuestro proyecto, la página principal, y la llamamos como queramos, por ejemplo, layout01.html. Lo siguiente que debemos hacer es vincular ese archivo html a una hoja de estilos css que llamaremos, por ejemplo, layout01.css.
Antes de continuar insisto siempre en que es fundamental que visualicemos el resultado que pretendemos conseguir antes de ponernos a hacerlo. Un recurso muy antiguo y muy util es dibujar como queremos que sea nuestra web, ya que en el mismo dibujo podemos hacer anotaciones. Creedme amigos, es muy pero que muy util aunque sea más viejo esto de dibujar que hacer pis en el campo.
Con la idea clara, hagamos la estructura. En este caso yo voy a hacer un diseño con una cabecera y un cuerpo central, así de sencillo. Luego ya cada uno puede ir agregando cosas. En primer lugar voy a crear un estilo tipo ID (los que llevan #, no como los class, que llevan un .) de DIV que englobe todo el ancho de la página. Es bueno tener metodología en esto y utilizar siempre el mismo tipo de estructuras. Yo lo voy a llamar “wrapper” y es así:
#wrapper {
width: 100%;
text-align: center;
margin-top: 10px;
}
Este ID de CSS dice que el ancho es del 100% de la página, que el texto esta centrado y que el margen superior es de 10px. Al margen podria ponerle otros valores o no ponerle ninguno. Ahora, en mi documento html inserto este DIV de la siguiente manera:
<div id=”wrapper”>
</div>
Lógicamente si publico la página en un navegador no veré nada todavía, porque lo que hemos creado, este “wrapper” es el envoltorio que va a contener al resto de la estructura para que aparezca centrada. Lo siguiente es crear el ID del DIV que va a tener todo el contenido dentro. Este DIV estará dentro del “wrapper” y por eso estará siempre centrado. Llamo a este DIV “container”, y es así:
#container {
width: 750px;
margin-left:auto;
margin-right:auto;
}
Simplemente le he indicado el ancho total que va a tener el sitio web (750 px en este caso) y también le he indicado que los márgenes izquierdo y derecho tengan una medida “auto”. Esto hace que el DIV container se mantenga siempre centrado dentro del “wrapper”, tal y como indica el estilo del “wrapper” al utilizar un text-align: center. Ahora inserto este DIV dentro del “wrapper” tal que así:
<div id=”wrapper”>
<div id=”container”>
</div>
</div>
Sigo sin ver nada si lo publico en un navegador, y es normal, porque no hay ningún contenido sino simplemente una estructura para albergar el contenido, que es justo lo que hemos hecho. A partir de ahora, lo que nos aseguramos es que el DIV “container” esté centrado de forma absoluta. Voy a hacer dos estilos ID más, uno que llamare “header” y que definira la cabecera y otro que llamare “content” que definira el contenido principal, y quedaran así:
#header {
width: 100%;
background-color:#FFFFFF;
height: 150px;
margin-bottom: 10px;
}
#content {
width: 100%;
background-color:#FFFFFF;
height: 400px;
}
Que quede claro que lo mismo que yo les doy estos valores de tamaño y de background, luego cada uno tiene que jugar en función de lo que quiera obtener. Una vez definidos estos IDs los incluyo en mi documento html dentro del DIV “container”:
<div id=”wrapper”>
<div id=”container”>
<div id=”header”>Colocar aquí el contenido para id “header”</div>
<div id=”content”>Colocar aquí el contenido para id “content”</div>
</div>
</div>
body {
background-color: #003366;
}
#wrapper {
width: 100%;
text-align: center;
margin-top: 10px;
}
#container {
width: 750px;
margin-left:auto;
margin-right:auto;
}
#header {
width: 100%;
background-color:#FFFFFF;
height: 150px;
margin-bottom: 10px;
}
#content {
width: 100%;
background-color:#FFFFFF;
height: 400px;
}
Y el archivo HTML para conseguir este increible y fascinante resultado que os cambiará la vida es así:
<head>
<title>ricardotayar.wordpress.com</title>
<link href=”layout01.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div id=”wrapper”>
<div id=”container”>
<div id=”header”>Colocar aquí el contenido para id “header”</div>
<div id=”content”>Colocar aquí el contenido para id “content”</div>
</div>
</div>
</body>
</html>
Ala mozos, ahora a practicar cada uno en su casa estas cosicas, que poco a poco se pueden conseguir resultados muy interesantes. Ahora, ya sabeis como centrar un diseño web utilizando CSS, así que lo siguiente es experimentar y ampliar esta minilección por cuenta propia e ir dándole contenido al contenedor web principal… suerte!!!