-
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 titreBlablablablablablablablabla
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
3SonnyNathMardi 25 Octobre 2011 à 15:59Oui 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.
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.
5SonnyNathMardi 25 Octobre 2011 à 16:22Essaie peut être de réduire la largeur et la hauteur... Je comprend pas pourquoi ça ne marche pas ^^'
7SonnyNathMardi 25 Octobre 2011 à 17:39Si 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
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 ;)
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>
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 ???
Je m'en suis rendu compte en le faisant que mes points d'exlamation défilaient horizontalement ^^
Merci !
PS : j'adore ton blog
29Otakara SagashiMercredi 6 Juin 2012 à 14:36Coucou 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
@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.
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;"> </span></em></span></span></div>
je ne comprend pas quand je desant dans une autre ligne il cree un autre scrollbar et apres ça n'arrete pas de beuger !!?
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é !
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>
@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" />
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
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
<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 ;)
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..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 ;)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 ?Merci beaucoup pour ce code ! Très utile, parce que je commençais à avoir un long module pour les partenaires 8)
<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
58zinooDimanche 20 Avril 2014 à 21:32Bonjour 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 ?
59zinooLundi 21 Avril 2014 à 00:32Bonjour ! 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 ! :)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;
}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
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;
}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> </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> </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èglement.</a></p>
<p> </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> </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> </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é.</a></p>
<p> </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> </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> </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> </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> </p>
<p> <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> </p>
<p> <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> </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> </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 ?
Bonjour, moi j'aimerais savoir comment la personnaliser... :)
Comme cela.
Mettre une image, un fond, arrondir les bords... :3
Merci beaucoup d'avance ! :)
Bonjour,
j'aimerais que le contenu (la ou il y a tout les articles) ai une scrollbar.
Est-ce possible?
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 ^^
Ajouter un commentaire
C'est bizarre ! On dirait que l'HTML ne fonctionne pas sur mon blog.