Discussion :

[Richard Trigaux]

Bonjour,

je fais un petit div, qui contient un grand document.

Pour pouvoir lire le grand document dans le petit div, je fais un petit CSS:
overflow: scroll

Ça marche très bien, j'ai des scroll bars à droite et en bas, et je peut lire mon grand document avec mes scrollbars.

Le résultat est ici: http://www.likpa.com/nav/liknav.php?index=histoire
en n'oubliant pas de faire F11 pour être en plein écran, sinon on a deux scrollbar verticales.


Le petit problème, c'est que la scrollbar horizontale ne me sert à rien, et qu'en plus elle gache la vue. J'aimerais pouvoir la supprimer, tout en gardant la verticale.

Il y avait bien une histoire de overflow-x: hidden; overflow-y: scroll;
mais bien sûr mon essai ne marche pas, et ça n'a pas l'air très standard.

Si quelqu'un connait un truc pour supprimer cette scrollbar, j'en serais reconnaissant, avant que ne me résolve à simplement diminuer la largeur de mon document.

Merci

[frog43]

J'ai posté un message similaire il y à quelques jours ...
overflow-x: hidden; overflow-y: scroll; marche mais pas sur tous les navigateurs par contre ce n'est pas valide w3c. Sinon est-tu sur que ton "grand contenu" ne dépasse pas de son conteneur à l'horizontale? La aussi la dimension dépend des navigateurs ...

[Richard Trigaux]

Merci de ta réponse. C'est bien ce que je pensais, ce n'est pas valide. je parierais même que c'est spécial IE (pour une fois qu'ils font un truc utile, personne ne les suit).

Et mon grand contenu a exactement la même largeur que le DIV contenant. Et comme la barre verticale prend de la place, ils se retrouve automatiquement MOINS grand!

Je pourrais retirer un peu de marge à mon contenu, ça marcherait (si le navigateur est assez intelligent pour ne rajouter la barre que là où elle est nécessaire) mais cela ne marcherait pas pour des handicapés qui mettraient une scrollbar très large (ma page est déjà adaptée pour les handicapés, mais je ne peut pas prévoir tous ces cas)

Je préfèrerais une solution nette qui marche toujours, si il y en a une.

[frog43]

Je ne voit pas de solution nette à par de ne pas mettre de scroll et d'en faire un manuellement avec du javascript par exemple ...

Voici l'adresse de mon post :

Ici

[Bisûnûrs]

Je pourrais retirer un peu de marge à mon contenu, ça marcherait (si le navigateur est assez intelligent pour ne rajouter la barre que là où elle est nécessaire)

overflow:auto;

[Richard Trigaux]

Merci Bisûunûrs. Overflow:auto "devrait" ajouter une scrollbar là où il y en a besoin. J'ai pas testé encore, et j'attend avant de marquer "résolu", car je ne vois pas vraiment de solution valable à 100%. En effet je peut réduire la largeur de mon document, de façon à ce que la scrollbar horizontale n'apparaisse pas. Il suffit de déduire la largeur standard des scrollbar dans les navigateurs. Mais si un handicapé met une scrollbar très large, je suis marron.

Peut-être j'attendrai CSS4 pour marquer résolu...

[Richard Trigaux]

voilà, j'ai fait comme dit dans les précédents messages, à savoir faire overflow:auto et retirer un peu de largeur à mon document pour tenir compte de la place prise par la scrollbar verticale.

Avec IE il faut retirer 24 pixels
Avec Safari il faut retirer 21 pixels
Avec Firefox il faut retirer 21 pixels
Avec Opera il faudrait en retirer 17, mais c'est inutile car il ne met la scrollbar horizontale que quand c'est nécessaire. je suis quand même obligé de retirer 17, juste pour centrer mon document

Donc ça marche... a peu près. Idéalement il faudrai quand même que l'on puisse contrôler les deux barres indépendamment.

[Paic_citron]

Oulala le déterrage de topic !!! ouuuh c'est mal! -_-

J'ai eu le même soucis et j'ai trouvé une solution plutôt sympa.
Pour avoir seulement une scrollbar verticale dans une div, il suffit de lui appliquer le
style suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
    overflow:auto;
    word-wrap:break-word;

Le word-wrap force la césure des mots =)

[kou.kou111]

Bonjour a tts,
j'ai voudrai ajouter un scolbar dans un div :j'ai utilisé ce style :overflow-x: hidden; overflow-y: "scroll; word-wrap:break-word;"
mais le problème le scolbar s'affiche sur IE et non sur firefox


merci d'avance pour votre retour