Partagez | 
 

 Box de texte avec barre de défilement (explications complémentaires)

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage

Je suis
design4u
avatar
MEMBRE - Photoshop

Logiciels : photoshop cs2 :illustrator cs2
Féminin Messages : 373
Date d'inscription : 29/04/2012

MessageSujet: Box de texte avec barre de défilement (explications complémentaires)   Mer 23 Mai - 22:16


▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄ ▄


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îte

Pour 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 Overflow

Overflow 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-y

Maintenant 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



4. La police

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


Revenir en haut Aller en bas

Je suis
Kinoko
avatar
ADMIN - Photoshop

Logiciels : Photofiltre, Photoshop CS3/CS5, Illustrator et Flash CS3, InDesign CS5
Féminin Messages : 1607
Date d'inscription : 20/08/2010
Age : 25

MessageSujet: Re: Box de texte avec barre de défilement (explications complémentaires)   Jeu 24 Mai - 3:13


Après avoir passé une heure à traduire, je viens de voir qu'il y a déjà un tuto là-dessus. Je vais aller me pendre e_e Le pire c'est que j'ai vérifié avant et que j'avais pas vu le sujet >.<
Revenir en haut Aller en bas
http://tsuki-no-kioku.forumactif.com
 

Box de texte avec barre de défilement (explications complémentaires)

Voir le sujet précédent Voir le sujet suivant Revenir en haut 

 Sujets similaires

-
» Créer une boîte de texte avec barre de défilement
» installer carte avec nouveau garmin express
» Apparition de texte avec effecteur étape
» roll-over qui reste
» faire une copie du fichier de la license de SZ ?
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
foligraph ☁ communauté graphique. :: THREE ☁ la solidarité, c'est bon pour le cœur ... :: codage :: les tutoriels :: html-