Una de las mejores formas de maquetar nuestras web es utilizando capas (principalmente elementos DIV). Una vez que definamos la estructura de nuestro documento HTML mediante las capas podremos maquetarlo y darle estilo con CSS. Definir el ancho de una capa con CSS debería de ser una cosa, a priori sencilla. Pero veremos que alguna cosa que otra hay que tener en consideración.
Las estructura de nuestro documento HTML podría ser la siguiente:
<div id="equipos"> <h2>Equipos</h2> Los equipos que se han presentado son FC.Barcelona, Real Madrid, At. Madrid y Betis. </div> <div id="goleadores"> <h2>Goleadores</h2> Los goleadores de esta temporada son Villa, Diego Forlan, Messi y Cristiano Ronaldo. </div>
Como podemos ver, tenemos dos capas (la de equipos de fútbol y la de goleadores). Una cosa importante es que hemos dado un ID a las capas. Ya que mediante ese ID vamos a dar un ancho a dichas capas.
Si queremos definir el ancho de una capa con CSS deberemos de utilizar el atributo width. Así nuestra hoja de estilos CSS quedará de la siguiente forma:
#equipos{
width:100px;
background:red;
}
#goleadores{
width:100px;
backgorund:blue;
}
Vemos que utilizamos los valores de los ID precedidos de una almohadilla (#) para dar el estilo CSS al elemento.
Hemos añadido un fondo a la capa, mediante el atributo background, con el fin de poder apreciar que hemos dado a las capas un ancho de 100px.
Inicialmente podríamos decir que ya tenemos resuelto nuestro problema y que era sencillo definir el ancho de una capa con CSS.
Veamos una captura de la imagen…
Bueno, viendo el resultado, quizás me asalten algunas dudas:
- El texto «Goleadores» se sale de la capa. ¿Cómo debería de quedar ajustado?
- Las capas están una debajo de otra. Yo pensaba que al definirlas un ancho, se situarían una detrás de otra.
- …
De momento dejamos definido el ancho de las capas con CSS. En siguientes artículos iremos viendo como ajustar esos pequeños detalles.
