Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1768 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°2149039
Kortex@HFR
Qu'ils sont cons ces lamas !!!
Posté le 11-07-2012 à 17:02:28  profilanswer
 

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
mood
Publicité
Posté le 11-07-2012 à 17:02:28  profilanswer
 

n°2149083
noxno
Posté le 12-07-2012 à 09:21:04  profilanswer
 

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

n°2149088
vave
Nice to meet me
Posté le 12-07-2012 à 09:44:54  profilanswer
 

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
n°2149189
Kortex@HFR
Qu'ils sont cons ces lamas !!!
Posté le 12-07-2012 à 23:59:17  profilanswer
 

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
n°2149192
rannoume
Posté le 13-07-2012 à 01:26:40  profilanswer
 

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 :)

n°2149201
Kortex@HFR
Qu'ils sont cons ces lamas !!!
Posté le 13-07-2012 à 09:35:16  profilanswer
 

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
n°2149284
Kortex@HFR
Qu'ils sont cons ces lamas !!!
Posté le 13-07-2012 à 19:51:14  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
Est il possible de modifier un programme pour mettre a jour le contenuMacro recherche de contenu
[DELPHI] Copier le contenu d'un panel dans un autre ?[ORACLE OCI] Select sur un clob ne retourne qu'une partie du contenu
Autoriser du contenu uniquement à des fans FacebookURL : paramètre à saisir pour trouver un mot ou scroller
Utiliser le contenu d'un fichier XMLDiv masquée ?
html5 progress et contenu de divProblème pour mise en place d'un jeux en php
Plus de sujets relatifs à : Faire scroller le contenu d'un <DIV> placé sous un autre


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR