[Résolu] Vos avis sur les iFrame vs mon problème de carousel!

Bonjour,
Bon je repose ici ma question, mais je ne suis peut-être pas du tout au bon endroit. Le cas échéant, désolé d'avance et surtout ne pas ce gêner pour déplacer le sujet.
J'avais déjà abordé le sujet dans mon sujet pour la critique de mon site : ici

Donc voilà,
Je doit mettre mon site officiellement en ligne bientôt, mais avant j'ai quelques détails et bugs à régler. L'un de ces bugs concerne le carousel de présentation de produits. J'ai utilisé un script jQuery tout fait, jusqu'à maintenant tout va bien. Mais voilà il y a un gros problème le sous-menu passe sous le carousel lorsqu'il se déroule.

Je fais affaire avec un professionnel pour le codage de la section commande en ligne et compte client et je lui avait demandé son aide pour régler ce bug entre autre chose.

La raison pour laquelle le carousel passe devant le menu, est que l'élément est comme flottant alors que le menu reste au niveau inférieur de la page.

Me rappel avoir essayer le z index, mais ça n'avais pas fonctionné. Donc le pro me suggère de mettre le carousel dans un iFrame.

Grosse question qui vient... biggol j'avais cru comprendre que les iFrame étaient à éviter le plus possible. Dans mon cas est-ce vraiment la seule solution?

L'une des pages dont il est question:
-http://www.spypoint.com/2010/FR/cameras.html
Modifié par juliesunset (18 Aug 2014 - 21:57)

La technique de l'iframe pourrait être utilisée, mais c'est un peu excessif. Quand aux raisons d'éviter les iframes, je ne crois pas qu'elles jouent vraiment dans ce cas précis.

Non, j'éviterais juste le recours à une iframe car... le problème se règle simplement en ajustant les z-index.

J'avais déjà essayer avec les z-index, mais ça n'avais pas fonctionné. Ou bien j'ai mal compris le fonctionnement.

Bon, j'ose remonter le topic... cela dit il n'est plus question de sémantique je crois bien.

J'ai revue un peu les z-index, j'avais bien compris finalement. Mais je n'arrive toujours à rien. Peut-être parce que je n'arrive pas à trouver où je doit mettre les dit z-index dans mon code. En fait au niveau de mon css du sous-menu ça va je crois, mais pour ce qui est du carrousel la position absolute a été appliqué via le code js. et je crois donc que c'est dans ce code que je dois ajouter un z-index, le tout est de savoir où exactement!

Alors si quelqu'un peu me donner un coup de main à ce niveau ça serait bien apprécié!

Hello,

pour le fonctionnement du z-index : (re)lire cette astuce.

En résumé c'est plutôt simple : l'élément qui doit se trouver au premier plan doit avoir une valeur de z-index supérieure à celle des éléments qui doivent rester en arrière plan et pour appliquer un z-index à un élément il faut que ce dernier soit positionné (si ça n'est pas déjà le cas dans ton code il suffit donc de lui rajouter un position: relative).
Modifié par Heyoan (13 Jan 2010 - 16:55)

Oui j'avais tout bon. Mon sous-menu est positionné en absolute dans le css, mon carrousel aussi mais lui c'est via son code js qu'il est positionné.

Voilà où j'en suis pour le css de mon menu:

div#menu{
	width: 928px;
	height:32px;
	cursor:pointer;
	position:relative; /*pour placer le menu dessus*/
}
div#menu ul{
	padding:0;
	margin:0;
	width: auto;
	display:block;
	list-style: none;
}
div#menu ul li li{
	z-index: 100;
}
	/* acceuil */
div#menu ul li.accueil{
	position:relative;
	background:url(../interface/images/Site2010-02.png) top no-repeat;
	height:32px;
	width:106px;
	float:left;
}
div#menu ul li.accueil:hover{
	background-position: bottom;
	height:33px;
}

	/* produits */
div#menu ul li.produits{
	position:relative;
	list-style: none;
	background:url(../interface/images/Site2010-03.png) top no-repeat;
	height:32px;
	width:110px;
	float:left;
}
div#menu ul li.produits:hover{
	background-position: bottom;
	height:33px;
}
div#menu li.sousmenu-produits01{
	background-color: #f08d21;
	height:25px;
	width:197px;
	display:block;
	position: absolute;
	top: 30px;
	left:2px;
}
div#menu li.sousmenu-cameras01{
	background:url(../interface/images/sous-menu/camerasSous.png) top no-repeat;
	height:25px;
	width:189px;
	display:block;
	position: absolute;
	top: -1px;
	left: 196px;
}
div#menu li.sousmenu-cameras02{
	background-color: #f08d21;
	height:24px;
	width:188px;
	display:block;
	position: absolute;
	top: 24px;
	left: 196px;
}
div#menu li.sousmenu-cameras03{
	background:url(../interface/images/sous-menu/camerasSous.png) bottom no-repeat;
	height:25px;
	width:189px;
	display:block;
	position: absolute;
	top: 47px;
	left: 196px;
}

div#menu li.sousmenu-produits02{
	background-color: #f08d21;
	height:24px;
	width:197px;
	display:block;
	position: absolute;
	top: 55px;
	left:2px;
}

div#menu li.sousmenu-produits03{
	background-color: #f08d21;
	height:25px;
	width:197px;
	display:block;
	position: absolute;
	top: 79px;
	left:2px;
}
div#menu li.sousmenu-produits04{
	background-color: #f08d21;
	height:25px;
	width:197px;
	display:block;
	position: absolute;
	top: 104px;
	left:2px;
}
div#menu li.sousmenu-produits05{
	background-color: #f08d21;
	height:25px;
	width:197px;
	display:block;
	position: absolute;
	top: 129px;
	left:2px;
}
div#menu li.sousmenu-produits06{
	background:url(../interface/images/sous-menu/ProduitsSous.png) bottom no-repeat;
	height:24px;
	width:199px;
	display:block;
	position: absolute;
	top: 154px;
	left:1px;
}

	/* photos et videos */
div#menu ul li.photos-videos{
	position:relative;
	list-style: none;
	background:url(../interface/images/Site2010-04.png) top no-repeat;
	height:32px;
	width:179px;
	float:left;
}
div#menu ul li.photos-videos:hover{
	background-position: bottom;
	height:33px;
}
div#menu li.sousmenu-photos-videos01{
	background-color: #f08d21;
	height:27px;
	width:122px;
	display:block;
	position: absolute;
	top: 30px;
	left:2px;
}

div#menu li.sousmenu-photos-videos02{
	background-color: #f08d21;
	height:25px;
	width:122px;
	display:block;
	position: absolute;
	top: 57px;
	left:2px;
}
div#menu li.sousmenu-modeles2008-01{
	background:url(../interface/images/sous-menu/ModeleSous.png) top no-repeat;
	height:26px;
	width:93px;
	display:block;
	position: absolute;
	top: 0px;
	left: 121px;
}
div#menu li.sousmenu-modeles2008-02{
	background-color: #f08d21;
	height:23px;
	width:91px;
	display:block;
	position: absolute;
	top: 24px;
	left: 122px;
}
div#menu li.sousmenu-modeles2008-03{
	background:url(../interface/images/sous-menu/ModeleSous.png) bottom no-repeat;
	height:26px;
	width:93px;
	display:block;
	position: absolute;
	top: 47px;
	left: 121px;
}

div#menu li.sousmenu-photos-videos03{
	background:url(../interface/images/sous-menu/PhotosVideos-FR-Sous.png) bottom no-repeat;
	height:28px;
	width:124px;
	display:block;
	position: absolute;
	top: 82px;
	left:1px;
}
div#menu li.sousmenu-modeles2009-01{
	background:url(../interface/images/sous-menu/ModeleSous.png) top no-repeat;
	height:24px;
	width:93px;
	display:block;
	position: absolute;
	top: 0px;
	left: 122px;
}
div#menu li.sousmenu-modeles2009-02{
	background-color: #f08d21;
	height:24px;
	width:91px;
	display:block;
	position: absolute;
	top: 24px;
	left: 123px;
}
div#menu li.sousmenu-modeles2009-03{
	background-color: #f08d21;;
	height:25px;
	width:91px;
	display:block;
	position: absolute;
	top: 48px;
	left: 123px;
}
div#menu li.sousmenu-modeles2009-04{
	background-color: #f08d21;
	height:24px;
	width:91px;
	display:block;
	position: absolute;
	top: 72px;
	left: 123px;
}
div#menu li.sousmenu-modeles2009-05{
	background-color: #f08d21;
	height:24px;
	width:91px;
	display:block;
	position: absolute;
	top: 96px;
	left: 123px;
}
div#menu li.sousmenu-modeles2009-06{
	background:url(../interface/images/sous-menu/ModeleSous.png) bottom no-repeat;
	height:24px;
	width:93px;
	display:block;
	position: absolute;
	top: 120px;
	left: 122px;
}

	/* distributeurs */
div#menu ul li.distributeurs{
	position:relative;
	list-style: none;
	background:url(../interface/images/Site2010-05.png) top no-repeat;
	height:32px;
	width:148px;
	float:left;
}
div#menu ul li.distributeurs:hover{
	background-position: bottom;
	height:33px;
}
div#menu li.sousmenu-distributeurs01{
	background-color: #f08d21;
	height:26px;
	width:214px;
	display:block;
	position: absolute;
	top: 30px;
	left:2px;
}
div#menu li.sousmenu-detaillantSous_02{
	background:url(../interface/images/sous-menu/DetaillantSous.png) top no-repeat;
	height:24px;
	width:96px;
	display:block;
	position: absolute;
	top: -1px;
	left: 214px;
}
div#menu li.sousmenu-detaillantSous_03{
	background-color: #f08d21;
	height:24px;
	width:96px;
	display:block;
	position: absolute;
	top: 23px;
	left: 214px;
}
div#menu li.sousmenu-detaillantSous_04{
	background:url(../interface/images/sous-menu/DetaillantSous.png) bottom no-repeat;
	height:24px;
	width:96px;
	display:block;
	position: absolute;
	top: 47px;
	left: 214px;
}

div#menu li.sousmenu-distributeurs02{
	background:url(../interface/images/sous-menu/DistributeursSous.png) bottom no-repeat;
	height:25px;
	width:216px;
	display:block;
	position: absolute;
	top: 56px;
	left:1px;
}

	/* commande en ligne */
div#menu ul li.commande{
	position:relative;
	list-style: none;
	background:url(../interface/images/Site2010-06.png) top no-repeat;
	height:32px;
	width:187px;
	float:left;
}
div#menu ul li.commande:hover{
	background-position: bottom;
	height:33px;
}
div#menu li.sousmenu-commande01{
	background-color: #f08d21;
	height:26px;
	width:101px;
	display:block;
	position: absolute;
	top: 30px;
	left:2px;
}
div#menu li.sousmenu-commande02{
	background-color: #f08d21;
	height:25px;
	width:101px;
	display:block;
	position: absolute;
	top: 56px;
	left:2px;
}

	/* support technique */
div#menu ul li.support{
	position:relative;
	list-style: none;
	background:url(../interface/images/Site2010-07.png) top no-repeat;
	height:32px;
	width:198px;
	float:left;
}
div#menu ul li.support:hover{
	background-position: bottom;
	height:33px;
}
div#menu li.sousmenu-support01{
	background:url(../interface/images/sous-menu/Support-FR-Sous.png) top no-repeat;
	height:27px;
	width:140px;
	display:block;
	position: absolute;
	top: 30px;
	left:1px;
}
div#menu li.sousmenu-support02{
	background:url(../interface/images/sous-menu/Support-FR-Sous.png) center no-repeat;
	height:25px;
	width:140px;
	display:block;
	position: absolute;
	top: 57px;
	left:1px;
}
div#menu li.sousmenu-support03{
	background:url(../interface/images/sous-menu/Support-FR-Sous.png) bottom no-repeat;
	height:26px;
	width:140px;
	display:block;
	position: absolute;
	top: 82px;
	left:1px;
}


div#menu ul.niveau2{
	display:none;
}  
div#menu ul ul a, #menu ul ul ul a {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	font-style: italic;
	font-weight: bold;
	color: #000;
	text-decoration: none;
	text-align: left;
	padding: 3px 0 2px 0;
	margin-left: 10px;
	font-variant: small-caps;
	display: block;
	height:26px;
}

div#menu ul ul a:hover, #menu ul ul ul a:hover {
	color: #FFF;
}

div#menu ul.niveau3{
	display:none;
}

div#menu ul.niveau1 li:hover ul.niveau2{
	display:block;
}
div#menu ul.niveau2 li:hover ul.niveau3{
	display:block;
}

Bon je sais c'est long comme code pour un menu, mais ça la seule façon que j'ai trouvé pour faire comme je voulais.

En fait j'ai simplement ajouté ces lignes à mon code:

div#menu ul li li{
	z-index: 100;
}

Je pense que c'est le bon endroit
Maintenant, il faut que je trouve ou mettre le z-index pour l'élément du carrousel, et c'Est là que je sèche...

Ouille !

Ce code est non seulement horriblement compliqué (quel est l'intérêt de positionner chaque élément en absolu et au pixel près ?) mais en plus il est inaccessible au clavier (tabulation). Je t'invite fortement à trouver un meilleur script que celui-ci pour faire un menu déroulant.

Quoi qu'il en soit il est inutile d'affecter un z-index à chacun des éléments de la liste : il suffit de l'affecter à l'élément UL. Le problème est que le carrousel a un z-index de 490 alors que ton UL n'a que 120...


Edit: une extension Firefox comme Firebug simplifie drôlement la vie pour résoudre ce genre de problème (ainsi que son équivalent dans les différents navigateurs).
Modifié par Heyoan (13 Jan 2010 - 19:08)

Heyoan a écrit :
Ouille !

Ce code est non seulement horriblement compliqué (quel est l'intérêt de positionner chaque élément en absolu et au pixel près ?) mais en plus il est inaccessible au clavier (tabulation). Je t'invite fortement à trouver un meilleur script que celui-ci pour faire un menu déroulant.

L'utilité de mettre en absolut, c'est que ça ne fonctionne pas autrement.
Pour l'accèssibilité au clavier je savais déjà. Je sais que jQuery serait peut-être une solution à ce niveau, mais pour l'instant je laisse ainsi.

Heyoan a écrit :
Quoi qu'il en soit il est inutile d'affecter un z-index à chacun des éléments de la liste : il suffit de l'affecter à l'élément UL. Le problème est que le carrousel a un z-index de 490 alors que ton UL n'a que 120...

490??? Puis-je savoir ou tu a vu ça... parce que moi j'ai eu beau chercher j'ai jamais rien vue!

Heyoan a écrit :

Edit: une extension Firefox comme Firebug simplifie drôlement la vie pour résoudre ce genre de problème (ainsi que son équivalent dans les différents navigateurs).

Oui Firebug j'ai. Mais je n'ai jamais été capable de l'utilisé correctement...

juliesunset a écrit :
490??? Puis-je savoir ou tu a vu ça... parce que moi j'ai eu beau chercher j'ai jamais rien vue!

Lunettes + Firebug.



La valeur a l'air d'osciller entre 400 et 500 (plus ou moins). C'est ce qui permet de faire passer des éléments devant et d'autres derrière...
Modifié par Florent V. (13 Jan 2010 - 20:29)

juliesunset a écrit :
Oui Firebug j'ai. Mais je n'ai jamais été capable de l'utilisé correctement...

Utiliser le mode «HTML», et la fonction «Inspecter» (bouton bleu en haut à gauche dans ma capture d'écran). Ensuite ça va tout seul.

Ah ok, je comprend mieux je n'avais pas remarqué cette partie du code dans firebug.

Donc si je passe mon z-index de menu a 600 au moins il devrait passer par dessus le carrousel.

EDIT: Ça fonctionne!
Et j'ai tenté de simplifier le code css de mon menu, mais je me retrouve avec quelque bug du coup... . Vais devoir faire un tour du côté de l'aide CSS!

Oups! Et merci beaucoup de m'avoir mis la puce à l'oreille!
Modifié par juliesunset (13 Jan 2010 - 20:44)