Gestion d'une scrollbar

Version imprimable

Bonjour tout le monde, je suis nouvelle et étudiante débutante en développement...
Pour créer mon CV en ligne j'ai décidé d'utiliser TextWrangler (gratuit^^) et je n'arrive pas à intégrer une scrollbar (seule une barre grise apparait sans scrolling)...
J'ai pourtant fouiné partout et rien ne marche je ne comprend pas :cry:

Voici mon code, si quelqu'un pouvait m'aider je serai vraiment très redevable (il ferait une heureuse:D)
Code:

1 2 3 <body> <div id="scroll"> </div>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 #scroll { width:30px; height:1500px; background-color:grey; overflow: auto; overflow-y: scroll; position: absolute; right: 0px; border: 3px solid #276D0A; cursor: pointer; }
Je remercie par avance les personnes généreuses qui auront la bonté de me répondre et souhaite de bonnes fêtes à tous les membres!!

28/12/2013, 22h23
NoSmoking

Bonjour et bienvenue sur DVP.
Désolé mais pas compris le problème :cry:
29/12/2013, 00h28
Invité

Bonjour,
Le div fait 1500px de hauteur !
Normal que la barre de scroll soit grisée.
Il faut que la hauteur du texte dépasse les 1500px de haut pour que le scroll s'active.

Diminue à 400px (par ex.) pour voir...

(alors ? Heureuse ? ;))
29/12/2013, 22h07
Tillo

Bonsoir,

Désolé mais je ne comprends pas le problème. Chez moi la scrollbar s'affiche automatiquement et si besoin, en fonction de la "hauteur" de ma page.
30/12/2013, 08h03
rodolphebrd
Bonjour,

pouvez fournir plus de code voire le code de la page, vu qu'il y a peu d'éléments.

Les couleurs, c'est pour le draft... rassurez-moi...

Petite mise au point:
D'une manière très généraliste et dans votre cas, pour que la barre de scroll apparaisse il faut réunir la condition suivante:
- la hauteur du bloc parent doit être inférieure à la hauteur du bloc enfant.
Code:

1 2 3 4 <div class="parent"> <div class="child"> </div> </div>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 .parent{ height:150px; width:500px; background:salmon; overflow:scroll; } .child{ height:350px; width:400px; background:silver; }
http://codepen.io/anon/pen/uBIsj

OUi bien sur que c'est une ébauche ce n'est pas humain d'avoir de si mauvais gouts (des que je fais ma rentrée je le refais sur Dreamweaver et je refais la typo et les couleur intégralement, là c'est uniquement pour m'y retrouver^^)

Grace à votre commentaire je viens de comprendre qqchose de fondamental : il faut 2 div pour créer une scrollbar! (j'ai honte je suis vraiment débutante!)...
Ainsi je vais me débrouiller avec ca (merci merci c'est bete mais merci) et réadapter le code jusqu'a ce que ca marche^^...
Je m'excuse si je vous ai ennuyé par mon manque de don (j'y suis depuis peu mais j'ai réellement envie d'en apprendre plus).
Code:

1 2 3 4 5 <body> <div id="scrollparent">  <div id="scrollenfant"> </div> </div>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 #scrollparent { width:150px; height:500px; background-color:white; position: absolute; right: 0px; border: 3px solid #276D0A; cursor: pointer; } #scrollenfant { width:3500px; height:400px; background-color:grey; overflow: auto; overflow-y: scroll; position: absolute; right: 0px; border: 3px solid #276D0A; cursor: pointer; }

Bonjour,

Citation:

Envoyé par pioupiou35

...je viens de comprendre qqchose de fondamental : il faut 2 div pour créer une scrollbar!

En fait, non.
Un seul <div> suffit : http://codepen.io/jreaux62/pen/rDykx
Il suffit que le <div> qu'on veut scroller ait une hauteur définie, et que son contenu "dépasse".
Code:

1 2 3 4 5 6 7 .scrollable{ height:250px; width:500px; background:salmon; overflow-x:auto; /* affiche la barre de scroll HORIZONTALE SEULEMENT si nécessaire */ overflow-y:scroll; /* affiche TOUJOURS la barre de scroll VERTICALE */ }
PAR CONTRE, l'intérêt d'une barre de scroll à l'intérieur d'un site (autre que sur le <body>) n'est pas une bonne pratique, surtout avec les tablettes et smartphones (tactiles).
Si tu peux éviter : évite.

N.B. Il n'y a pas de honte à être débutant(e).

30/12/2013, 15h13
pioupiou35

OUi tu as raison je vais éviter tout compte fait...
Mais je vais quand meme consulter ton site pour apprendre comment le faire pour une prochaine fois^^...
Je vous remercie et vous souhaite d'agréables fins de vacances!
Encore merci pour tous vos conseils et solutions^^
Je vais progresser pour moi aussi donner des conseils dans le futur grosses bisessss:P