Sujets similaires

Boîte de texte avec barre de défilement (overflow)

Niveau: Facile | Par: Furase | Validé par: ? | En date du: 4/06/10

Bonjour à tous !

Dans ce tutoriel, je vais vous apprendre à créer un texte enfermé dans une boîte avec une barre de défilement.
Ça ressemble à ceci :

La méthode est légèrement différente selon que vous soyez administrateur et ayez accès au panneau d'administration et au css ou que vous soyez un membre voulant mettre sa boîte sur un message, mais je vais détailler les deux.
(En tant qu'administrateur vous pouvez naturellement employer la même méthode que les membres, mais je vous conseille plutôt la première, qui a pour avantage la possibilité de modifier tous vos paramètres (couleurs, etc.) sur l'ensemble de vos messages facilement.)

Comme je ne connais pas votre niveau en css et html et que mon but est que tout le monde puisse arriver au résultat, je vais bien détailler la méthode. A ceux qui connaissent déjà les bases, je demande pardon pour ces explications qui vous sembleront peut-être superflues.

Vous trouverez à la fin du tutoriel une liste de propriétés qui vous permettront de décorer votre boîte.

Mais trêve de bavardages, commençons !

Tout d'abord, vérifiez que le html est bien activé, car nous allons devoir l'utiliser.
- Si vous êtes administrateur du forum : Panneau d'administration > Général > Messages et Emails > Configuration > Autoriser le HTML : oui.
- Si vous êtes membre : Profil > Préférences > Toujours autoriser le HTML : oui.
- Vérifiez quand vous postez votre message que la case "Désactiver le html dans ce message" ne soit pas cochée.
La création de notre boîte commence par un div que nous allons poser (sans oublier de le refermer).
(Rappel : div est une balise. Toutes les balises sont écrites entre < et >. Certaines balises se terminent par /> : elles sont auto-fermantes. Ce n'est pas le cas de div, qui doit être fermé avec une balise de fin. Un balise de fin commence par < / (sans l'espace entre les deux symboles) et se termine par > et contient le nom de la balise. Les propriétés (cf. plus loin) ne sont pas répétées.)
- Pour un administrateur :
  Si vous êtes administrateur, appliquez une classe à votre div et donnez-lui un nom. Sur mon tutoriel j'ai mis ‘boite’ mais vous pouvez évidemment mettre le nom que vous voulez.
  (Rappel : surtout pas d'espace dans les noms. Evitez les majuscules, les accents, et les caractères spéciaux.)
  (Rappel : la classe est une propriété. Elle se note ‘class’. On va lui donner sa valeur en écrivant un signe =, et la valeur sera mise entre guillemets. Ici la valeur sera le nom de la classe.)

Code:: <div class="boite"> on mettra notre texte ici </div>

Pour un membre :
Si vous êtes membre, il va nous falloir donner toutes les propriétés de notre div avec style.
(Rappel : style est une propriété. On écrit un signe = pour donner ses valeurs, et les valeurs seront écrites entre guillemets.)

Code:: <div style=""> on mettra notre texte ici</div>

C'est bien joli tout ça, mais si on laisse comme ça, il ne se passera rien. Il nous reste quelque chose d'important à faire : donner une hauteur à notre boîte ! En effet, si on ne définit pas de hauteur... il n'y aura pas de boîte. Pour ça, il va nous falloir utiliser le css et sa propriété height.
- Pour un administrateur :
  Si vous êtes administrateur, nous allons créer un style dans le css.
  (Rappel : votre css est accessible depuis le panneau d'administration > Affichage > Images & couleurs : Couleurs > Feuille de style css (onglet en haut de la fenêtre).)
  Comme dit précédemment, il faut utiliser la propriété height. Nous lui donnerons de préférence une valeur en pixels. Il est possible de lui donner également une valeur en centimètres ou en pourcentage.
  (Rappel : pour créer un style dans le css, réécrivez le nom que vous avez donné tout à l'heure à votre div, et faites-le précéder par un point (pas d'espace entre le nom et le point). Vous pouvez ou non revenir à la ligne, comme vous voulez. Mettez ensuite une accolade ouvrante {, laissez une ligne libre, et mettez une accolade fermante }. Sur notre ligne vide nous allons écrire la propriété qui va nous permettre de définir la taille de notre boîte. Elle s'appelle height. Mettez : pour indiquer que nous allons ensuite entrer la valeur. Puis choisissez votre valeur. Vous pouvez choisir ce que vous voulez, mais il faut toujours préciser l'unité ! px, % ou cm. Il ne doit pas y avoir d'espace entre la valeur et l'unité. La ligne se termine par un point-virgule ; )

Code:: .boite
{
height: 300px ;
}

Pour un membre :
Si vous êtes membre, il va nous falloir entrer nos propriétés de css dans la balise style.
Comme dit précédemment, il faut utiliser la propriété height. Nous lui donnerons de préférence une valeur en pixels. Il est possible de lui donner également une valeur en centimètres ou en pourcentage.
(Rappel : pour mettre une propriété de css dans une balise html, il faut utiliser ‘style’ dans le html, et mettre entre les guillemets le nom de la propriété css, la faire suivre de : pour indiquer sa valeur, et... mettre la valeur ! Il faut ensuite mettre un point-virgule pour dire qu'on a fini de mettre des valeurs à la propriété. Et on peut en mettre comme ça à la suite autant qu'on veut.)

Code:: <div style="height:300px;"> on mettra notre texte ici </div>

On avance ! Mais il manque encore un élément essentiel. Le dernier rassurez-vous.
Si on laisse comme ça, il ne se passera toujours rien. Pour dire qu'on veut couper le texte, nous allons devoir utiliser la propriété overflow. Elle peut prendre différentes valeurs.
Nous allons utiliser auto, ce qui nous donnera un résultat plus esthétique que scroll.

Je ne vous re-détaille pas la mise en place du code, je pense que vous aurez compris. Dans les deux cas -que vous soyez administrateur ou membre- il faut insérer ‘ overflow: auto ; ’ au bon endroit, soit dans votre css soit dans style.
(Conseil pour le css : mettez chaque propriété sur une nouvelle ligne, ce sera plus clair.)

Notez que vous ne verrez la barre de défilement apparaître que si vous mettez une quantité assez importante de texte.

Pour ceux qui veulent aller plus loin :

Spoiler:

Et voilà, nous avons notre boîte ! Mais elle manque un peu... d'esthétisme. Ce ne sera pas très compliqué de remédier à cela, il vous faudra juste un peu de patience.
Je vous mets quelques propriétés qui pourront vous être utiles, mais je ne détaille pas leur utilisation parce que ce n'est pas le but de ce tutoriel.
(Rappel : si vous êtes membre il vous faudra éditer votre message pour changer vos paramètres. Si vous êtes administrateur, il vous suffira d'aller dans le css et de modifier ce que vous souhaitez. Les changements s'appliqueront automatiquement à tous les endroits où vous aurez employé votre balise.)

weight : il vous permettra de donner une largeur à votre bloc.
padding : c'est la marge intérieure. Elle vous permettra de ne pas coller le texte aux bords du cadre.
border : vous permettra de mettre une bordure autour de votre cadre.
text-align : alignement du texte dans le cadre.
color : couleur du texte dans le cadre.
background-color : couleur de fond.
background-image : image d'arrière-plan.
Vous pouvez mettre à la fois une image et une couleur à l'arrière-plan, ainsi que choisir la position de l'image.

Quelques exemples :
Exemple 1
Exemple 2

En espérant que ce tutoriel vous a été utile!
Fu'

Par Furase pour CSSActif

FAQ

Q

J'ai essayé mais la boîte de texte ne se fait pas, vous pouvez m'aider ?

R

Il n'y a simplement pas assez de texte. Essaie en mettant des bla bla bla en quantité industrielle entre les div et la barre de défilement devrait apparaître.

Q

Est-ce que c'est pareil pour insérer la boîte de défilement en PA et dans un sujet ?

R

Oui.

Q

Peut-on modifier la couleur de la barre de défilement ?

R

Non, c'est pas défaut et ne peut donc pas être changé.

Q

En tant que membres postant un message, es-ce les mêmes codes que ceux que vous mettez dans le CSS?

R

Oui, c'est le même code. Il n'y a aucune raison que les propriétés du css changent. Ce qui diffère, c'est la mise en place du css. En tant que membre, il doit être placé dans l'attribut style de la balise html, alors qu'en tant qu'administrateur on peut créer une classe.

Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici :
http://www.css-actif.com/f17-aide-css-xhtml

Créer une boîte de texte avec barre de défilement

Créer une boîte de texte avec barre de défilement

Sujets similaires

Sujets similaires

Partenaires Or