☆═━┈▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄┈━═☆
Boîte de texte avec barre de défilement
Tuto de November Rose partagé par Alabasta et traduit par Kinoko
Look! A black text scroll box with red font! The size of the font is twenty point and the font type is Garamond! It's also centered! Yay! You learned how to mess with font!
1. Créer la boîtePour ce tuto on va utiliser ces balises :
- Code:
-
<div style></div>
La balise div va nous servir à créer la boîte et on mettra notre texte dedans.
Les attributs qu'on peut ajouter à la balise div (dans le style) sont les suivants :
Width: la largeur de la boîte
Height: la hauteur de la boîte
Background-color: la couleur du fond
Allé, c'est parti !
- Code:
-
<div style="height:100px;width:100px;background-color:red">Opla ! Une boîte de texte avec un fond rouge !</div>
Opla ! Une boîte de texte avec un fond rouge !
2. l'attribut OverflowOverflow c'est un attribut important, c'est lui qui gère les débordements et permet l'affichage de la barre de défilement. Il possède 4 propriétés : visible, hidden, scroll, et auto.
Visible: Le texte est visible si il déborde de la boîte
- Code:
-
<div style="height:100px;width:100px;background-color:red;overflow:visible">Opla, la boîte avec le fond rouge ! Diantre le texte déborde de la boîte ! Mais qu'allons nous faire ???</div>
Opla, la boîte avec le fond rouge ! Diantre le texte déborde de la boîte ! Mais qu'allons nous faire ???
Hidden: Tout ce qui déborde est caché ! (très pratique parfois)
- Code:
-
<div style="height:100px;width:100px;background-color:red;overflow:hidden">Opla, la boîte avec le joli fond rouge ! Diantre le texte déborde de la boîte ! Oh mais c'est caché !</div>
Opla, la boîte avec le joli fond rouge ! Diantre le texte déborde de la boîte ! Oh mais c'est caché !
Scroll: On ajoute une barre de défilement
- Code:
-
<div style="height:100px;width:100px;background-color:red;overflow:Scroll">Opla, la boîte avec le joli fond rouge ! On peut scroller maintenant, la barre de défilement est là !</div>
Opla, la boîte avec le joli fond rouge ! On peut scroller maintenant, la barre de défilement est là !
Auto: Une barre de défilement s'ajoute automatiquement si le texte déborde.
- Code:
-
<div style="height:100px;width:100px;background-color:red;overflow:auto">Opla, la boîte avec le joli fond rouge ! On peut scroller maintenant, la barre de défilement est là ! Elle se rajoute automatiquement sur le texte est trop long et déborde </div>
Opla, la boîte avec le joli fond rouge ! On peut scroller maintenant, la barre de défilement est là ! Elle se rajoute automatiquement sur le texte est trop long et déborde
3. Overflow-x and Overflow-yMaintenant qu'on a mis notre barre de défilement, on peut décider de cacher la barre horizontale ou verticale (si les deux sont présentes). Pour cela, on utilise l'overflow-y (verticale) et overflow-x (horizontale). Si vous voulez en cacher une, vous avez juste à rajouter hidden dans ses propriétés.
Boîte avec défilement vertical :
- Code:
-
<div style="height:100px;width:100px;background-color:red;overflow-y:scroll;overflow-x:hidden">Opla, la boîte avec le joli fond rouge ! On peut scroller maintenant, la barre de défilement est là ! On a caché la barre horizontale </div>
Opla, la boîte avec le joli fond rouge ! On peut scroller maintenant, la barre de défilement est là ! On a caché la barre horizontale
Boîte avec défilement vertical horizontal :
- Code:
-
<div style="height:100px;width:200px;background-color:red;overflow-y:hidden;overflow-x:scroll"><p style="width:250%">Opla, la boîte avec le joli fond rouge ! On peut scroller maintenant, la barre de défilement est là ! On a caché la barre verticale</p></div>
Opla, la boîte avec le joli fond rouge ! On peut scroller maintenant, la barre de défilement est là ! On a caché la barre verticale
Maintenant qu'on a fait tout ça, on peut passer au choix et à la personnalisation de la police.
- Code:
-
<div style="height:200px;width200px;background-color:black;overflow:auto;font-size:0px;font-family:none;color:#00000;text-align:left"></div>
Font-Size: la taille de la police
Color: la couleur de la police
Font-Family: la famille de la police (verdana, times, garamond,...)
Text-Align:l'alignement du texte (right, left, center, or justify).
- Code:
-
<div style="height:150px;width:150px;background-color:black;overflow:auto;font-size:20px;font-family:garamond;color:red;text-align:center">Opla, la boîte avec le joli fond noir ! La police est Garamond de taille 20 px, elle est rouge et le texte est centré</div>
Opla, la boîte avec le joli fond noir ! La police est Garamond de taille 20 px, elle est rouge et le texte est centré
☆.¸¸.·`━━━━━━━━━━━━━━━━━━`·.¸¸.☆
Tutoriel de November Rose - HTML Roleplaying Coding Guide
Accueil
Sujet: Box de texte avec barre de défilement (explications complémentaires) 
Mer 23 Mai - 22:16
