L’un des extraits de code les plus utiles que vous puissiez avoir est le code HTML pour faire défiler le texte. Il resserre la présentation de votre contenu et est très facile à mettre en œuvre sans trop de codage.
Le code HTML de base pour le texte défilant
À proprement parler, ce n’est pas du code HTML pur qui est actuellement utilisé pour cet effet. Cela tombe vraiment dans le domaine des feuilles de style en cascade, en utilisant un
balise et propriétés associées telles que « débordement ». Cependant, puisque vous pouvez définir toutes ces propriétés directement dans le code HTML de votre page, cela compte; sachez simplement que vous voudrez peut-être définir cela dans un document .CSS séparé si vous prévoyez d’utiliser beaucoup de zones de texte avec des barres de défilement.
Premièrement, le Code
Voici la syntaxe de base pour une zone de texte défilante:
<div style="height:150px;width:225px;font:16px/26px Georgia, Garamond, Serif;overflow:scroll;">This is where your text goes. The scroll bars only appear when the text actually goes further than the limits of the box you defined.</div>
Maintenant, pour comprendre le code, il est important de se rendre compte que le tout est d’abord et avant tout enfermé dans un
. C’est ce qui définit la zone de cette zone de texte particulière, et si vous ne définissez pas les limites, le navigateur rend simplement les limites aussi grandes que possible. Étant donné que cela va à l’encontre de l’objectif d’une zone de texte défilante, vous devez définir la taille en utilisant les propriétés « hauteur » et « largeur » (dans ce cas, 150 pixels de haut, 225 pixels de large). Vous remarquerez qu’après chaque propriété, la valeur est donnée après un deux-points, et après la définition de la propriété et de la valeur, un point-virgule est inséré par la suite. Il est important de les inclure, même pour la dernière propriété, sinon le CSS ne fonctionnera pas.
La propriété suivante après la taille est la police. Vous remarquerez peut-être que même si la taille, la hauteur de ligne et le type de police sont définis, aucun de ces mots n’est utilisé. C’est l’une des avancées de HTML 5.0 et CSS. Certaines propriétés sont définies sans avoir à les préciser.
La dernière propriété du
est un exemple: « overflow: scroll; ». Il raconte le
box que faire si le texte à l’intérieur déborde des limites définies par la hauteur et la largeur. Dans ce cas, il est censé mettre une barre de défilement sur le côté gauche pour permettre au spectateur de lire tout le texte. Notez que vous n’avez pas eu à indiquer au navigateur où placer la barre de défilement; il est par défaut à droite. Et si vous vouliez que la barre de défilement soit horizontale en bas? Vous devenez simplement plus précis en disant « overflow-x: scroll » (qui indique l’axe horizontal ou « x »).
Autres variations
Il existe de nombreuses autres propriétés que vous pouvez utiliser pour personnaliser le
, et donnez donc à votre zone de texte défilante l’apparence que vous souhaitez:
Contexte: Vous pouvez déterminer une couleur d’arrière-plan en utilisant des codes hexadécimaux ou d’autres couleurs
Image de fond: Pour plus de texture, vous pouvez utiliser une image d’arrière-plan, même en contrôlant les valeurs de répétition X et Y.
Frontière: Il est également possible de définir la zone de texte avec une bordure de style ligne, tiret, encart ou autre variante.
D’autres types de code peuvent être introduits en utilisant d’autres propriétés CSS et HTML, telles que définies dans des sites comme Page Resources ou Quackit.
Marquee: l’autre texte défilant
Il existe un autre type de texte défilant qui est rarement utilisé car, comme la balise clignotante, il était considéré comme gênant pour les yeux. Mais le
