Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Les propriétés CSS width (largeur) et height (hauteur)

Les propriétés CSS width (largeur) et height (hauteur)

L'appréhension des propriétés CSS width et height peuvent poser des problèmes chez les novices. Pour cette raison, je vais essayer de traiter le sujet d'une manière assez exhaustive, pour vous dévoiler tous les aspects cachés des propriétés CSS width et height

Largeur ou hauteur du contenu

Les propriétés CSS width et height permettent de contrôler la largeur et la hauteur du contenu des éléments de type bloc et ceux remplacés. Mais qu'est-ce qu'on entend tout d'abord par largeur ou hauteur de contenu ?

Il ne faut pas confondre la largeur ou hauteur du contenu et ceux de la boîte. En fait la largeur (respectivement hauteur) de la boîte est plus ample, du fait qu'elle englobe, en plus de la largeur (respectivement hauteur) du contenu, les marges, les bordures et les espacements gauches et droites (respectivement supérieures et inférieures).

La largeur et hauteur du contenu sont représentées par les éléments constitutifs de la boîte, à savoir le texte et les autres éléments XHTML placés dans le bloc (images, tableaux etc.).

Le mode quirks

A titre de rappel, un navigateur tournant sous le mode quirks (quirks : excentricités ou habitudes bizarres) interprète mal la propriété CSS width, en incluant les marges, les bordures et les remplissages gauches et droites dans le calcul de la largeur de l'élément. Pour que la propriété CSS width concerne uniquement la partie 'contenu' de l'élément, vous devez déclarer un DTD conforme aux standards CSS.

Une boîte reformulée sous le mode quirks, apparaîtra plus comprimée, du fait que le navigateur n'a pas ajouté les marges, bordures et remplissages gauches et droites en dehors de la largeur du contenu. Ce qui fera que les lignes de texte seront plus raccourcies et restituées par conséquent sur plusieurs lignes. Pour de plus amples informations, reportez-vous au chapitre : modèle de boîtes standard contre le mode quirks.

Les propriétés CSS width et height (largeur et hauteur)

Les propriétés CSS width et height sont applicables aux éléments de niveau bloc et en-ligne remplacés. Les balises "inline" non remplacées (<em>, <strong>, <a>, <sup>, <sub> etc.) et les rangées (<tr>) et groupes de rangées (thead, tfoot et tbody) ne supportent pas les propriétés CSS width et height.

Vous avez le choix entre les unités absolues : px, cm, mm, pica etc. ainsi que les valeurs relatives '%' qui se rapportent à la largeur du bloc conteneur. Vous n'avez pas droit aux valeurs négatives.

Les propriétés CSS width et height on par défaut la valeur initiale 'auto' qui veut dire automatique. En spécifiant une valeur 'auto', vous laissez au navigateur le soin de déterminer la largeur et la hauteur du bloc, en fonction de l'espace requis pour visualiser son contenu. Cependant le navigateur se comporte avec générosité, en autorisant toute la largeur aux éléments de type bloc. Pour contrôler vous même votre capital 'largeur' Vous serez amené à spécifier expressément une largeur au navigateur.

Pour les éléments en-ligne remplacés, leur taille automatique correspond à leur taille intrinsèque. Par exemple si vous insérez une image sans lui spécifier aucune taille. Le navigateur va remplir les propriétés CSS width et height par la résolution intrinsèque de l'image.
Pour redimensionner une image, il est extrêmement recommandé, de jouer uniquement sur l'une des deux valeurs 'width' ou 'height', pour laisser au navigateur le soin de déterminer l'autre valeur d'une manière à conserver le ratio (les proportions) de l'image.
Pour retrouver automatiquement l'autre valeur. Le navigateur applique la règle de trois que vous avez tous apprise au primaire Supposons une image dont la résolution est 100 x 110. On a augmenté sa largeur de 20 pixels :
Largeur  : 100 ==> 120
Hauteur : 110 ==> X (à déterminer ). Remuez un petit peu vos méninges, et vous allez vous rendre compte que la réponse est absurde
Le navigateur trouvera rapidement la nouvelle hauteur en procédant ainsi : (120x110)/100 = 132 pixels.
Notez que les deux dimensions de l'image ont augmenté dans les mêmes proportions :
Largeur : 120/100 = 1.2 (120%).
Hauteur : 110/132 = 1.2 (120%).

Les éléments en-ligne non remplacés sont renfermés dans des "boîtes de ligne" qui sont représentées par l'aire rectangulaire destiné à recevoir les éléments en-ligne non remplacés. Les propriétés CSS width et height n'ont aucun effet sur ces boîtes de ligne, dont la largeur dépend de celle du bloc conteneur, et la hauteur de la valeur des deux propriétés CSS line-height (interligne) et vertical-align (alignement vertical).

L'utilisation des propriétés width et height est très utile si on veut découper le design du site à l'aide des balise <div>, ou si on veut fixer les tailles des éléments de la page pour déterminer leur espace d'affichage permis, et de prendre une décision quelconque en cas de dépassement de cet espace avec la propriété CSS overflow qu'on va voir très bientôt (rendre l'excédent invisible ou afficher les ascenseurs etc.).

Comportement des propriétés CSS width et height

Les propriétés CSS width et height en valeur absolue

Bloc de texte en flux normal

Par défaut les blocs de texte (paragraphes, titres etc.) épuisent toute la largeur du bloc conteneur. La hauteur par défaut se définit par le nombre de lignes. En fait le navigateur reproduit le texte jusqu'au bord de la boîte, puis fait un retour à la ligne. La hauteur normale d'un bloc de texte est fonction du nombre de lignes (et d'autres éléments enfant telle qu'une image).

Grâce à la propriété CSS width, vous pouvez assurer vous même l'allocation de la largeur aux blocs. Sachez toutefois que si le bloc contient un élément assez grand (une image etc.) pour qu'il soit supporté par la largeur. Alors on va assister à un débordement.

Le débordement peut aussi surgir si le nombre de lignes ou si la hauteur d'un élément enfant dépasse celle du bloc. Notez aussi que vous pouvez utiliser la propriété CSS overflow pour remédier aux problèmes de débordement (activer les barres de défilement, cacher la partie qui excède la boîte etc.).

Bloc de texte en positionnement 'absolute' ou 'fixed' ou en mode flottant

Si le bloc de texte est positionné en mode 'absolute' ou 'fixed' ou s'il s'agit d'un flottant. Le bloc ne sera plus gourmand en terme d'absorption de largeur. Car sa taille horizontale sera en fonction de son contenu (voir le chapitre : positionnement CSS en mode 'absolute' et 'fixed').

Les propriétés CSS width et height en valeur relative

En cas de valeur relative (%), les propriétés CSS width et height sont calculées par rapport à la largeur (ou hauteur) du bloc conteneur. Pour que la hauteur en valeur relative ait un effet, il faut que le parent ait une hauteur non automatique (par exemple en pixels), sur quoi le navigateur pourra calculer la hauteur relative de l'élément enfant.

Les propriétés CSS width et height appliquées aux tableaux

A titre de rappel, les propriétés CSS width et height ne s'appliquent pas aux éléments de niveau en-ligne non remplacés, les colonnes et groupes de colonnes (thead, tfoot et tbody) des tables. Donc pour redimensionner un tableau, vous devez cibler par les propriétés CSS width et height les éléments 'table' et 'td'.

Par défaut la largeur d'un tableau est déterminée par le contenu de ces colonnes. La largeur d'une colonne correspond à celle de la case la plus large (parmi toutes les cases empilées verticalement et faisant partie de la même colonne). Il peut s'agir de la case qui a le contenu (texte) le plus important ou bien la case qui à la valeur width la plus grande. Bref la largeur finale du tableau est la somme des largeurs de toutes les colonnes.

La largeur spécifiée à l'élément table l'emporte toujours. Ceci dit que même si vous spécifiez des largeurs à vos colonnes (élément td), la taille du tableau demeure celle spécifiée avec la propriété CSS width pour l'élément table.

Etude de cas

On va traiter des petits cas pour bien comprendre le fonctionnement des deux propriétés CSS width et height. Pour cela veuillez reproduire les codes XHTML/CSS ci-dessous dans un document pour les exécuter. En plus notez l'ajout de la règle CSS "border: solid;" pour mieux appréhender le comportement des propriétés CSS width et height.

Un bloc de texte en flux normal ayant une largeur automatique (auto : valeur par défaut)

<p style="border: solid;">Exemple 1</p>

Même si ce paragraphe comporte une petite phrase. Il va épuiser toute la largeur du bloc conteneur.

Un bloc de texte positionné en mode absolu, fixe ou un flottant

<p style="position: absolute; border: solid;">Exemple 1</p>

La largeur du paragraphe est en fonction de son contenu ("exemple 1"), car il est sorti du flux naturel. La même situation peut se reproduire dans le cas d'un flottant ou d'un élément positionné en mode fixe ("position: fixed;"). Notez que vous n'êtes pas obligés d'ajouter les autres propriétés CSS left et top.

Un bloc de texte ayant une largeur relative

<body>
  <p style="width: 80%; border: solid;">Exemple 1</p>
  <div style="width:800px; border: solid;">
    <p style="width: 50%; border: solid;">Exemple 2</p>
  </div>
</body>

La largeur du premier paragraphe correspond à 80% de celle du document. Car son parent est l'élément 'body'. Donc ça va dépendre de la résolution de l'utilisateur. Si son écran est ajusté sur une résolution de 1024x768, le paragraphe aura une largeur qui est égale plus ou moins à 1024x80%=820px.

Le deuxième paragraphe aura une largeur égale à la moitié de celle de son parent (l'élément div), en l'occurrence 800/2=400px. Donc vous pouvez remplacer la valeur 50% par 400px sans aucun problème.

Notez que les valeurs relatives sont plus sécurisées que les valeurs absolues, du fait qu'elles s'adaptent à la résolution des utilisateurs. Et par conséquent doivent être privilégiées surtout pour la création des designs de sites Web.

Un bloc de texte ayant une hauteur relative

<body>
  <p style="height: 80%; border: solid;">Exemple 1</p>
  <div style="height:400px; border: solid;">
    <p style="height: 50%; border: solid;">Exemple 2</p>
  </div>
  <div style="height:400px; border: solid;">
    <blockquote style="height: 50%; border: solid;">
      <p style="height: 50%; border: solid;">Exemple 3</p>
    </blockquote>
  </div>
</body>

Le premier exemple aura une largeur automatique (malgré la règle "height: 80%;"), car son parent à une largeur automatique lui aussi. Donc la règle CSS 'height: 400px;' n'aura pas d'effet.

Dans le second exemple la largeur du paragraphe sera égale à la moitié de celle de son parent, à savoir : 400/2=200px.

Dans le troisième exemple qui est plus compliqué L'élément blockquote aura une largeur égale à la moitié de son parent (élément div) à savoir : 400/2=200px. Le paragraphe aura par conséquence une largeur qui est égale à la moitié de celle de son parent direct (élément blockquote) ou le quart de celle de son ancêtre (élément div), à savoir 200/2=100px (ou 400/4).

Largeur d'un tableau

<table style="width: 400px;">
<tr>
<td style="width: 300px;">bla bla</td>
<td style="width: 200px;">bla bla</td>
</tr>
</table>

La largeur du tableau correspond à celle spécifiée à l'élément 'table', sinon à la somme des largeurs des colonnes. Dans le cas où la somme des largeurs des colonnes n'est pas égale à celle du tableau (inférieure ou supérieure), le navigateur doit déterminer la part que chaque colonne va recevoir. Pour cela il va diviser la largeur de la colonne sur la somme des largeurs de toutes les colonnes. Dans notre cas :
La première colonne : 300/(300+200)=60%.
La deuxième colonne : 200/(300+200)=40%.
Autrement dit la première colonne sera plus large que la deuxième de 150% (60%/40%).

Bon, j'ai l'immense regret de vous annoncer qu'on est encore à mi-chemin Bien, on reprendra dans le chapitre suivant les propriétés CSS min-width, max-width, min-height et max-height.

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau