Website X5 pour tous
Textes longs: insérer des barres de défilement
Étape 3 > Textes
Contrôler l'affichage des textes longs
Personnellement, j'essaie d'éviter de placer sur une page Web des textes trop longs ou trop denses, qui obligent mes visiteurs à faire défiler la page au complet vers le bas. Je préfère les pages ajourées, agrémentées d'images, dégagées et faciles à consulter. Et je n'ai rien contre les hyperliens "À suivre..." qui amènent le lecteur à la page suivante du texte, à condition que la suite soit présentée de façon conviviale et agréable.
Afficher les barres de défilement
Toutefois, il arrive qu'un texte long doive être publié. Il peut s'agir d'une convention, d'un texte règlementaire, d'un document contractuel, etc... Dans ce cas, plutôt que d'obliger le visiteur à faire défiler toute la fenêtre vers le bas pour lire le texte, il est possible, sous Website X5, d'insérer le texte en question dans une division de la page, d'une hauteur pré-définie, et munie de ses propres barres de défilement.
Voici comment faire :
- Insérer un objet Texte dans une cellule de votre page
- Taper, sur la première ligne de cet objet Texte le code HTML suivante : <div style="text-align:left; height: 200px; overflow-y:scroll;">
- Insérer le texte à publier sur la deuxième ligne de l'objet texte
- À la suite de votre texte, fermer la balise HTML en y tapant l'instruction suivante: </div>
- Activer le code HTML en cliquant sur le bouton "Activer Code HTML" (3ème en partant de la droite)
- Cliquer OK, tester le travail, enregistrer et exporter.
Ce code HTML applique un style particulier au texte contenu entre les balises <div> et </div>. Le texte sera aligné à gauche ( text-align:left ), la hauteur de la fenêtre d'affichage sera de 200 pixels ( height: 200px ) et des barres de défilement verticales seront disponibles (overflow-y:scroll ).
L'alignement peut évidemment être modifié en remplaçant left par right ou encore center pour centrer le texte.
La hauteur de la fenêtre d'affichage peut être ajustée en modifiant la valeur numérique height: 200px selon vos besoins.
Notez que tout ce qui sera encadré par ces balises HTML sera affecté par le style appliqué : le texte, les images, les objets.
Exemple d'un texte long
Exemple d'un objet OLE (Fichier Excel)
(Pour Internet Explorer 8, activez le mode Compatibilité)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in nisi sem, pharetra pharetra mauris. Donec porttitor sollicitudin est id semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc pellentesque lobortis ultricies. Vestibulum quis felis vel libero euismod ultrices id eu metus. Donec malesuada ipsum eget odio tincidunt tristique dignissim magna pretium. Sed in convallis mauris. Ut iaculis, nunc gravida feugiat pretium, quam lectus semper justo, vitae condimentum nibh nibh in arcu. Etiam convallis tempor scelerisque. Donec sagittis vulputate dictum. Duis venenatis, nisl sit amet sodales vulputate, odio enim lobortis lorem, eget ornare massa ligula hendrerit mi. Nullam vestibulum cursus lectus, a congue neque suscipit ac.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in nisi sem, pharetra pharetra mauris. Donec porttitor sollicitudin est id semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc pellentesque lobortis ultricies. Vestibulum quis felis vel libero euismod ultrices id eu metus. Donec malesuada ipsum eget odio tincidunt tristique dignissim magna pretium. Sed in convallis mauris. Ut iaculis, nunc gravida feugiat pretium, quam lectus semper justo, vitae condimentum nibh nibh in arcu. Etiam convallis tempor scelerisque. Donec sagittis vulputate dictum. Duis venenatis, nisl sit amet sodales vulputate, odio enim lobortis lorem, eget ornare massa ligula hendrerit mi. Nullam vestibulum cursus lectus, a congue neque suscipit ac.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in nisi sem, pharetra pharetra mauris. Donec porttitor sollicitudin est id semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc pellentesque lobortis ultricies. Vestibulum quis felis vel libero euismod ultrices id eu metus. Donec malesuada ipsum eget odio tincidunt tristique dignissim magna pretium. Sed in convallis mauris. Ut iaculis, nunc gravida feugiat pretium, quam lectus semper justo, vitae condimentum nibh nibh in arcu. Etiam convallis tempor scelerisque.
Donec porttitor sollicitudin est id semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc pellentesque lobortis ultricies. Vestibulum quis felis vel libero euismod ultrices id eu metus. Donec malesuada ipsum eget odio tincidunt tristique dignissim magna pretium. Sed in convallis mauris. Ut iaculis, nunc gravida feugiat pretium, quam lectus semper justo, vitae condimentum nibh nibh in arcu. Etiam convallis tempor scelerisque. Donec sagittis vulputate dictum. Duis venenatis, nisl sit amet sodales vulputate, odio enim lobortis lorem, eget ornare massa ligula hendrerit mi. Nullam vestibulum cursus lectus, a congue neque suscipit ac.
Donec sagittis vulputate dictum. Duis venenatis, nisl sit amet sodales vulputate, odio enim lobortis lorem, eget ornare massa ligula hendrerit mi. Nullam vestibulum cursus lectus, a congue neque suscipit ac.
