[résolu] Problème de transparence ou d'empilement ?

J'aurais besoin d'un coup de main de la part de ceux qui connaissent bien le CSS : j'ai fait un test sur http://www.webrankinfo.com/google/pagerank/test.php pour gérer un menu à 2 niveaux dans la marge de gauche

à part quelques différences entre IE et Firefox, j'ai surtout un problème car le niveau 2 semble s'afficher derrière l'image de la zone centrale de la page. Ou alors un pb de transparence ?

Merci à ceux qui ont une idée !

(pb déjà posté sur WRI mais je pense avoir + de réponses ici !)
Modifié par WebRankInfo (30 Nov 2005 - 15:26)

As-tu essayé de jouer avec z-index?
C'est la première idée qui me vient...

oui un peu, j'ai mis z-index: 999 sur le ul de 2nd niveau, sans effet

bonjour,

as tu essayé de mettre

<div id="outer"> 
            <div id="inner"> 

après la fin du menu donc apres la balise </div> de id="left"

j'ai appliqué ton idée sans trop réfléchir et ça décale le menu, ce qui ne permet pas de tester si ça règle le pb je pense (c'est en ligne tu peux voir)

effectivement

ça regle le probleme mais pas dans le bon sens.

Désolé

au fait précision : je suis parti de l'excellent exemple http://pompage.net/IMG/html/deroulants/vertical.html que j'ai essayé d'adapter à mon menu actuel (en vain pour l'instant)

Olivier.
Essai de mettre un calque en position absolute au dessus de la bordure centrale avec un fond rouge par exemple pour voir si cela est lié à la CSS ou si c'est ne navigateur qui patauge dans les background et qui fait n'importe quoi.

j'ai mis plusieurs blocs pour tester...

j'ai trouver la solution

#left { float: left; position: relative; z-index: 10;}
#right { float: left; position: relative; z-index: 11;}
#center { float: left; width: 100%; position: relative; z-index: 12; }

a voir ceci, le bloc center passe avant le bloc left

donc soit tu inverse les z-index, soit tu les supprime

Fait le test en enlevant le z-index: 12 de #center

amicalement

bravo Philippe, ça marche ! c'était donc bien les z-index, j'aurais dû mieux étudier l'ensemble de ma feuille CSS.

Merci à tous !

je vais abuser mais bon... il me reste l'éternel problème lié à IE et aux margin et padding
le menu de niveau 2 ne marche pas comme il faut sous IE

Personellement, je commence toute mes feuilles de style avec

* {margin=0; padding=0}

Ca a tendance à calmer pas mal de problèmes entre les navigateurs.

de même mais ce n'est pas "=" mais ":"

:)

@WebRankInfo

C'est le clignotement qui te gene sous IE ou c'est autre chose.

Précisions Stp

edit => ok j'ai vu le décalage

Le plus dur pour trouver ce genre de faille pour un neophyte comme moi, c'est de pas pouvoir tester en direct le code.

Bon

Peut etre pourrais tu faire une petite modif la

#liens li ul { /* listes de deuxi�me niveau */
  padding: 0 0 5px 0;
  margin: 20px 0 0 40px; en mettant 20px au lieu de -10px tu dois pouvoir rattraper l'ecart qui te pose probleme

Teste et dis moi
Modifié par Philippe (30 Nov 2005 - 20:47)

en fait sur cette page : http://www.webrankinfo.com/google/pagerank/test.php j'ai mis en lumière le pb : sur IE seul le 2eme lien est utilisable, mais avec le lien n°1 on n'arrive pas à atteindre avec la souris le menu de niveau 2

j'ai voulu indiquer width: 100% sur les "li" de niveau 1, ou + précisément sur les liens dans les li, mais ça déconne

Bonsoir,

Ajouter dans une CSS en commentaires conditionnels avec la condition if lte IE 6 (Voir FAQ du forum) :

#liens li a {
height: 1%;
}

Le but est de doter ces liens de premier niveau de l'état de haslayout propre à IE Windows. Si la compatibilité avec IE5.0 ne compte pas, et que seuls IE5.5 et IE6.0 sont visés, une propriété zoom: 1 fera avantageusement l'affaire, étant dénuée de tout effet de bord possible.
Modifié par Laurent Denis (02 Dec 2005 - 20:24)

Merci Laurent mais ça n'a pas l'air de marcher...
J'ai testé d'abord en ajoutant ceci dans le code de ma page de test :

<!--[if lte IE 6]>
<link href="/styles/ie.css" rel="stylesheet" type="text/css" media="all" />
<![endif]-->

et en utilisant cette feuille /styles/ie.css avec :

#liens li a {
  height: 1%;
}

Mais ça n'a rien changé semble-t-il dans IE 6 (et rien non plus dans Firefox 1.5).

J'ai testé aussi de mettre

#liens li a {
  height: 1%;
}

directement dans ma CSS principale, pour l'appliquer à tous les navigateurs, et ça ne marche toujours pas.

Dois-je combiner cela avec un code comme ça ?

#liens li a {
  width: 100%;
}

bonsoir,

euh.... un display: block; ne suffirai pas à regler ton probleme sur les "li" de niveau 1 ?

C'est peut etre une betise mais bon, on sait jamais

le display: block; sur le li seulement n'a rien changé
par contre en le mettant sur le "li a" ça marche presque : on accède bien au menu de niveau 2 avec IE, mais ça provoque un espacement entre les li de niveau 1 (voir page d'exemple)

toujours pas