Créer une boîte de texte avec barre de défilement Bouton_activeCréer une boîte de texte avec barre de défilement Bouton_hoverCréer une boîte de texte avec barre de défilement Fb-hoverCréer une boîte de texte avec barre de défilement Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Structure de Qui Est En Ligne (1)
Créer une boîte de texte avec barre de défilement EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Créer une boîte de texte avec barre de défilement EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Créer une boîte de texte avec barre de défilement EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Créer une boîte de texte avec barre de défilement EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Créer une boîte de texte avec barre de défilement EmptySam 11 Fév 2023, 06:04 par Krager

» Vos partenaires dans le footer
Créer une boîte de texte avec barre de défilement EmptyMar 07 Fév 2023, 08:40 par Oxtran

» Mettre votre © Copyright dans le footer de votre forum
Créer une boîte de texte avec barre de défilement EmptyMar 07 Fév 2023, 07:35 par Oxtran

» Barre(s) Hitskinienne
Créer une boîte de texte avec barre de défilement EmptyVen 03 Fév 2023, 17:22 par Krager

Le Deal du moment : -15%
(Adhérents Fnac) LEGO® Star Wars™ ...
Voir le deal
552.49 €

Partagez
 

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

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://www.css-actif.com/
Furase
{ Membre actif }
{ Membre actif }

Féminin Messages : 312



Créer une boîte de texte avec barre de défilement Empty
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 :

boîte avec overflow

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.
      visible : tout le texte sera visible, même s'il dépasse la hauteur qu'on a indiquée
      hidden : tout le texte qui dépasse des dimensions indiquées ne sera pas visible
      scroll : des barres des défilement seront systématiquement appliquées, à gauche et en bas du texte
      auto : une barre de défilement sera appliquée là où il y en a besoin

    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
MessageSujet: Créer une boîte de texte avec barre de défilement   Créer une boîte de texte avec barre de défilement EmptyVen 04 Juin 2010, 15:14
Revenir en haut Aller en bas
http://www.i-love-harvard.com/
Kaiji
Kaiji
Blanche-Neige
Blanche-Neige

Féminin Messages : 5578



Créer une boîte de texte avec barre de défilement Empty
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
MessageSujet: Re: Créer une boîte de texte avec barre de défilement   Créer une boîte de texte avec barre de défilement EmptyJeu 04 Aoû 2011, 05:25
Revenir en haut Aller en bas
 

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

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Boîte de texte avec barre de défilement (messages)
» Créer une barre de défilement (messages)
» Bloc avec barre de défilement
» Description des forums avec liens et barre de défilement
» Barre de défilement invisible ?

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: Bases CSS & xHTML :: Mise en oeuvre-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit