Webdesign

Zoom sur la propriété Overflow

Publié le par stephanie
31
Juil

Le débordement (effets visuels) « overflow » est une propriété qui sert à définir la mise en forme d’un élément qui sort de sa boîte.


En principe le contenu d’une boîte de bloc reste enfermé dans son container, en principe ! Mais il arrive que ce contenu peut « déborder » et s’étendre en partie ou entièrement en dehors de la boîte. Il convient alors de préciser de quelle manière il doit être « rogné ». Cette propriété ne bénéficie pas de l’héritage.

Raisons de ce débordement :

  • Une ligne ne peut pas être coupée.
  • Le conteneur devient trop petit pour le contenu.
  •  Le contenu, est défini avec une position absolue et  déborde de la boîte de son parent.
  •  Le contenu est trop large pour la taille fixée au conteneur

(si la propriété « width » a par exemple une valeur trop faible par rapport au contenu).

Attention a IE les version 6 et 7 n’interprète pas de la même facon la propriété width.

C’est le cas d’un élément qui en contiendrait un autre, c’est-à-dire une boîte dans une autre.

  • Le contenu est trop haut pour la taille fixée au conteneur

(si la propriété « height » a par exemple une valeur trop faible par rapport au contenu).

C’est le cas d’un élément qui en contiendrait un autre, c’est-à-dire une boîte dans une autre.

  • Les marges (margin) de la boîte d’un descendant sont négatives, ce qui la déplace en partie hors de la boîte de son parent.

Toutes les fois que survient un débordement, la propriété « overflow » vient spécifier, s’il y a lieu, la façon dont la boîte sera rognée.

Valeurs possibles pour « overflow »

visible = (par défaut) le contenu ne sera pas rogné, et celui-ci peut sortir éventuellement de la boîte contenant l’élément.
Il peut arriver que même quand la valeur de la propriété « overflow » est accompagnée de cette valeur « visible », le contenu soit rogné par le système d’exploitation, pour tenir dans la fenêtre du document du visiteur.

hidden = le contenu sera rogné mais sans utilisation des barres de défilement et donc la partie débordante sera invisible. La propriété « clip » va servir à spécifier la taille et la forme du reliquat du rognage.

scroll = le contenu sera rogné, avec cependant mise à disposition de barres de défilement, ce qui autorise la visualisation de l’élément. Avec cette valeur appliquée à un type de média « print », la partie du contenu ayant débordée devrait aussi être imprimée.

auto = l’interprétation de cette valeur dépend du navigateur qui décide la suite à donner à la partie excédentaire du contenu, tout en disposant si besoin les barres de défilement nécessaires.

.En-css{
display: block;
overflow:hidden;
overflow-x: auto;
overflow-y: hidden;
overflow : -moz-scrollbars-horizontal;}

Sources :
barre-defilement-principale
ZONECSS-overflow

stephanie