Discussion :

[Shakuro]

Bonjour,

Je viens désespérément sur ce fofo afin de trouver une ame qui puisse me guider sur la bonne voie car je sature. Voila pret de 8h (étalonné sur 2jours) que je me tire les cheveux fasse à un problème qui selon moi n'est pas bien compliqué à solutionné.

J'ai réalisé une page test: ICI

Voici un petit schéma de se que je voudrais (avec mon raisonnement actuel):


Cette div c1 (vidéo) placée en bottom:0 et left: 0, j'aimerais que lorsqu'elle remonte quand un internaute réduit sa fenêtre, se bloque automatiquement avant d'impiété sur le menu (ligne bleutée).

Je sais que c'est une histoire de Parent-Enfant, mais après plusieurs manips je ne trouve rien de concluant...

Pourriez-vous m'aider?

[e-fitz]

Bonjour, ta page de test ne fonctionne pas chez moi, donc il est difficile de t'aider.

[Shakuro]

Bonsoir,

Voici l'adresse url correcte de la page test: ICI

Pour encore mieux illustré le problème à l'échelle du site complet, j'ai utilisé ViewLikeUs pour voir ma page d'accueil sous plusieurs résolutions.
Je vous invite à y jeter un coup d'oeil : ICI

1920x1200 sa va
1600x1200 sa va
1400x900 sa va
1280x864 la vidéo chevauche le menu
etc...

C'est là qu'aurait du agir le css pour délimiter une marge protectrice visant à empêche la vidéo de chevauché le menu.

[e-fitz]

Bonsoir,
si je comprend bien, le problème vient du fait que tu es une position absolute pour ton bottom:0 par conséquent ton object qui est absolute ne suivra pas les régles de margin ou autre.

Ce que tu peux faire c'est mettre un overflow:hidden pour eviter que l'on voit la vidéo dessus le menu, mais ce n'est qu'une astuce, voir un mauvais compromis.

[Shakuro]

Bonsoir all!

Je viens donner quelques nouvelles concernant mes différents problèmes de positionnement, mais avant toute chose je vous souhaite à toutes et à tous de passer un très bon réveillon de Noël! . En espérant que le papa noël serra généreux avec vous .

Bon alors, quelques news:

-Problème de footer résolu. Il remonte quand la fenêtre est redimensionnée, et se bloc sous le contenu. Chose qu'il ne faisait pas avant.
-Problème concernant la position de la vidéo est partiellement résolu! en effet j'ai placé celle-ci en z-index: -3; . Elle passe derrière tout objet, notamment la barre bleu du menu (qui est sur fond noir). Et sa fait relativement propre!

Un dernier petit soucis à réglé et tout est fini, oui oui mon site est presque totalement extensible, j'ai travaillé ma page test et voici le résultat: ICI

Faites l'expérience suivante: Redimensionnez la page doucement, le footer remonte, et il se bloque... Continuez de redimensionnez... Remarquez-vous quelques chose? La planète quant-à elle continue de remonter, chose que j'aimerais évité!

Je ne pense pas que sa soit faisable avec du css, peut-être du javascript avec une règle du genre: "Lorsque le footer arrete de scroller "alors" bloquer la vidéo" pourrait palié au problème.

Qu'en pensez-vous?

[Shakuro]

Problème partiellement résolu,

Il s'avère que ma remarque sur l'héritage de la fonction "z-index" m'a poussé à fouiner un peux plus loin. J'ai trouvé un petit lien qui explique le fonctionnement de la fonction ( ICI).

Citation : Developerz.mozilla.org
Chaque contexte d'empilement est complètement indépendant de ses parents : seuls les éléments enfants sont pris en compte lors du traitement de l'empilement.


J'ai donc simplement appliqué un z-index: -3; au parent (#fond-menu) contenant la div #c1 (vidéo) et sa à fonctionné.

Mais mes liens (dans le footer) ne sont plus interactifs (cliquables); dû au z-index: -3; encore un problème auquel je dois faire face seul...

Regardez: ICI