• Scrollbar

    La scrollbar, c'est la barre a droite des pages internet qui permet de monter ou de descendre. Mais on peut aussi l’utiliser dans des bloc grace à la balise <div>. Voilà un exemple:

    Un titre
    Blablablablablablablablabla

    Une image


    Vous pouvez par exemple l'utiliser dans vos modules qui ont beaucoup de contenu pour ne pas allonger inutilement vos pages.

    <div style="width: LARGEURpx; height: HAUTEURpx; overflow-x: auto; overflow-y: auto;">CONTENU</div>

    Les seules valeurs à modifier sont indiquées en rouge, c'est HAUTEUR et LARGEUR (un nombre de pixel).

    Votre texte/image/autre se place dans CONTENU


  • Commentaires

    1
    SonnyNath
    Mardi 25 Octobre 2011 à 15:13

    C'est bizarre ! On dirait que l'HTML ne fonctionne pas sur mon blog.

    2
    Mardi 25 Octobre 2011 à 15:34

    Est-ce que tu clique sur la petite icone HTML avant de mettre les codes?

    3
    SonnyNath
    Mardi 25 Octobre 2011 à 15:59

    Oui puis quand je clique sur "Mettre à jour" il y a juste un grand espace mais pas de scrollbar et j'ai essayé avec le défilement c'est pareil donc je pense que c'est un problème du à l'HTML parce que visiblement le CSS ça fonctionne.

    4
    Mardi 25 Octobre 2011 à 16:05

    Et tu as essayé de publier l'article? Normalement, on ne voit pas les modifications dans la fanêtre d'édition, mais ça marche dans l'article.

    5
    SonnyNath
    Mardi 25 Octobre 2011 à 16:22

    Oui, justement c'est quand je publie l'article que ça m'affiche ce "grand espace".

    6
    Mardi 25 Octobre 2011 à 16:50

    Essaie peut être de réduire la largeur et la hauteur... Je comprend pas pourquoi ça ne marche pas ^^'

    7
    SonnyNath
    Mardi 25 Octobre 2011 à 17:39

    Moi non plus ! Je vais essayer de réduire pour voir ! Merci de ton conseil ! ;)

    8
    Mél-Saintemillion Profil de Mél-Saintemillion
    Dimanche 13 Novembre 2011 à 16:59

    Coucou

    j'ai beau essayé la barre ne veut pas s'afficher :/

    9
    Mél-Saintemillion Profil de Mél-Saintemillion
    Dimanche 13 Novembre 2011 à 17:02

    J'ai rien dis j'ai réussi :D

    merci beaucoup pour tous ^^

    10
    LalaGaga Profil de LalaGaga
    Mercredi 23 Novembre 2011 à 14:45

    Sa marche pas TwT

    11
    Mercredi 23 Novembre 2011 à 17:09

    Tu peux me montrer ton code?

    12
    LalaGaga Profil de LalaGaga
    Mercredi 23 Novembre 2011 à 17:16

    C'est celui que tu as mis 

    13
    LalaGaga Profil de LalaGaga
    Mercredi 23 Novembre 2011 à 17:16

    Et a la place de Contenu je met mon texte   C'est bon ^^ Merci *se prostèrne*

    14
    Mercredi 23 Novembre 2011 à 17:23

    Si tu n'avais pas changé LARGEUR et HAUTEUR, ça ne pouvais pas marcher ;)

    De rien ^^

    15
    Vendredi 23 Décembre 2011 à 18:21

     pour inserer l'image ,on insére l'url ou qoui?

    merci d'avance

    16
    Vendredi 23 Décembre 2011 à 18:36

    Je ne comprend pas ta question... Quelle image?

    17
    Vendredi 23 Décembre 2011 à 20:15

    je veux dire comment inserer une image

    18
    Vendredi 23 Décembre 2011 à 20:23

    Si tu veux la mettre directement dans le html, c'est ce code:

    <img  src="URL DE L'IMAGE" />

    Sinon ben, clique sur "ajouter une image" dans la fenêtre d'édition

    19
    Vendredi 23 Décembre 2011 à 20:30

    non l'inserer dans le scrollbar

    20
    Vendredi 23 Décembre 2011 à 21:01

    Et ben oui:

    <div style="width: LARGEURpx; height: HAUTEURpx; overflow-x: auto; overflow-y: auto;"><img  src="URL DE L'IMAGE" />CONTENU</div>

    Le code du scrollbar + celui de l'image ;)

    21
    Samedi 24 Décembre 2011 à 09:10

    thank's!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    22
    Vendredi 17 Février 2012 à 08:46

    Et si ont veut mettre 2images ? On les sépars par : ;        ?

    23
    Vendredi 17 Février 2012 à 08:51

    Sa marche poas :-( ! Voici mon code HTML :

    <div style="width: 20px; height: 15px; overflow-x: auto; overflow-y: auto;"><img  src="http://data0.eklablog.com/mizura-creation/mod_article27625933_4.gif?4161" />Voila ! C'est ici que je met les boutons de mes partenaires ! Pour devenir partenaires , allez dans Partenariat ! Merci♥</div> 

    24
    Vendredi 17 Février 2012 à 09:03

    Ha non c'est bon !Merci ! Juste :

    Moi j'ai la bart de bas en haut , et aussi de gauche a droit , comment faire pour que sa soit juste de bas en haut ???

    25
    Dimanche 13 Mai 2012 à 14:31

    Merci beaucoup :D !

    (J'arrive enfin à poster des commentaires -w-')

    26
    Dimanche 27 Mai 2012 à 15:52

    On peut faire en défilant horizontalement ?

    27
    Dimanche 27 Mai 2012 à 16:51

    Oui, si le contenu est plus large que la largeur que tu as indiqué

    28
    Dimanche 27 Mai 2012 à 17:58

    Je m'en suis rendu compte en le faisant que mes points d'exlamation défilaient horizontalement ^^

    Merci !

    PS : j'adore ton blog

    29
    Otakara Sagashi
    Mercredi 6 Juin 2012 à 14:36

    Coucou Nagalia, j'aimerais savoir quel est le code pour mettre une scrollbar via css sur la page du blog. merci et joli thème nwn

    30
    lunarr Profil de lunarr
    Jeudi 28 Juin 2012 à 11:34

    Est ce que pour la scrollbar on peut la mettre en position " absolute " ?

    31
    Jeudi 28 Juin 2012 à 13:35

    @Yuuki: Dans le css, rajoute comme propriété

    overflow: auto;

    @Choco: Qu'est-ce que tu veux dire par le mettre en position absolute? Le scrollbar se place toujours avec un div, donc peux faire une boite "absolute" avec un scrollbar.

    32
    lunarr Profil de lunarr
    Jeudi 28 Juin 2012 à 13:41

    Ah d'accord merci ! 

    33
    Lundi 5 Novembre 2012 à 15:23

    Je ne comprend pas, j'y arrive pas, rien ne s'affiche quand je met à jour. >o<

    34
    Dimanche 11 Novembre 2012 à 13:59

    super tuto^^ merki!

    35
    Vendredi 7 Décembre 2012 à 18:18

    j adore l image que ta mi sur l exemple ca vien d quel manga

    36
    Jeudi 13 Décembre 2012 à 19:35

    Ou est ce que je doit le mettre dans ce code ? 

    <div style="background-image: url(temp/1338144361.gif); border: 3px solid grey; text-shadow: 3px 2px 5px black; box-shadow: 0px 0px 20px black; border-radius: 70px; text-align: center;"><br /><br /><span style="color: #ffffff;"><span style="font-size: x-large;"><span style="font-size: large;"><span style="color: #ffffff;"><span style="font-family: 'book antiqua', palatino;"><em><span style="text-decoration: underline;">Bienvenue sur le club qui regroupe certaines images sur le couple :</span></em><br /><br />Oreki x Chitanda</span></span></span></span></span><br /><br /><span style="font-family: 'book antiqua', palatino;"><span style="color: #ff99cc;"><em><br /><span style="font-family: 'book antiqua', palatino;">&nbsp;</span></em></span></span></div>

    37
    Jeudi 13 Décembre 2012 à 20:55

    Dans la div

    38
    Mardi 18 Décembre 2012 à 18:49

    je ne comprend pas quand je desant dans une autre ligne il cree un autre scrollbar et apres ça n'arrete pas de beuger !!?

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    39
    Lundi 7 Janvier 2013 à 13:54

    Hello,
    Est-ce qu'il est possible de faire des scrollbars de couleur ? Ou par défaut, cela ne peut pas être changé ? (parce que sur un thème rouge, je peux t'assurer que ça fait plus tâche qu'autre chose... !)
    Merci d'avance~

    PS : Sinon, le code marche très bien de mon côté !

    40
    Dimanche 24 Février 2013 à 20:32

    Merci beaucoup mais je voudrait savoir si il est possible de centrer la scrollbar?

    41
    Martina-Stoessel Profil de Martina-Stoessel
    Samedi 23 Mars 2013 à 15:02

    Est il possible de mettre un scrollbar sur une image ?

     

    42
    Dimanche 15 Septembre 2013 à 11:36

    ya - t - il un code pour mettre un fond à notre scrollbar ? ou pour changer la barre ? 

    43
    Samedi 28 Septembre 2013 à 17:03

    Bonjour Nagalia !

    J'ai une petite question à te posé , sais-tu comment personnaliser (changer de couleur ...) la scrollbar de la page d'un blog eklablog ? Comme ce blog , par exemple > . Merci d'avance et j'espère que tu as compris ma demande . ;D

    44
    Lundi 10 Mars 2014 à 21:09

    Merci.

    45
    Lundi 7 Avril 2014 à 17:19

    bonjour voila le code que j'ai mis mais il ne fonctionne pas pourriez vous me dire pourquoi ? 

    <div style="width: 6px; height: 5px; overflow-x: auto; overflow-y: auto;">https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQSbI7300HJdblRtGabMPWOvgtesx4heIrwIxP3QCEUGoRpKiFUBg</div>

    46
    Lundi 7 Avril 2014 à 17:28

    La tu mis dans la partit dans la partit HTML ?

    47
    Lundi 7 Avril 2014 à 17:41

    @misis-kello : 6*5px c'est minuscule. Essaie avec 200*200px pour y voir quelque chose ;)

    Pour afficher une image en HTML, il faut utiliser ce code :

    <img src="URL DE L'IMAGE" />

    48
    Lundi 7 Avril 2014 à 18:23

    oui   je vois et le <img src="URL DE L'IMAGE" />   je le met dans l'autre code car en fait j'aimerais mettre un texte dans un module simple mais vu que sa va être un texte assez long je voulais mettre  la barre à côté  pour pouvoir  monter et  descendre   

    49
    Lundi 7 Avril 2014 à 19:31

    Bonsoir, est il possible d'installer un scrollbar sur un Wordpress ? il ne prends pas les mêmes codes qu'Ekla. Merci par avance pour la réponse. Cdlt

    50
    Lundi 7 Avril 2014 à 19:32

    <img src="URL DE L'IMAGE" />
    <div style="width: LARGEUR DU MODULEpx; height: 200px; overflow-x: auto; overflow-y: auto;">CONTENU</div>

    Si j'ai bien compris ce que tu veux, c'est du texte avec un scrollbar sous une image fixe ?

    EDIT @lilOu : Si tu as accès à une partie HTML, il s'agit du même code ;)

    51
    Lundi 7 Avril 2014 à 19:41
    Ok merci je vois mais je veux pas que l'image soit fixe donc je dois faire une position absolute et non “fixed “ je pense..
    52
    Lundi 7 Avril 2014 à 19:45

    Je me suis mal exprimée ^^'

    Quand je parlais d'image fixe, je voulais dire qu'elle est dans ton module, mais en dehors du scrollbar. Ce qui fait que lorsque tu descend pour afficher plus de texte, l'image reste à sa place.
    En revanche si tu descend la page, l'image bougera en même temps que le module ;)

    53
    Lundi 7 Avril 2014 à 19:52
    Excuse moi j'ai mal compris c'est toi qui a raison
    Mais en fait si on ne veut pas mettre une image mais juste une texte le code rester le même on enlève juste le début ou c'est autre chose ?
    54
    Lundi 7 Avril 2014 à 19:54

    C'est le même code, il faut juste enlever la première ligne qui concerne l'image ;)

    55
    Lundi 7 Avril 2014 à 20:38
    Okay merchi
    56
    Mercredi 9 Avril 2014 à 19:39

    Merci beaucoup pour ce code ! Très utile, parce que je commençais à avoir un long module pour les partenaires 8)

    57
    Vendredi 11 Avril 2014 à 19:49

     <div style="width: 100px; height: 50px; overflow-x: auto; overflow-y: auto;">je dois me presenterdddddddddddddddd d d d d d d d d</div>

    voila le code que j'ai mis et il marche c'est pour celle  qui galère il vous suffi de changer le texte merci nagalia 

    58
    zinoo
    Dimanche 20 Avril 2014 à 21:32

    Bonjour tout le monde

    J’ai réussi à faire un texte long dans une scrollbar (sous Excel 7 et Word 10) pour qu’il se défile.

     Mon pb est le suivant : je voudrais afficher ce travail (texte + scroll bar) dans un forum.  Le pb c’est quand je fais copier/ coller y a que le texte qui s’affiche sans la scroll bar !. ……novice en la matière est ce que j’ai manqué une étape ?  

    59
    zinoo
    Lundi 21 Avril 2014 à 00:32

    pb résolu .........je viens de retrouver cette étape manquante ........Merci

    60
    Dimanche 27 Avril 2014 à 16:55
    Bonjour ! Est-ce possible de faire défiler le menu entier ? Je m'explique : j'aimerais que mon menu 1 soit fixe mais qu'on puisse faire défiler les modules. Y a t-il un code pour ça ?
    Voici ce que j'ai essayé : #menu1{position : fixed; overflow : auto;}

    Merci d'avance ! :)
    61
    Dimanche 27 Avril 2014 à 17:59

    Ton code est juste, mais il manque un petit truc : Pour un défilement vertical il faut indiquer la hauteur de l'élément (sa largeur pour un défilement horizontal)


    #menu1{ position fixed;
          height: Xpx;
          overflow: auto;
    }

    62
    Dimanche 27 Avril 2014 à 18:18

    Merci beaucoup ! :-D

    63
    Dimanche 31 Août 2014 à 00:23

    Bonjour,moi j'aimerais que tout mon menu ai une scrollbar,serais-ce possible?

    64
    Dimanche 31 Août 2014 à 13:01

    Il faut que tu donne une taille à ton menu, et que tu ajoute le code du scrollbar : overflow : auto;

    #menu1 { height: Xpx;
       overflow : auto;
    }

    Xpx remplace Xpx par la hauteur de ton menu

    65
    Dimanche 31 Août 2014 à 13:15

    Merci beaucoup

     

    66
    Jeudi 9 Octobre 2014 à 17:20

    Ce n'est pas possible de la mettre dans un article ?

    67
    Vendredi 10 Octobre 2014 à 18:24

    Il faut le faire via le CSS, mais c'est la même propriété :

    .article_text { height : Xpx; /*fixer la hauteur des articles*/
          overflow : auto;
    }

    68
    Vendredi 10 Octobre 2014 à 19:00

    Ah, merci. ^-^

    69
    Samedi 11 Octobre 2014 à 11:39

    Comment ça fixer la hauteur des articles ?

    70
    Samedi 11 Octobre 2014 à 11:50

    Voici mon code : <div style="width: 183px; height: 250px; overflow-x: auto; overflow-y: auto;">
    <p style="text-align: center;"><img style="float: left; padding-right: 5px;" src="http://ekladata.com/Yq7yBEqfOJPlV7Uc8KwXffiJHrc@117x4.gif" alt="♔Tous..." width="117" height="4" /></p>
    <p>&nbsp;</p>
    <p><img src="http://ekladata.com/QbThroxM6jU5RxdGKrfabrqKs0E@30x18.jpg" alt="♔Tous...♔" width="30" height="18" /><a href="http://mylifeee.eklablog.com/accueil-c25597658">✖Accueil.</a></p>
    <p>&nbsp;</p>
    <p><img style="float: left; padding-right: 5px;" src="http://ekladata.com/QbThroxM6jU5RxdGKrfabrqKs0E.jpg" alt="♔Tous..." /><a href="http://mylifeee.eklablog.com/reglement-c25599988">✖R&egrave;glement.</a></p>
    <p>&nbsp;</p>
    <p><a href="http://mylifeee.eklablog.com/moi-c25600554"><img style="float: left; padding-right: 5px;" src="http://ekladata.com/QbThroxM6jU5RxdGKrfabrqKs0E.jpg" alt="♔Tous..." /></a><a href="http://mylifeee.eklablog.com/moi-c25600554">✖Moi.</a></p>
    <p>&nbsp;</p>
    <p><a href="http://mylifeee.eklablog.com/moi-c25600554"><img style="float: left; padding-right: 5px;" src="http://ekladata.com/QbThroxM6jU5RxdGKrfabrqKs0E.jpg" alt="♔Tous..." /></a></p>
    <p><a href="http://mylifeee.eklablog.com/graph-c25603102">✖Graph'.</a></p>
    <p>&nbsp;</p>
    <p><a href="http://mylifeee.eklablog.com/moi-c25600554"><img style="float: left; padding-right: 5px;" src="http://ekladata.com/QbThroxM6jU5RxdGKrfabrqKs0E.jpg" alt="♔Tous..." /></a></p>
    <p><a href="http://mylifeee.eklablog.com/cafe-c25612124">✖Caf&eacute;.</a></p>
    <p>&nbsp;</p>
    <p><a href="http://mylifeee.eklablog.com/moi-c25600554"><img style="float: left; padding-right: 5px;" src="http://ekladata.com/QbThroxM6jU5RxdGKrfabrqKs0E.jpg" alt="♔Tous..." /></a><a href="http://mylifeee.eklablog.com/partenariat-c25612182">✖Partenariat.</a></p>
    <p>&nbsp;</p>
    <p><a href="http://mylifeee.eklablog.com/moi-c25600554"><img style="float: left; padding-right: 5px;" src="http://ekladata.com/QbThroxM6jU5RxdGKrfabrqKs0E.jpg" alt="♔Tous..." /></a></p>
    <p><a href="http://mylifeee.eklablog.com/livre-d-or-c25612300">✖Livre d'or.</a></p>
    <p>&nbsp;</p>
    <p><img style="float: left; padding-right: 5px;" src="http://ekladata.com/QbThroxM6jU5RxdGKrfabrqKs0E.jpg" alt="♔Tous..." /><a href="http://mylifeee.eklablog.com/shop-c25622548">✖Shop.</a></p>
    <p>&nbsp;</p>
    <p><img style="float: left; padding-right: 5px;" src="http://ekladata.com/QbThroxM6jU5RxdGKrfabrqKs0E.jpg" alt="♔Tous..." /></p>
    <p><a href="http://mylifeee.eklablog.com/ecriture-c25659138"></a><a href="http://mylifeee.eklablog.com/ecriture-c25659138">✖Ecriture.</a></p>
    <p>&nbsp;</p>
    <p>&nbsp;<img src="http://ekladata.com/QbThroxM6jU5RxdGKrfabrqKs0E@30x18.jpg" alt="♔Tous...♔" width="30" height="18" /><a href="http://mylifeee.eklablog.com/chat-c25660762">✖Chat.</a></p>
    <p>&nbsp;</p>
    <p>&nbsp;<img src="http://ekladata.com/QbThroxM6jU5RxdGKrfabrqKs0E@30x18.jpg" alt="♔Tous...♔" width="30" height="18" /><a href="http://mylifeee.eklablog.com/forum-forum72816">✖Forum.</a></p>
    <p>&nbsp;</p>
    <p><a href="http://mylifeee.eklablog.com/moi-c25600554"><img style="float: left; padding-right: 5px;" src="http://ekladata.com/QbThroxM6jU5RxdGKrfabrqKs0E.jpg" alt="♔Tous..." /></a><a href="http://mylifeee.eklablog.com/concours-c25663548">✖Concours.</a></p>
    <p>&nbsp;</p>
    <p><img src="http://ekladata.com/Yq7yBEqfOJPlV7Uc8KwXffiJHrc@118x7.gif" alt="♔Tous..." width="118" height="7" /></p>
    </div>

    Mais je n'arrive pas à le mettre au milieu dans mon article.

    Comment faire ?

    71
    Samedi 11 Octobre 2014 à 23:17

    Heu... Je ne comprends pas ce que tu veux faire avec ce code ^^'

    72
    Samedi 11 Octobre 2014 à 23:22

    Et bien je voudrais le mettre au milieu de mon article... '-'

    73
    Jeudi 23 Octobre 2014 à 16:21

    Bonjour, moi j'aimerais savoir comment la personnaliser... :)

    Comme cela.

    Mettre une image, un fond, arrondir les bords... :3

    Merci beaucoup d'avance ! :)

    74
    Lundi 27 Octobre 2014 à 14:44

    Merci beaucoup pour le code ! Mais ont ne pourrais pas changer la couleur de la scrollbar ?

    75
    Mardi 28 Octobre 2014 à 22:17

    Bonjour,

    j'aimerais que le contenu (la ou il y a tout les articles) ai une scrollbar.

    Est-ce possible? 

    76
    Mercredi 29 Octobre 2014 à 19:32

    Bonjour ^^ (ou du moins bonsoir, à en voir l'heure où j'écris), j'aimerai savoir comment déterminer l'emplacement de la scrollbar dans un article (ex : à droite, à gauche, au milieu, etc...) ?

    J'ai zyeuté les commentaires et je ne l'ai pas vu, j'avais que je n'ai pas trop regardé les autres articles, donc si c'est écrit quelque part, peux-tu m'expliquer ? Voilà, bah... merci d'avance ^^

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :