Contrôler le mouvement d'un div lors du redimensionnement de la fenêtre. [Résolu]

[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

[e-fitz]

Bonjour et joyeux noel,

J'ai regardé un peu ton code, il me semble qu'il y a un probléme de z-index sur le flash, c'est a dire que tes liens sont en faite en dessous du flash mais visible (un truc du genre) donc on ne peut pas cliquer dessus.
L'idée serait d'arriver a donner un z-index à ton flash, je crois avoir lu que pour cela il faut utiliser le wmode sur ton flash.

Mais je n'en sais pas plus car je n'utilise jamais de flash dans mes pages...

Si tu trouves une solution donne nous la cela m'interesse.

Bonne continuation

[Shakuro]

Merci e-fitz de me répondre, j'ai posté sur trois fofos et aucuns ne me réponds... Enfaite il faut comprendre le fonctionnement du z-index.

Mes liens sont dans un <table> eux même dans un div et le div dans un autre div. (ma div footer-bloc est enfant de ma div fond-menu qui lui est le parent).

Code :

1
2
3
4
5
<div id="fond-menu">
              <div id="footer-bloc">			
	           <table...>
              </div>
</div>

J'ai appliqué un z-index:-3; à ma div fond-menu, du coup tout ces enfants hérites du z-index: -3; et l'ensemble passe sous tout les autres objets du site.

Hors il faudrait que ma div footer-bloc soit en z-index: 0; minimum pour que mes liens soit fonctionnels (enfin je crois...). Mais pas possible vu que le parent est lui en z-index: -3; . Meme si je mettrais un z-index: 100; à ma div footer-bloc sa ne changerais rien...

Le problème c'est que si je sort l'enfant de son parent. Il y a un soucis avec le footer, celui-ci remonte toujours parfaitement bien lorsque l'écran est redimensionné et se block quand il arrive au contenu. Tous, sauf le div footer-bloc, lui continu de monter par dessus le site car il est positionné en "absolute" et sort du flux... Mais je suis obligé de le positionné en absolute car sinon le z-index ne fonctionne pas.

Donc le div fond-menu agit sur la fonctionnalité du footer, et je suis contraint de placé le div footer-bloc à l'intérieur...

Donc si quelqu'un à une autre solution... je coince là

[Shakuro]

Problème résolu.

Je me suis aidé de se que j'ai dis dans le dernier post, notamment un passage clé:

Tous, sauf le div footer-bloc, lui continu de monter par dessus le site car il est positionné en "absolute" et sort du flux... Mais je suis obligé de le positionné en absolute car sinon le z-index ne fonctionne pas.

Obligé ? Oui d'un point de vue logique, pour que je puisse superposer les deux divs il faut bien l'un de ces deux divs en position:absolute, mais j'ai trouvé une parade. J'ai insérer un div #conteneur hors de l'ancien parent (fond-menu) en position relative (donc restant dans le flux). Celui-ci est transparent et est par défault placé au dessus du div #fond-menu (car il est dans le flux, donc les objets en relatifs ne se chevauchent pas mais se suivent).

Ensuite j'y est inséré mon div #footer-bloc qui lui est en position:absolute, de se fait, j'ai pu appliqué un bottom:-147px (qui est la hauteur de l'image représentant la bande du footer) et donc cette div #footer-bloc c'est replacé correctement sur mon #fond-menu!

Je lui est appliqué un z-index: 0; . Et sa a marché, puisque mon footer-bloc ne dépend plus de son ancien parent qui était en z-index: -3; mais du nouveau (conteneur_footer-bloc) qui lui est en z-index:0; .


Voici un morceau du code pour illustré l'explication:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<!--Pied de page--> 	
	<div class="footer">
 
<!--Tableau contenant les liens du footer--> 
		<div id="conteneur_footer-bloc"> <!--Conteneur en position relative-->
			<div id="footer-bloc"> <!--Le bloc en position:absolute-->		
			       <table> liens </table>
			</div>	
		</div>
 
<!--Fond du footer--> 
		<div id="fond-menu"> <!--Lancien parent en z-index:-3;-->		
			<!--Vidéo .flv-->
			<div id="c1">
			       <object>Vidéo flv</object>  
			</div>
		</div>	
 
	</div>
 
</body>
</html>

Et la partie CSS lié:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
#conteneur_footer-bloc{
	position: relative;
	width: 100%
	height: 100%
}

#footer-bloc{
	position: absolute;
	background-image: url(http://peexstudio.fr/footer-bloc.jpg);
	height: 127px;
	width: 751px;
	bottom: -127px;
	outline: none;
	margin:0;
	border: none;
	z-index: 0;
	text-align: center;
	left: 50%;
	margin-left: -375.5px;
}

a{color: #333; text-decoration: none; outline: none; font-size: x-small;}
	.presentation:hover{color: yellow; text-decoration: none;}
	.portfolio:hover{color: #0CF; text-decoration: none;}
	.services:hover{color: #6F9; text-decoration: none;}
	.contacter:hover{color: #F03; text-decoration: none;}

#fond-menu{
	position: relative;
	background-image: url(http://peexstudio.fr/footer.jpg);
	height: 127px;
	width: 100%;
	outline: none;
	margin:0;
	border: none;
	bottom: 0;
	z-index: -3;
}

#c1{position: absolute; z-index: 0; height: 500px; width: 1000px; left: 0; bottom: 128px;}

Pfiou je vais m'arreter là pour ce soir, j'ai trop réfléchi , si tu as du mal à comprendre dis le moi, et merci encore!

[e-fitz]

En faite le gros soucis est la vidéo si j'ai bien compris.

Si j'était toi dans un premier temps je l'enleverai et vérifirais que tout est bon.
Puis une fois fait je la remettrais mais un div pour elle seule en bas de page, ensuite j'arrangerai mes z-index un par un.

La tu es le seul à pouvoir faire cela donc tiens nous au courant quand tu avances un peu.

Ne t'inquiète pas je répondrais jusqu'a qu'on arrive à une solution, c'est juste que comme c'est les fêtes je suis moins présent, et je pense que sur les autres forum aussi c'est pareil.

Donc, pour résumer je suis tout a fait d'accord sur le fait que tes liens sont en dessous d'un bloc a cause du z-index et qu'il faut corriger ca.
Ce problème vient de la structuration du site d'après ce que j'ai vu.

Bonne soirée

[Shakuro]

Héhé nous avons postés en même temps, j'ai réussi, lis et dis moi si tu as tout compris =D

[e-fitz]

Voila c'est à peu près ce a quoi je pensais.

Content d'avoir pu t'aider. (si je l'ai fait )

Bonne continuation