Dimensionnement des boîtes

Gestion des dimensions des boîtes en CSS

Généralement quand on parle de bloc, on fait référence à un div. Mais tout ce qui suit est aussi valable pour d'autres balises de type bloc comme les paragraphes par exemple. Parfois on veut avoir des petites boîtes, parfois on en veut des grandes. Serait-il possible de fixer la dimension des boites ? La réponse est oui. Un bloc a des dimensions précises que l'on peut spécifier.

Il a une largeur et une hauteur définis par 2 propriétés CSS :

• width : pour spécifier la largeur du bloc
• height : pour spécifier la hauteur du bloc

Par défaut, un bloc prend 100% de la largeur disponible. Voyons un exemple de div qui n'utilise aucun style:

Code XHTML :

<div>
Généralement quand on parle de bloc, on fait référence à un div. Mais tout ce qui suit est aussi valable pour d'autres balises de type bloc comme les paragraphes par exemple. Parfois on veut avoir des petites boîtes, dès fois on en veut des grandes. Serait-il possible de fixer la dimension des boîtes ? La réponse est oui. Un bloc a des dimensions précises que l'on peut spécifier.
</div>

Maintenant, avec le même code on ajoute de la largeur et de la bordure pour bien voir le changement.

Code CSS :

div
{


border: solid 2px #000099;
}



.largeur
{


width: 60%;
text-align: justify;


}

Code XHTML :

<div class="largeur">
Généralement quand on parle de bloc, on fait référence à un div. Mais tout ce qui suit est aussi valable pour d'autres balises de type bloc comme les paragraphes par exemple. Parfois on veut avoir des petites boîtes, parfois on en veut des grandes. Serait-il possible de fixer la dimension des boîes ? La réponse est oui. Un bloc a des dimensions précises que l'on peut spécifier.
</div>

Dans l'exemple ci-dessus, le div avec une largeur de 60% n'occupe plus que 60 % de la page. On a utilisé le pourcentage mais on peut mettre aussi des tailles exactes en px, etc... comme l'on a fait dans les tutoriels précédents.

Overflow pour les balises de type bloc

Parfois il vous arrive de fixer une taille pour la boîte, mais vous n'avez pas le résultat que vous attendiez. Dans le cas où le div contient des textes très longs par exemple, la boîte sera automatiquement élargie pour que le texte soit visible, quelle que soit la taille que vous avez spécifié.

Cependant, si vous voulez quand même que la boîte respecte la dimension prescrite, même si le texte n'est pas affiché en totalité, vous pouvez utiliser la propriété overflow. Cette propriété peut prendre plusieurs valeurs :

• visible : C'est la valeur par défaut. Cela signifie que si le texte dépasse la taille spécifiée, la boîte s'élargit de manière à ce que tout soit visible.
• hidden : Cela permet de garder la dimension de la boîte et de masquer la partie de texte qui dépasse. En hidden, on ne peut pas voir tout le texte.
• scroll : Le texte sera caché s'il dépasse les limites. Sauf que le navigateur mettra en place des barres de défilement pour qu'on puisse voir tout le texte. Il met des barres de défilement verticales et horizontales même si on n'en a pas forcément besoin.
• auto : Le navigateur mettra les barres de défilement seulement s'il juge cela nécessaire.

Code CSS :

p
{


width: 200px;
height: 100px;
text-align: justify;


}



.couper{


overflow: hidden;


}

Code XHTML :

<p class="couper">
Généralement quand on parle de bloc, on fait référence à un div. Mais tout ce qui suit est aussi valable pour d'autres balises de type bloc comme les paragraphes par exemple. Parfois fois on veut avoir des petites boîtes, parfois on en veut des grandes. Serait-il possible de fixer la dimension des boites ? La réponse est oui. Un bloc a des dimensions précises qu'on peut spécifier.
</p>