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, et le conteneur devient trop petit pour le contenu qui se met à déborder.
- L'élément, c'est-à-dire le contenu, est défini avec une position absolue, et il va déborder 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). 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. C'est la propriété "clip" vue page suivante, qui spécifie alors la taille et la forme de la zone 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.
Codes dans HEAD
.hidden { position: relative ; width: 25% ; height:
15% ; overflow: hidden ; background-color : #CCFFFF ; padding: 3px ; font-size:
10pt ; border: solid 2px blue ; }
.auto { position: relative ; width: 25% ; height: 15% ; overflow: auto
; background-color : #CCFFFF ; padding: 3px ; font-size: 10pt ; border: solid
2px blue ; }
.scroll { position: relative ; width: 25% ; height: 15% ; overflow: scroll
; background-color : #CCFFFF ; padding :3px ; font-size: 10pt ;border: solid
2px blue ; }
.visible { position: relative ; width: 25% ; height: 15% ; overflow: visible
; background-color : #CCFFFF ; padding: 3px ;font-size: 10pt ; border: solid
2px blue ; }
Code dans BODY
<div class="hidden"><b>HIDDEN</b> Une colonie d'abeilles comprend trois catégories
Exemples
Il en ira de même pour une image
Avec les mêmes définitions dans HEAD précisées plus haut, et les codes suivant placés dans BODY
ci-dessus : Code dans BODY : <div class="hidden"><img src="aimages/v136.jpg" width="220" height="165"></div>
ci-dessus : Code dans BODY : <div class="visible"><img src="aimages/v136.jpg" width="220" height="165"></div>
