[CSS] Scroll

fissunix · 30/11/2004, 14h51

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/11/2004, 18h23

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/11/2004, 19h42

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

overflow: scroll

fissunix · 30/11/2004, 22h51

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 · 01/12/2004, 08h53

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:

Code:

overflow-y: auto;
height: 100%;

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

Any suggestion ?

Merci

Nephou · 02/12/2004, 16h28

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:

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 · 02/12/2004, 18h56

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

. 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

!

Merci quand même !

Nephou · 02/12/2004, 19h09

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

pb de copier-coller peut être

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

fissunix · 02/12/2004, 22h19

Citation:

Envoyé par Nephou

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

pb de copier-coller peut être

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

Nephou · 03/12/2004, 14h00

essai ça pour voir :

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

fissunix · 03/12/2004, 17h09

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 · 03/12/2004, 17h11

ben il suffit d'enlever ma div de gauche

30/11/2004, 14h51	[CSS] Scroll	#1
fissunix Membre confirmé Date d'inscription: 11/04/04 Localisation: Fribourg (CH) Messages: 290 Disco:	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+

30/11/2004, 18h23		#2
molgow Modérateur Date d'inscription: 04/01/02 Localisation: Suisse Messages: 5516 Disco:	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 ?
	-------------------- L'éthique, ce mot-lessive, est utilisé à tout instant pour laver les consciences sans frotter. Corinne Maier

30/11/2004, 19h42		#3
mfay Membre d'élite Date d'inscription: 23/05/01 Messages: 1008 Disco:	C'est pas à ça que sert l'option : overflow: scroll
	-------------------- J'ai fait un beau petit jeu : Bo-Jong Et j'ai fait aussi plein de petits logiciels gratuits Fouteur de coups de boule négatif sur les Polaroids

01/12/2004, 08h53		#5
fissunix Membre confirmé Date d'inscription: 11/04/04 Localisation: Fribourg (CH) Messages: 290 Disco:	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: Code: overflow-y: auto; height: 100%; Mais cela ne résoud pas mon problème. Any suggestion ? Merci

02/12/2004, 16h28		#6
Nephou Putain, onze ans ! Date d'inscription: 24/04/01 Localisation: Pyrénées orientales Messages: 7120 Disco:	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: 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é
	-------------------- site : www.nulle-part.fr ; photostream : http://www.flickr.com/photos/nulle-part/ Dernière modification par Nephou ; 02/12/2004 à 17h00.

30/11/2004, 22h51		#4
fissunix Membre confirmé Date d'inscription: 11/04/04 Localisation: Fribourg (CH) Messages: 290 Disco:	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+

02/12/2004, 18h56		#7
fissunix Membre confirmé Date d'inscription: 11/04/04 Localisation: Fribourg (CH) Messages: 290 Disco:	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 . Je suis pénible... j'ai finalement opté pour une solution sans scrollbar, j'ai mis des <!--PAGEBREAK--> dans la source html et j'affiche le tout en plusieur page grace à une bidouille PHP ! Merci quand même !

02/12/2004, 19h09		#8
Nephou Putain, onze ans ! Date d'inscription: 24/04/01 Localisation: Pyrénées orientales Messages: 7120 Disco:	ben je comprends pas : chez moi ça s'affiche bien avec firefox et explorer pb de copier-coller peut être sinon toi t'es du genre à empêcher le visiteur de redimensionner tout comme il veut non

03/12/2004, 14h00		#10
Nephou Putain, onze ans ! Date d'inscription: 24/04/01 Localisation: Pyrénées orientales Messages: 7120 Disco:	essai ça pour voir : http://benoit.launay.free.fr/nouvelle_page_1.htm

03/12/2004, 17h09		#11
fissunix Membre confirmé Date d'inscription: 11/04/04 Localisation: Fribourg (CH) Messages: 290 Disco:	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 !

03/12/2004, 17h11		#12
Nephou Putain, onze ans ! Date d'inscription: 24/04/01 Localisation: Pyrénées orientales Messages: 7120 Disco:	ben il suffit d'enlever ma div de gauche
	-------------------- site : www.nulle-part.fr ; photostream : http://www.flickr.com/photos/nulle-part/

Utilisateurs regardant la discussion actuelle : 1 (0 membre(s) et 1 invité(s))

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email
Modes d'affichage
Mode linéaire Choisir le mode hybride Choisir le mode arborescent

Discussions similaires
Discussion	Auteur	Forum	Réponses	Dernier message
scroll	6run0	iBook et PowerBook	3	29/04/2005 23h24
css scroll bar IE pc	Gunther Groenewege	Développement web	0	01/11/2004 19h32
Débutant ch. fan de css pour l'aider à finir son site et mieux cprdre le css	AntoineD	Développement web	21	29/09/2004 14h45
Trackpad et scroll ?	yagoceron	iBook et PowerBook	23	30/11/2003 23h24
Scroll brutal!!!	Muludovski	Mac OS X	5	26/04/2002 17h12