Inscrivez-vous en une minute !!
Connectez-vous
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)
Les valeurs de la propriété overflow : visible, hidden, scroll et auto
Exemples de la propriété CSS overflow (débordement)
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 :- visible : cette valeur correspond au réglage par défaut. Le contenu excédentaire sera reproduit en dehors de la boîte, ce qui est susceptible de porter atteinte à votre design, surtout si le bloc contient des bordures et/ou une couleur de fond ;
- hidden (caché) : la partie qui dépasse la zone permise sera camouflée (on aura par exemple un paragraphe, titre ou image tronqué) ;
- scroll (défilement) : L'élément sera coupé s'il dépasse les limites, mais le navigateur va activer les barres de défilement. Les situations
éventuelles peuvent être résumées en ce qui suit :
- si le contenu dépasse les deux limites, les deux barres de défilement seront activées ;
- si le contenu dépasse seulement la largeur, la barre de défilement horizontale sera activée et l'autre sera affichée en grisé (mais non opérationnelle) ;
- si le contenu dépasse uniquement la hauteur, la barre de défilement verticale sera activée et l'autre sera affichée en grisé (mais on opérationnelle) ;
- s'il n'y a pas de dépassement, les deux barres seront affichées en grisé ;
Donc avec le mode scroll les barres de défilement seront toujours présentes, mais leur activation dépend du contenu.
- auto : dans ce mode vous déléguer à votre navigateur le pouvoir de décision quant à l'ajout ou non des barres de défilement. Autrement dit le navigateur n'activera les barres de défilement qu'à la rigueur. En plus il affiche seulement les barres opérationnelles, contrairement au mode "scroll" qui affiche aussi des barres inactives c'est-à-dire celles mises en grisé.
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
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>
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
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
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 !
