Médiaforma

All posts tagged overflow

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

Vous savez maintenant définir une mise en page contenant un bandeau supérieur, une zone de contenu et un pied de page. Vous savez également cantonner chacun de ces éléments à l’espace qui lui est réservé en utilisant la propriété overflow. Que diriez-vous d’ajouter une bande verticale à gauche de la zone de contenu. Par exemple pour y placer un menu donnant accès à d’autres pages Web ? Pour cela, nous allons définir une quatrième balise <div> un peu particulière.

Nous affectons l’identifiant menu à cette balise. Puis nous y ajoutons quelques liens qui ne pointent vers aucune page spécifique. Ici, il ne tient qu’à vous de remplacer le # par de vraies URL pour rendre ces liens fonctionnels. Pour améliorer la mise en page, les liens sont placés dans une liste <ul> :

Passons au code CSS.

Un sélecteur # identifie l’attribut id de valeur menu. La largeur de la nouvelle balise <div> est fixée à 150 pixels. Sa hauteur est identique à celle de la balise de contenu : 400 pixels. Nous choisissons une couleur d’arrière-plan différente de celles utilisées dans les trois autres balises. Ici encore, le code hexadécimal a été obtenu sur le site http://www.code-couleur.com/. Pour indiquer que la balise <div> menu doit flotter sur le côté gauche, nous utilisons la propriété float et nous lui affectons la valeur left.

Il ne reste plus qu’à afficher le code HTML dans le navigateur.


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.