Faire scroller le contenu d'un <DIV> placé sous un autre

Faire scroller le contenu d'un <DIV> placé sous un autre - HTML/CSS - Programmation

Marsh Posté le 11-07-2012 à 17:02:28    

Bonjour,
 
J'essaie de faire un site avec une présentation sur trois niveaux :
 
- l'arrière plan qui, comme son nom l'indique, constitue le fond de page. C'est un <DIV> de taille X*Y avec une image de fond appelée depuis le CSS.
- le contenu du site, qui recevra diverses pages générées par du PHP. Ça je sais faire, pas de souci. C'est un <DIV> de même taille X*Y.
- le premier plan, qui ne sert en fait qu'à masquer le bas de page et permet d'en faire "sortir" le contenu du <DIV> précédent. Jusqu'à présent, c'est un <DIV>, toujours de taille X*Y, avec une image de fond qui arrive du CSS, mais qui est transparente du haut jusqu'au 3/4, et seulement le bas de l'image contient de la "matière". Vu que cette image est irrégulière (elle représente des feuilles et de l'herbe), le texte du bas de page apparait entre les brins d'herbe, c'est joli. En tout cas c'est ce que je veux. :o
 
Les 3 <DIV> sont empilés les uns sur les autres, dans l'ordre précédent, du dernier au premier plan. Visuellement, ça fonctionne très bien : j'ai l'effet recherché à savoir un arrière plan, le texte par dessus et le premier plan qui recouvre le bas du texte en laissant entrevoir la suite du texte entre la végétation. Par contre, pas moyen de faire scroller le contenu de la page. L’ascenseur apparaît bien, mais du fait que le <DIV> premier plan recouvre entièrement le contenu de la page, le dit ascenseur est inaccessible puisque masqué par de la transparence.
 
Comment contourner le problème ?
 
J'espère me faire comprendre... Merci d'avance :)
 
Edit : Voila un exemple :
http://www.imagewoof.com/view_thumb/e4eab1029/css.png
Je veux faire scroller le vert, sachant que le bleu est une image transparente de la même taille que le rouge.


Message édité par Kortex@HFR le 11-07-2012 à 17:46:35

---------------
Au coeur du swirl - Mon feed
Reply

Marsh Posté le 11-07-2012 à 17:02:28   

Reply

Marsh Posté le 12-07-2012 à 09:21:04    

la div rouge et bleu reste fixe et la div verte scroll dedans ?

Reply

Marsh Posté le 12-07-2012 à 09:44:54    

Bonjour,
tu peux peut-être essayer de supprimer le div vert.
Tu mets la couleur verte directement sur le body.
Ensuite, en mettant tes 2 autres div en float, ça devrait fonctionner non ?


---------------
Bel ours Vave, je me dois de l’admettre. -Skyl"win"-  Mais toi tu es intelligent -Homerde- - Ce génie -SkylWINd- JDD S16M72 10:43:46 GMT-DTC +1
Reply

Marsh Posté le 12-07-2012 à 23:59:17    

Bon, j'ai trouvé, en fait il faut ajouter pointer-events:none; sur le div bleu. Et il reste devant le vert mais n'empêche pas de scroller dans celui ci :)


---------------
Au coeur du swirl - Mon feed
Reply

Marsh Posté le 13-07-2012 à 01:26:40    

Bonjour/Bonsoir,
 
Je me permets de réagir sur ce topic car il correspond en partie à ce que je cherche : Comment faire défiler une liste d'image derrière un contour particulier.
 
Par particulier je veux dire que la forme n'est pas rectangulaire :
 
http://img11.hostingpics.net/pics/376861slideshow.png
 
Donc j'ai rajouter le contour "jaune" car si j'ai bien compris le conteneur doit forcément être rectangulaire.
 
J'ai bien un jquery qui s'occupe de l'aspect "slideshow". Le problème est que mes images défilent par dessus ce contour.
 
Merci d'avance de votre aide.
Je reste à votre disposition pour plus d'informations :)

Reply

Marsh Posté le 13-07-2012 à 09:35:16    

Je pense que comme pour ce que je cherchais à faire, il faut deux DIV de même taille et supperposés. Le premier affiche les images. Le second affiche le cadre, à savoir une image avec le centre transparent.
Essaie de gérer avec le z-index au besoin. Et si il faut que les images soient cliquable, tu ajoute pointer-events:none; dans le bloc CSS correspondant au DIV qui affiche le cadre.


---------------
Au coeur du swirl - Mon feed
Reply

Marsh Posté le 13-07-2012 à 19:51:14    

Mauvaise nouvelle : ma solution ne fonctionne qu'avec FireFox et Chrome. Opera et IE sont dans les choux.
 
J'ai trouvé cette solution qui semble fonctionner :
http://www.vinylfox.com/forwarding [...] gh-layers/
 
Par contre je ne sais pas comment la mettre en œuvre concrètement avec du code HTML/JS/CSS.
 
Est-ce que quelqu'un peut me venir en aide ?


---------------
Au coeur du swirl - Mon feed
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed