[CSS] Scroll

fissunix · 30 Novembre 2004

Salut à tous,

Avertissement: ça risque d'être incompréhensible !

Je cherche un moyen en CSS de scroller un div. Je l'ai vu sur un site, impossible de le retrouver. Celui-ci utilisait la scroll bar du navigateur pour scroller un div contenu au milieu du site ? Est-ce possible ?

Merci !

A+

molgow · 30 Novembre 2004

Ce que tu demandes n'est pas possible à mon sens. Par contre, ce qui doit peut-être possible, c'est de construire ta page de telle sorte qu'il y ait des <div> "collés" en haut, en bas, à gauche et à droite et qui ne bouge pas (même avec le scroll). Ensuite de quoi, le contenu au milieu défile normalement avec l'ascenceur du navigateur.

Je sais pas si je suis compréhensible moi aussi ?

mfay · 30 Novembre 2004

C'est pas à ça que sert l'option :

overflow: scroll

fissunix · 30 Novembre 2004

Merci pour vos réponses, je vais essayé ta méthode Molgow. Donc si je t'ai bien compris, 3 div, 2 qui serviront de "masque" pour le div (le 3ème) qui contiendra le texte ? Je devrai joué avec les marges alors (sur le div du texte) ? mfay, overflow: sroll, oui il va scroller le div en mettant une scrollbar sur le div en question, ce que je n'aimerais pas...

A+

fissunix · 1 Décembre 2004

La journée commence assez mal...

J'ai monté une page de test et j'étais heureux jusqu'à il y a 10 minutes. J'ai eu la mauvaise idée d'allumée mon PC pour tester sous IE6 et là, c'est la cata ! Les "position: fixed" allucinent complètement. J'ai lu qu'on pouvait ajouter les propriétés suivantes pour la balise body:

Bloc de code:

overflow-y: auto;
height: 100%;

Mais cela ne résoud pas mon problème.

Any suggestion ?

Merci

Nephou · 2 Décembre 2004

mets en place 3 div avec le paramètre 'position' règlé sur 'fixed' : une en haut, une en bas et une à gauche (par exemple) ; tu joues avec le z-index pour les positionner au dessus du fond ou de ta div défilante.

"et voilà"

c'est clair

[des baffes]pour ne pas avoir de problème avec ie je crois que le type de positionnement du contenant des trois div masquantes doit être spécifié[/des baffes]

[toujours des baffes]en fait essaie position:absolute

[/ toujours des baffes]

edit3
---------------------------------------------
pour être précis:

les trois div sont positionnées de manière absolue avec des marges nulles (sinon bonjour l'angoisse pour les réglages sous ie)

niveau z-index, il est préférable que les div "haut" et "bas" soient au dessus. Il reste alors à régler le padding de la div de gauche pour que son contenu ne soit pas masqué.

exemple:

Bloc de code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
</head>
<body style="margin:0;padding:0;">
<div style="height:100%;margin:0;position:absolute;top:0;width:150px;background-color:#ccc;">autre test
</div>

<div style="margin:0;position:fixed;absolute:0;left:0;width:100%;background-color:#ccc;">test</div>

<div style="margin:0;position:absolute;bottom:0;left:0;width:100%;background-color:#ccc;">troisième
</div>

</body>

</html>

j'ai pas règlé les z-index car ça dépend du résultat souhaité

fissunix · 2 Décembre 2004

Merci pour ta réponse Nephou, j'ai testé ton exemple, je suppose qu'il doit y avoir une petite faute parce que c'est un peu du n'importe quoi à l'affichage

. Le problème, c'est que je peux pas me permettre d'utiliser une position absolue avec "bottom: 0" parce que la zone visible devrait rester de taille fixe à 300px :siffle:. Je suis pénible... j'ai finalement opté pour une solution sans scrollbar, j'ai mis des  dans la source html et j'affiche le tout en plusieur page grace à une bidouille PHP :rateau: !

Merci quand même !

Nephou · 2 Décembre 2004

ben je comprends pas : chez moi ça s'affiche bien avec firefox et explorer

pb de copier-coller peut être :rateau:

sinon toi t'es du genre à empêcher le visiteur de redimensionner tout comme il veut non

fissunix · 2 Décembre 2004

Nephou a dit:
ben je comprends pas : chez moi ça s'affiche bien avec firefox et explorer pb de copier-coller peut être :rateau:

sinon toi t'es du genre à empêcher le visiteur de redimensionner tout comme il veut non

J'ai réessayé, c'est vraiment bizarre, je te crois mais regarde les captures,... même le code à l'air correct ? Je te filerai l'url dès que j'aurai terminé. L'ami qui m'a fait le design qui voulait que la page ait des dimensions fixes, et c'est un peu le caca pour mettre les long textes dedans :rateau:

Nephou · 3 Décembre 2004

essai ça pour voir :

http://benoit.launay.free.fr/nouvelle_page_1.htm

fissunix · 3 Décembre 2004

ok, je vois... je ne suis pas sûr qu'on pensait la même chose ! Peux-tu aller voir http://www.contesse.ch/test/ (avec Safari ou Firefox, étant donné que sur IE6 c'est le merdier

) Peut-être qu'il ne s'agit que d'attribut à rajouter pour IE...

Merci pour ton aide !

Nephou · 3 Décembre 2004

ben il suffit d'enlever ma div de gauche

[CSS] Scroll

fissunix

Membre actif

molgow

Membre expert

mfay

Membre expert

fissunix

Membre actif

fissunix

Membre actif

Nephou

de pas sage

fissunix

Membre actif

Nephou

de pas sage

fissunix

Membre actif

Nephou

de pas sage

fissunix

Membre actif

Nephou

de pas sage

Sujets similaires