Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Les propriétés CSS : min-width, max-width, min-height et max-height

Les propriétés CSS : min-width, max-width, min-height et max-height

La plupart des gens confondent les quatre propriétés CSS min-width, max-width, min-height et max-height et les propriétés CSS width et height qu'on vient de voir dans le chapitre précédant. C'est l'occasion pour vous de pouvoir les distinguer, alors ouvrez grand les yeux

Introduction aux propriétés CSS min-width, max-width, min-height et max-height

Les propriétés CSS min-width, max-width, min-height et max-height permettent respectivement de définir les largeurs minimale et maximale, ainsi que les hauteurs minimale et maximale. Donc on pourra parler d'intervalles en quelque sorte.

Sachez que les propriétés CSS min-width, max-width, min-height et max-height ne sont pas supportées par les éléments de niveau en-ligne non remplacés, ainsi que les éléments de tables. Vous avez le choix entre une valeur de longueur absolue (px, cm, mm, pica etc.), ou bien une valeur relative qui va se rapporter à la largeur du bloc conteneur.

min-width et max-width

Les deux propriétés CSS min-width et max-width permettent de définir un intervalle que la valeur calculée de la propriété CSS width doit y figurer.

Si la valeur calculée de 'width' dépasse celle de 'max-width' le navigateur va recalculer la largeur en se basant sur la valeur 'max-width'. Aussi, si la valeur calculée de 'width' est inférieure à celle de 'min-width', le navigateur va recalculer la valeur de width en se basant sur min-width. Ayez aussi l'habitude de spécifier la propriété CSS overflow qui est pertinente avec max-width (et aussi width, max-height et height), pour effectuer certains traitements en cas de débordement (un enfant qui dépasse la largeur maximale d'un parent).

Si pour le même élément, la valeur 'min-width' est supérieure à celle de 'max-width' ou 'width', l'élément aura pour largeur celle spécifiée par la propriété CSS min-height qui définit une largeur minimale à appliquer obligatoirement.

min-height et max-height

La propriété CSS 'min-height' permet de fixer une hauteur minimale qui doit être réservée à un élément, même si son contenu n'est pas aussi important. A ce propos, il ne faut pas confondre 'height' et 'min-height', car cette dernière sert seulement à fixer une hauteur de départ pour un élément.

Max-height permet de fixer la hauteur que le bloc ne doit pas dépasser. Ayez l'habitude d'utiliser la propriété CSS 'oveflow' si vous utilisez l'une des propriétés suivantes : max-width, max-height, width ou height pour se décider du sort de la partie qui dépasse la zone permise.

Les quatre propriétés CSS min-width, max-width, min-height, max-height ne fonctionnent pas sous Internet Explorer 6 et antérieur, donc ne comptez pas beaucoup sur eux pour le moment.

Un design adaptable aux résolutions d'écrans

A l'aide des propriétés CSS max-width et min-width vous aurez la possibilité de contrôler la largeur de votre design de façon à ce qu'il s'adapte aux résolutions d'écran les plus répandues (1024x768 et 800x600). Pour s'assurer que la valeur calculée de width du conteneur principal e votre design soit toujours comprise dans une fourchette raisonnable, mettez par exemple le code suivant :

div {
width: 90%;
max-width: 1000px;
min-width: 700px;
}

Ceci et très utile, du fait que les valeurs 'max-width' et 'min-width' ne seront appliquées que lorsque l'une des largeurs minimale ou maximale n'est pas respectée.

Des éléments en-ligne remplacés avec une largeur maximale

Vu que les éléments en-ligne remplacés (images et contrôles de formulaire) ne sont pas comprimables (contrairement au texte), il est judicieux de leur attribuer une largeur maximale de 100%, pour s'assurer que leur taille soit toujours inférieure ou égale à celle du bloc conteneur. Comme ça vous allez prévenir des situations de débordement qui sont très fréquentes avec ce genre d'éléments. Exemple :

img, input, textarea, select, button {
max-width: 100%;
}
Grâce à cette propriété CSS, si la largeur calculée de l'élément est supérieure à celle de sont conteneur, la valeur max-width va entrer en jeu, pour réajuster la largeur à la baisse, et ainsi prévenir toute situation de débordement. La même astuce pourra être appliquée aussi pour imposer une hauteur maximale à certains éléments.

Bon, je vous laisse inventer d'autres trucs avec ces propriétés CSS. Le prochain chapitre portera sur la propriété CSS overflow.

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

Cacher ce panneau