Médiaforma

All posts tagged débordement

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans la section précédente, vous avez appris à définir une mise en page élémentaire en utilisant trois balises <div>. Le code HTML s’est comporté parfaitement et le texte affecté à chaque balise est resté cantonné à la zone qui lui était affectée.

Nous allons maintenant ajouter un texte trop long dans le bandeau. Pour cela, nous remplaçons le texte “Bandeau supérieur” par deux lignes “Lorem ipsum…” en effectuant un copier/coller depuis la balise de contenu.

Exécutons ce code. Comme vous pouvez le voir, l’en-tête et la zone de contenu se chevauchent :

Pour éviter ce problème, nous allons définir la propriété overflow dans le code CSS de la balise d’en-tête :

overflow: scroll;

Exécutez le code HTML dans votre navigateur. Désormais, deux barres de défilement permettent de déplacer le contenu de l’en-tête dans l’espace qui lui est dédié. C’est-à-dire 800 pixels sur 60. Simple et efficace !

J’entends déjà certains d’entre vous me dire : “D’accord, c’est très bien, mais, la barre de défilement horizontale ne sert à rien, si ce n’est à diminuer la zone réservée au bandeau supérieur !”. Tout à fait exact. C’est pourquoi nous allons la supprimer en définissant deux propriétés overflow : une horizontale et une verticale.

overflow-y: scroll;

overflow-x: hidden;

Exécutez le code HTML. L’affichage est maintenant optimum : la barre de défilement horizontal a disparu et la barre de défilement vertical permet de se déplacer dans le texte de l’en-tête.

Pour terminer, sachez que la propriété overflow peut être initialisée avec d’autres valeurs :

  • visible : le contenu n’est pas rogné (c’est la valeur par défaut). Si le contenu dépasse la taille qui lui est allouée, il déborde.
  • auto : c’est le navigateur qui décide de l’action à accomplir en fonction de la taille du contenu.