Problème mise en forme CSS et z-index

Bonjour à vous,

Comme je l'ai indiqué dans ma présentation, j'ai un problème sur lequel je m'arrache les cheveux !
Je m'occupe d'un site Joomla et Virtuemart. J'ai réalisé le template via artisteer.

J'ai ajouté des positions dans le header afin de gagner de la place dans le template. J'y ai mis le module de recherche. Jusque la tout allait bien, mais avec le module de recherche utilisé : http://extensions.enytheme.com/index.php?option=com_content&view=article&id=8&Itemid=46 (lien vers la démo)
j'ai un problème, lorsque les résultats s'affichent dans le module, ils passent en dessous de la barre de menu et de la feuille centrale de contenu.

Voilà une image d'exemple :


J'ai donc voulu modifier mon code dans le CSS pour y ajouter un z-index, mais cela reste toujours en dessous... Voilà le CSS pour la position du module de recherche :

   	div.recherche 
	{
	float: right;
	display: inline;
	position: absolute;
	top: 40px;
	right: 10px;
	z-index: 1000000;
   }

J'ai volontairement mis un z-index très élevé, mais ca n'a rien changé...

Si vous voulez que je vous montre le code pour le menu, pour la feuille d'article, je vous le mettrai... Mais quelqu'un aurait une idée ?
Je n'ai pas de lien vers le site, il est encore en local...

Merci d'avance !

Hélène

Bonjour,

ce problème apparait-il dans Firefox ?
Une idée de solution c'est de fixer un z-index aussi sur les conteneurs de ta div de résultats, et bien sur chaque conteneur de l'arborescence.

Bonjour,

Le problème apparait sur tous les navigateurs testés (firefox, IE et chrome).
Ce que je ne comprends pas, c'est que j'ai indiqué un z-index pour certains éléments et lorsque j'utilise firebug, j'ai systématiquement indiqué z-index : auto.

Par contre je ne comprends pas ce que tu veux dire par "fixer un z-index aussi sur les conteneurs de ta div de résultats". Je devrai aller dans le code du module donc modifier la div des résultats de recherche ?
Ca ne pose pas de problème que les z-index soient indiqués sur différentes feuilles ?

Merci pour ta réponse en tout cas.

Je précise que sans avoir de vue sur le site il est difficile de diagnostiquer le problème.
La solution que je donne est la suivante (en simplifié).

<div id="header">
   ...
   <div id="moduletable_monmodule">
      <div id="resultats">
         ...
      </div>
   </div>
   ...
</div>
<div id="content">
   ...
</div>

Niveau CSS ça donnerait:

   #header{ 
      ...
      z-index:10;
      ...
   }
   #moduletable_monmodule{ 
      ...
      z-index:11;
      ...
   }
   #resultats{ 
      ...
      z-index:12;
      ...
   }

Tout en faisant attention à ce que les éléments de "content" et "content" lui-même n'aient pas de z-index supérieur ou égal à 10 dans l'exemple.

Mais bon il me semble que cela résout un problème issu de IE donc dans Firefox, sans ça, ça devrait être bon déjà.

Donc passe en mode débuggage ^^ => simplifie le contenu du site avec juste les éléments qui posent problème, simplifie aussi la css de manière à te concentrer que sur le problème qui t'occupe.

A priori si les bons éléments sont en absolus avec des z-index dans le bon ordre, Firefox devrait au moins s'en sortir.

Merci pour les précisions. Je ne peux malheureusement pas montrer le site, il est en local pour le moment... :s
Je vais tester tout cela.
Mais la question que je me pose, j'ai ma feuille de style template.css, et la div de l'affichage des résultats est sur une autre feuille, la feuille de style du module (je fonctionne avec Joomla). Donner des z-index sur deux feuilles de style différentes peut-il poser problème ?

Avoir plusieurs feuilles de style n'est pas un problème si tout est cohérent.

Je travaille aussi beaucoup avec Joomla, il m'arrive parfois de fusionner les feuilles de style pour n'avoir que celle du template. Je trouve plus pratique comme ça.