Version complète: sur le forum Webmaster Hub : Scroll bar inexistante
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
mathieu147
Bonjour à tous,

Comme vous pouvez le constater sur mon site, quand la fenêtre est trop petite pour le menu de gauche, il n'y a pas de scrollbar qui apparaît.

J'ai fait
CODE
<div id="menu">
<h1>Menu</h1>
<ul>
 <li> etc...
</ul>
</div>

et voici le css associé au div:
CODE
#menu
   {
   position         : fixed;
   left             : 0;
   width            : 150px;
   height           : 100%;
   margin-left      : 0px;
   margin-top       : 0px;
   padding          : 0px;
   }

(J'ai simplifié les codes pour garder l'essentiel).

Comment faire pour pouvoir scroller? Parce qu'au fur et à mesure que je vais mettre mon ite à jour, mon menu va s'agrandir, et de plus en plus de boutons seront inaccessibles :o

Merci smile.gif
petit-ourson
C'est le fixed qui pose probleme. Il faudrait "encapsuler" ton men dans un conteneur avec un overflow: scroll ...

Edit : En fait il suffirait juste de mettre un "overflow:scroll" sur ton identifiant #menu.
Ernestine
ou alors, remplacer
CODE
position: fixed;

par
CODE
position: absolute;

Ernestine
LaurentDenis
Hum... Mettre un menu en fixe (donc non scrollable s'il dépasse la hauteur de l'écran) pour le rendre ensuite scrollable avec overflow... C'est un peu tordu, non ?

Par ailleurs, l'overflow:scroll fait générer des barres de scroll internes à la page, ce qui est assez disgracieux. Et compromet partiellement l'accessibilité en rendant l'accès-clavier beaucoup plus difficile, voire parfois impossible.

Vu sa longueur indéfinie, ce menu gagnerait plus simplement à être en position absolue, comme le suggère Ernestine.
petit-ourson
je donnais juste une solution pour voir apparaitre les barres de défilement, c'est sur que ce n'est pas du plus gracieux ;o)
mathieu147
A la réflexion, c'est vrai qu'une scroll bar au milieu de la page ça aurait été vachement moche... Donc j'ai changé fixed en absolute.

Sauf que maintenant, ça fait un truc laid biggrin.gif Malgré que j'aie mis
CODE
height : 100%

Le fond bleu du menu ne fait que la hauteur de la fenêtre, et donc ne descend pas assez bas.
Enfin, retournez voir sur mon site, parce que rien qu'avec mes explications, vous risquez d'avoir du mal à comprendre le problème tongue.gif

Et merci pour vos réponses wink.gif
Ernestine
Si si c'est parfaitement compréhensible, et c'est un problème bien connu... avec height:100%, la boîte a pour hauteur celle de l'écran. Il n'y a pas grand chose à faire au niveau du Div lui-même pour y remédier. Par contre, tu peux mettre une image de fond pour ta page web, image faite de deux couleurs : bleue à gauche et blanche à droite, avec répétition sur la hauteur, pour "simuler" deux colonnes (vu sur Alistapart).
Ernestine
mathieu147
sad.gif Ca me plaît pas tellement de faire comme ça, je trouve pas ça "propre".

Donc je change un peu tout, et je mets le menu de la même couleur que le reste.


Merci quand-même wink.gif
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.