Médiaforma

Gestion des débordements dans une div

Print Friendly

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.
Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply