Z-index et IE6 et IE7

Bonjour,

J'ai un important problème avec IE6 et IE7. J'ai un menu déroulant un peu spécial car le cadre principal revient par dessus. Voici un schema pour mieux se représenter la chose :



La cadre vert (sous menu) est dans le cadre rouge (le menu), mais le cadre bleu revient par dessus le cadre rouge. Donc le cadre bleu doit forcément avoir un z-index >= à celui du cadre rouge. Mais si c'est le cas alors le cadre vert n'apparait pas car il est en dessous du cadre bleu...

Auriez-vous une solution à ce casse tête ?

Le mieux serait une solution en CSS, mais si vu que mon menu est fait en javascript, une bidouille pour le remettre au premier plan par script me conviendrait aussi.

Merci d'avance pour toute suggestion.

mathmax
Modifié par mathmax (16 Feb 2009 - 07:03)

Le cadre vert (sous-menu) doit avoir un z-index supérieur à celui du cadre bleu (contenu). Le cadre rouge (conteneur principal du menu) ne doit PAS avoir de z-index, et devra peut-être ne pas être positionné (en absolu ou relatif), c'est à voir. Ça vaut aussi pour les différents items de premier niveau du menu: s'ils contiennent les menus déroulants, ils ne doivent pas avoir de z-index.

Bonjour,

j'ai oublié les spécificités d'IE avec z-index (moins on s'en sert et mieux on se porte - et je parle de z-index, pas d'IE pour une fois) mais est-ce qu'il ne faudrait pas qu'un parent commun au menu+cadre vert et au cadre bleu soit positionné?
https://developer.mozilla.org/Fr/Comprendre_le_z-index_en_CSS
Modifié par Felipe (16 Feb 2009 - 11:19)

Felipe a écrit :
moins on s'en sert et mieux on se porte

Il suffit de savoir s'en servir, et d'en connaitre les limites.

Merci pour vos réponses.

En fait Florent V. ta solution ne semble pas fonctionner car à partir du moment où IE comprends que le cadre bleu est en dessus du rouge, tout cadre inclus dans le rouge est en dessous du bleu. J'ai essayé d'enlever toutes les position et z'index des cadre contenant le cadre vert et d'affecter à ce dernier un z-index plus grand que celui du cadre bleu, mais ça ne marche pas. De toute façon j'aurais besoin de placer au moins mon cadre rouge en relatif car les sous menu sont placés en absolu par rapport à celui là.
Aurais-tu quelque chose d'autre à me proposer ? Ou bien peut être ais-je oublié quelque chose ?

Merci d'avance

Au pif: faire remonter le cadre bleu avec une marge négative, plutôt qu'en le positionnant en relatif? Et utiliser un conteneur global comme référent, pas le cadre rouge. Voilà pour deux pistes.

a écrit :
faire remonter le cadre bleu avec une marge négative, plutôt qu'en le positionnant en relatif?

oui c'est justement ce que j'ai fait.

a écrit :
utiliser un conteneur global comme référent, pas le cadre rouge.

Je ne suis pas sûr de comprendre, mais si tu veux dire mettre les sous menu dans un autre conteneur que le cadre rouge, ça n'est pas possible. J'utilise un CMS et je n'ai que très peu la main sur le html. Il faut que mes sous menu soient dans le menu car ils sont positionné par rapport à lui.

mathmax a écrit :
mais si tu veux dire mettre les sous menu dans un autre conteneur que le cadre rouge

Non, je veux dire ne pas positionner en relatif (ou absolu) le cadre rouge, mais plutôt le parent ou grand-parent du cadre rouge. Pourvu que ce soit aussi un parent ou grand-parent du cadre bleu.

pas possible puisque je positionne mes sous-menu par rapport au cadre rouge...

mathmax a écrit :
pas possible puisque je positionne mes sous-menu par rapport au cadre rouge...

Désolé, cette réponse est à côté de la plaque, vu qu'elle ne correspond PAS à ma suggestion. Une réponse acceptable serait: «impossible, j'ai BESOIN de positionner mes sous-menus par rapport au cadre rouge, CAR aucun conteneur de plus haut niveau ne peut remplir un rôle similaire et satisfaisant». La réponse acceptable correspond-t-elle à la réalité, oui, non, ne se prononce pas?

(Raaaah j'aime pas faire des questions/réponse ad vitam eternam à propos d'une page que je n'ai pas sous les yeux, je perds un temps fou, je devrais aller me coucher tiens.)

a écrit :
«impossible, j'ai BESOIN de positionner mes sous-menus par rapport au cadre rouge, CAR aucun conteneur de plus haut niveau ne peut remplir un rôle similaire et satisfaisant»

oui.

Comme je l'ai dit :

a écrit :
J'utilise un CMS et je n'ai que très peu la main sur le html. Il faut que mes sous menu soient dans le menu car ils sont positionné par rapport à lui.

Ne pas avoir la main sur le HTML ne signifie pas qu'il n'y a pas en l'état de conteneur adéquat.

Bon, page en ligne, qu'on puisse vérifier cette piste? Sinon tant pis.

PS: changer de CMS s'il bride l'accès au HTML.
Modifié par Florent V. (17 Feb 2009 - 00:14)

Oui enfin... aucun conteneur de plus haut niveau ne peut remplir un rôle similaire et satisfaisant car je n'y ai accès qu'en modifiant le cœur du CMS et c'est une chose que je ne ferai qu'en dernier recours...

Allez voici un petit .mht (car mon site est encore local) :

http://www.mynetdomain.de/mathmax/index.mht
Modifié par mathmax (17 Feb 2009 - 00:42)

Lien pas utilisable. Il me manque un logiciel, une extension pour ce protocole, ou encore quelques neurones?

excuse moi. Corrigé. Par contre il faut une extension pour le lire avec FF... ou alors tu peux le lire avec Opera ou IE6+.
Modifié par mathmax (17 Feb 2009 - 00:47)

Bon alors j'ai vu le code, et depuis tout à l'heure tu me dis que le conteneur vert est positionné en relatif et sert de référent aux sous-menus positionnés en absolu... sauf que ce sont les LI qui sont positionnés en relatif, donc rien à voir... arf.

Par contre ma suggestion n'est pas applicable car le découpage n'est pas fait comme je le pensais.

Ce que je constate en voyant cette page et son code, cependant, c'est que cette intégration est assez mal pensée, pour ne pas dire que c'est du gros bricolage casse-gueule (par moments au moins). Une hauteur de 1000px, une marge supérieure négative sur le contenu, une marge inférieure négative sur le menu... c'est voulu ou c'est du bidouillage réalisé à tâtons? Il y avait quand même moyen de faire un peu plus simple, en réalisant que la bande marron n'est pas constitutive d'un «en-tête» à placer avant le contenu (ce qui impose de faire remonter le contenu d'une manière ou d'une autre), mais plutôt d'un fond global de la page (à intégrer dans l'image de fond de BODY).

Avec les parti-pris du découpage actuel j'avoue ne pas savoir ce qui pourrait être modifié pour éviter le problème que tu rencontres...

a écrit :
Une hauteur de 1000px, une marge supérieure négative sur le contenu, une marge inférieure négative sur le menu... c'est voulu ou c'est du bidouillage réalisé à tâtons?

Oui c'est exactement ça... du bricolage fait à tâtons... Et encore tu n'as pas vu mes CSS spéciales IE6 et IE7 en commentaire conditionnels !

a écrit :

Il y avait quand même moyen de faire un peu plus simple, en réalisant que la bande marron n'est pas constitutive d'un «en-tête» à placer avant le contenu (ce qui impose de faire remonter le contenu d'une manière ou d'une autre), mais plutôt d'un fond global de la page (à intégrer dans l'image de fond de BODY).

Oui j'y ai pensé, mais si tu observe bien il y a une ombre autour du cadre principal qui revient sur le menu (c'est un png transparent) et ça impliquait que le cadre principale revienne par dessus le menu. Maintenant je me dis que je devrais plutôt intégrer l'ombre dans l'image du menu pour éviter cette superposition et faire le reste en background bu body comme tu me le conseille. Ca m'éviterai bien des soucis...