Definir el ancho de una capa con CSS

11/Sep/2010 CSS , , 5 Comentarios

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:

  1.  
  2. <!-- Capa 1 -->
  3. <div id="equipos">
  4. <h2>Equipos</h2>
  5. Los equipos que se han presentado son FC.Barcelona, Real Madrid, At. Madrid y Betis.
  6. </div>
  7.  
  8. <!-- Capa 2 -->
  9. <div id="goleadores">
  10. <h2>Goleadores</h2>
  11. Los goleadores de esta temporada son Villa, Diego Forlan, Messi y Cristiano Ronaldo.
  12. </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:

  1. <style type="text/css">
  2. #equipos{
  3. width:100px;
  4. background:red;
  5. }
  6. #goleadores {
  7. width:100px;
  8. backgorund:blue;
  9. }
  10. </style>

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.

Vídeos sobre CSS


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

5 comentarios en “Definir el ancho de una capa con CSS”

Víctor Cuervo

lineadecodigo

@Garusis,

Buenas. La diferencia es que en la página solo debería de existir un único elemento con un ID. Es decir si tengo el ID “contenido”, solo puede (o debería) existir un elemento en la página con dicho nombre. Así, que el estilo solo se aplicará a ese elemento y los que lo contengan.

Es muy típico utilizar los id para la estructura de la página “contenido”, “barra lateral”, “cabecera”, “pie de pagina”,…. y luego asignar estilos a las clases o elementos que contengan.

Por ejemplo en el área “contendido” los H2 se pueden visualizar de forma diferente a como se visualicen en el “pie de pagina”.

Las clases sirven para asignarse a diferentes elementos. Son más generalistas.

Intentaré escribir algo al respecto.

Espero que los próximos artículos sobre CSS también te sean de ayuda.

Víctor Cuervo

Garusis

Buen articulo y buena forma de dejar en suspenso… me interesan mas los siguientes sobre este mismo tema… pero por ahora me asalta una duda sobre los id y las clases en CSS… y es que aun no se que diferencia existe entre ellos… solo uso una y otra vez a conveniencia y no encuentro diferencia…

reitero, el articulo esta muy bueno para empezar con el tema

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*