Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> La propriété CSS overflow (débordement)

La propriété CSS overflow (débordement)

Dans le présent chapitre on va passer au crible la propriété CSS overflow, qui est très pertinente avec les propriétés CSS width, height, max-width et max-height qu'on vient d'apprendre dans les deux chapitres précédents.

Introduction à la propriété CSS overflow (débordement)

L'un des problèmes qui gênent beaucoup les designers est celui de débordement des éléments enfant de leurs blocs conteneurs. Pour remédier à ce problème, le navigateur doit recevoir des directives lui indiquant comment se comporter avec un élément dépassant la largeur et/ou la hauteur de son bloc conteneur. C'est justement pour cette raison qu'une propriété CSS overflow (débordement) a été prévue.

La propriété CSS overflow permet d'exécuter certaines actions lorsque le contenu d'un bloc dépasse la boîte de ce même bloc. Vous pouvez par exemple cacher la partie excédentaire (qui déborde) quand le contenu d'un bloc dépasse la zone qui lui est permise, ou bien faire apparaître les ascenseurs ou encore afficher le contenu tout de même.

Notez que l'action spécifiée dans la propriété CSS overflow ne sera appliquée que lorsqu'on est dans une situation de débordement.

Les valeurs de la propriété overflow : visible, hidden, scroll et auto

La propriété CSS overflow vous propose quatre actions qui peuvent être envisagées en cas de débordement :

Exemples de la propriété CSS overflow (débordement)

overflow: auto

<p style="border: red 1px solid; width: 140px; height: 100px; overflow: auto;">
Il est communément admis que le logo du PHP est un éléphant<br />
<img src="images/logo.png" alt="php"></p>

Il est communément admis que le logo du PHP est un éléphant
CSS

Grâce à la valeur 'auto', vous confiez le soin au navigateur d'ajouter ou non une barre de défilement. Dans ce cas le navigateur n'affiche les ascenseurs qu'en cas de débordement. Dans notre situation, la barre de défilement verticale a été activée car le contenu a dépassé la hauteur permise (100px).


overflow: hidden

<p style="border: red 1px solid; width: 125px; height: 110px; overflow: hidden;">
Il est communément admis que le logo du PHP est un éléphant<br />
<img src="images/logo.png" alt="php"></p>

Il est communément admis que le logo du PHP est un éléphant
CSS

La partie inférieure de l'image qui déborde le bloc conteneur sera tronquée, sans pour autant activer les barres de défilement.


overflow: scroll

<p style="border: red 1px solid; width: 110px; overflow: scroll;">
Il est communément admis que le logo du PHP est un éléphant<br />
<img src="images/logo.png" alt="php"></p>

Il est communément admis que le logo du PHP est un éléphant
CSS

Avec le mode 'scroll', les barres de défilement apparaissent dans tous les cas, les ascenseurs inutiles (inopérants) étant mis en grisé. Dans notre cas, seulement la barre horizontale qui est accessible. L'autre est mise en grisé car on en a pas besoin.


overflow: visible

<p style="border: red 1px solid; width: 90px; overflow: visible;">
Il est communément admis que le logo du PHP est un éléphant<br />
<img src="images/logo.png" alt="php"></p>

Il est communément admis que le logo du PHP est un éléphant
css

Tout le contenu sera visible. Notez que l'effet de débordement peut être identifié si vous spécifiez des bordures et/ou une couleur ou image d'arrière-plan.


Bon, je me contente de ceci pour le moment. Je veux pas vous épuiser, car on aura besoin d'assez de force pour le prochain chapitre, qui portera sur 'le positionnement avec les CSS statique (position : static) et relatif (position : relative). Croyez-moi un chapitre diaboliquement difficile mais au combien il est très utile !

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

Cacher ce panneau