Nous ne nous sommes pas beaucoup preoccupes, jusqu'a maintenant, des dimensions des elements avec lesquels nous avons travaille. Dans cette lecon, nous verrons comment definir facilement la hauteur et la largeur d'un element.
La propriete width permet de definir la largeur d'un element.
L'exemple simplifie ci-dessous nous montre une boite ou on peut taper du texte :
div.box {
width: 200px;
border: 1px solid black;
background: orange;
}
Dans l'exemple precedent, remarquez la hauteur de la boite fixee par son contenu. On peut affecter la hauteur d'un element
avec la propriete height. Essayons de rendre la boite de l'exemple haute de 500px :
div.box {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}
Les lecons 9, 10, 11 et 12 ont introduit le modele des boites dans CSS. Comme vous pouvez le constater, le modele des boites offre beaucoup d'options nouvelles. Vous auriez pu utiliser des tables HTML pour vos dispositions, mais avec CSS et le modele des boites vous devez maintenant etre capable d'obtenir des presentations elegantes, plus precises et conformes aux recommandations du W3C.