Une barre de défilement dans un layer
Voir le résultat du Style dans la cellule ci-dessous : | Ecrire dans l'entête le style suivant : | |
Ce texte est inséré dans le conteneur DIV (entre
<div> et </div>) c'est à dire dans un calque, lui-même
inséré dans la cellule du tableau. On a donné un
nom au calque et on a défini un style pour ce calque. La rêgle
de style, définie dans l'entête (voir ci-contre), permet
de créer une barre de déroulement grâce à la
propriété "overflow". La valeur "auto"
permet d'afficher une scrollbar uniquement si elle est nécessaire.
L'emploi de div avec un feuille de style permet de contrôler encore
mieux la mise en page et d'incorporer un texte assez long dans une cellule
relativement petite. Cette règle de style qui met en jeu la barre
de défilement n'est reconnue que par Internet Explorer, hélas
!...
|
<style
type="text/css"> #deroulant { width: 250px; height: 100px; overflow: auto; border: 0px; } </style> |
|
Dans la cellule du tableau, on insère le calque contenant le texte. | ||
...<td> .....<div id="deroulant"> ........Texte apparaissant dans la cellule .....</div> ...</td>... |
||
On peut définir également d'autres règles de styles : | > Style Correspondant | |
On peut également préciser d'autres règles de style
concernant par exemple le texte ou bien encore la couleur de la barre
de défilement. On peut imposer une police en particulier ainsi qu'une
taille et une couleur pour les caractères. On peut aussi justifier
le paragraphe avec éventuellement une indentation comme on le ferait
pour un bloc de texte normal. Il est préferable de définir
un espace d'encadrement (padding) pour que les caractères ne soient
pas collés à la barre de défilement ce qui rend le
texte quelque peu illisible. En ce qui concerne la barre de déroulement,
on peut la personnaliser en définissant des couleurs comme on l'a
fait pour l'élément body sauf qu'ici, ce style ne s'applique
qu'au calque en question (voir ci-contre). Comme c'est le cas pour la
barre de défilement, le style qui régie sa couleur n'est
pris en compte que par Internet Explorer.
|
#deroulant2
{ width: 305px; height: 100px; overflow: auto; border: 0px; scrollbar-face-color: #98a300; scrollbar-shadow-color: #5a6200; scrollbar-highlight-color: #d0e100; scrollbar-3dlight-color: #d0e100; scrollbar-darkshadow-color: #5a6200; scrollbar-track-color: #ffffff; scrollbar-arrow-color: #322561; color:#98a300; font-family:"Verdana"; font-size:12px; text-align:justify; text-indent:20px; padding: 5px; } |