Fork me on GitHub




(1) 2 »


Probleme z-index Multimenu 1.82
#1
Guest_
Bonjour à tous,

Je cherche depuis un moment et le problème que je rencontre commence à me rendre chèvre ...

J'utilise Multimenu 1.82 sur une version 2.3.2 de Xoops. J'ai utilisé le modèle "Déroulant horizontal CSS" afin de créer un menu pour mon site.

Le problème que je rencontre est le suivant : Le menu déroulant qui est développé au passage de la souris passe derrière les images contenues dans les pages crées avec le module News. J'ai trouvé quelqu'un qui a le même problème que moi dans ce SUJET.

Comme je le pensais, on doit pouvoir régler le problème en fixant des attributs z-index dans le css correspondant au modèle de menu que j'utilise.

J'essaye maintenant depuis un temps certain mais aucun de mes essais ne s'est avéré être un succès...

Où mettre ce z-index ??? ^^

Je vous joints le css que j'ai modifié pour mon menu.

D'avance merci !

/* common styling */
/* set up the overall width of the menuhcss div, the font and the margins */

li { margin-left: 0;}

.menuhcss {
font-family: arial, sans-serif; 
margin:0 0;
padding-left:5px;
padding-top:7px;
z-index:99;
}
/* remove the bullets and set the margin and padding to zero for the unordered list */
.menuhcss ul {
padding:0; 
margin:0;
list-style-type: none;
}
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
.menuhcss ul li {
float:left; 
position:relative;
list-style-type: none;
}
/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
.menuhcss ul li a, .menuhcss ul li a:visited {
display:block; 
/*text-align:center; */
text-decoration:none; 
height:20px; 
color:#fff; 
border:1px solid #fff;
border-width:1px 2px 0 0;
background:#afd733; 
line-height:20px; 
font-size:12px;
z-index:99;
}
/* make the dropdown ul invisible */
.menuhcss ul li ul {
display: none;
}

/* specific to non IE browsers */
/* set the background and foreground color of the main menuhcss li on hover */
.menuhcss ul li:hover a {
color:#fff; 
background: #a3ccf5;
}

/* make the sub menuhcss ul visible and position it beneath the main menuhcss list item */
.menuhcss ul li:hover ul {
display:block; 
position:absolute; 
top:21px; 
}
/* style the background and foreground color of the submenu links */
.menuhcss ul li:hover ul li a {
display:block; 
background:#eef1e3; 
color:#000;
width:150px;
margin: 0 0 0 0;
}
/* style the background and forground colors of the links on hover */
.menuhcss ul li:hover ul li a:hover {
background:#e3edf1; 
color:#000;
width:150px;
}

/*
.menuhcss ul li:hover ul li.cat a {
background:#ffffff; 
color:red;
}

.menuhcss ul li:hover ul li.note a {
background:#ffffff; 
color:green;
}
*/

.menuhcss ul li:hover a.cat {
background:#ffffff; 
color:red;
}

.menuhcss ul li:hover a.cat:hover{
background:#ffffff; 
color:blue;
}

.menuhcss ul li:hover a.note {
background:#ffffff; 
color:green;
}

.menuhcss ul li:hover a.note:hover {
background:#ffffff; 
color:blue;
}

Posté le : 08/12/2009 14:35
Partager Twitter Partagez cette article sur GG+
Rapport Haut
xpected
Re: Probleme z-index Multimenu 1.82
#2
Régulier
Inscrit: 24/01/2008 09:20
De Moselle
Messages: 169
je vois que nous sommes tous deux bloqués au même endroit... :D

Posté le : 08/12/2009 14:45
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Re: Probleme z-index Multimenu 1.82
#3
Guest_
Enchanté ^^

Je précise que dans le copier/coller de ma feuille de style, le z-index est la trace de mon dernier essai ^^

J'ai aussi essayé de fixer un attribut z-index plus faible dans ma feuille de style aux éléments "xo-page" et "xo-content" mais que rien n'a changé non plus ...

SOS :p

Posté le : 08/12/2009 15:05
Partager Twitter Partagez cette article sur GG+
Rapport Haut
xpected
Re: Probleme z-index Multimenu 1.82
#4
Régulier
Inscrit: 24/01/2008 09:20
De Moselle
Messages: 169
là j'avoue tu es déjà plus doué que moi car en ce qui me concerne j'ai du mal à comprendre de quoi on parle là... z-index...
Mais je suis sous multimenu 2.08

Posté le : 08/12/2009 15:10
Partager Twitter Partagez cette article sur GG+
Rapport Haut
xpected
Re: Probleme z-index Multimenu 1.82
#5
Régulier
Inscrit: 24/01/2008 09:20
De Moselle
Messages: 169
est ce que tu as réussi à progresser à ce sujet?
Moi je reste bloquée

Posté le : 16/12/2009 09:14
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Kris
Re: Probleme z-index Multimenu 1.82
#6
Supporter Xoops
Inscrit: 09/01/2005 13:37
De Breizh
Messages: 16972
Bonjour,

Essayer avec ceci :
.menuhcss ul li { 
float:left;  
position:relative; 
list-style-type: none;
z-index:999;
}


et
.menuhcss ul li:hover ul { 
display:block;  
position:absolute;  
top:21px;  
z-index:999;
}

@+

Posté le : 16/12/2009 13:35

La connaissance s'accroît quand on la partage ...
Partager Twitter Partagez cette article sur GG+
Rapport Haut
xpected
Re: Probleme z-index Multimenu 1.82
#7
Régulier
Inscrit: 24/01/2008 09:20
De Moselle
Messages: 169
Merci pour le coup de pouce mais je me sens toujours un peu "dépassée".
Jai:
-copié ces scripts dans mon Script: multimenu_dyn_vertical_0.js => pas de résultats probants

le résultat:
/*********************************************** 
* AnyLink Drop Down Menu- � Dynamic Drive (www.dynamicdrive.com) 
* This notice MUST stay intact for legal use 
* Visit http://www.dynamicdrive.com/ for ... ull source code
 ***********************************************/

  // Edit settings here
 var menuwidth_vert_{id}=\\\'160\\\';         //default menu width
 var disappeardelay_vert_{id}=\\\'2000\\\';      //menu disappear speed onMouseout (in miliseconds)
 var hidemenu_onclick_vert_{id}=\\\'yes\\\';     //hide menu when user clicks within menu?

     ///// No further editting needed
 var ie4=document.all
 var ie5_5=typeof dropmenuiframe_vert_{id}==\\\'undefined\\\'? 0 : 1
 var ns6=document.getElementById&&!document.all

  if (ie4||ns6)
 document.write(\\\'<div id=\\\"dropmenudiv_vert_{id}\\\" style=\\\"x-index:100;visibility:hidden;\\\"
 
onMouseover=\\\"clearhidemenu_vert_{id}()\\\" onMouseout=\\\"dynamichide_vert_{id}(event)\\\"></div>\\\')

   function getposOffset_vert_{id}(what, offsettype_vert_{id}){
 var totaloffset_vert_{id}=(offsettype_vert_{id}==\\\"left\\\")? what.offsetLeft : what.offsetTop;
 var parentEl_vert_{id}=what.offsetParent;
 while (parentEl_vert_{id}!=null){
 totaloffset_vert_{id}=(offsettype_vert_{id}==\\\"left\\\")?
 totaloffset_vert_{id}+parentEl_vert_{id}.offsetLeft :
 totaloffset_vert_{id}+parentEl_vert_{id}.offsetTop;
 parentEl_vert_{id}=parentEl_vert_{id}.offsetParent;
 }
 return totaloffset_vert_{id};
 }

  function showhide_vert_{id}(obj, e, visible, hidden, menuwidth_vert_{id}){
 if (ie4||ns6) dropmenuobj_vert_{id}.style.left=dropmenuobj_vert_{id}.style.top=-500
 if (menuwidth_vert_{id}>=0){
 dropmenuobj_vert_{id}.widthobj=dropmenuobj_vert_{id}.style
 dropmenuobj_vert_{id}.widthobj.width=menuwidth_vert_{id}
 }
 if (menuwidth_vert_{id}<0){
 dropmenuobj_vert_{id}.widthobj=dropmenuobj_vert_{id}.style dropmenuobj_vert_{id}.widthobj.width=-0.8*menuwidth_vert_{id}
 }
 if (e.type==\\\"click\\\" && obj.visibility==hidden || e.type==\\\"mouseover\\\"){
 obj.visibility=visible
 unhideIframe_vert_{id}()
 }
  else if (e.type==\\\"click\\\"){
 setTimeout(\\\"hideIframe_vert_{id}();\\\",0);
 obj.visibility=hidden
 }
 }
  function iecompattest_vert_{id}(){
 return (document.compatMode && document.compatMode!=\\\"BackCompat\\\")? document.documentElement :
 document.body
 }
  function clearbrowseredge_vert_{id}(obj, whichedge_vert_{id}){
 var edgeoffset_vert_{id}=0
 if (whichedge_vert_{id}==\\\"rightedge\\\"){
 var windowedge_vert_{id}=ie4 && !window.opera? iecompattest_vert_{id}().scrollLeft+iecompattest_vert_{id}
().clientWidth-15 : window.pageXOffset+window.innerWidth-15
 dropmenuobj_vert_{id}.contentmeasure=dropmenuobj_vert_{id}.offsetWidth
 if (windowedge_vert_{id}-dropmenuobj_vert_{id}.x < dropmenuobj_vert_{id}.contentmeasure) 
edgeoffset_vert_{id}=dropmenuobj_vert_{id}.contentmeasure-obj.offsetWidth
 }
 else{
 var topedge_vert_{id}=ie4 && !window.opera? iecompattest_vert_{id}().scrollTop : window.pageYOffset
 var windowedge_vert_{id}=ie4 && !window.opera? iecompattest_vert_{id}().scrollTop+iecompattest_vert_{id}
().clientHeight-15 : window.pageYOffset+window.innerHeight-18
 dropmenuobj_vert_{id}.contentmeasure=dropmenuobj_vert_{id}.offsetHeight
 if (windowedge_vert_{id}-dropmenuobj_vert_{id}.y < dropmenuobj_vert_{id}.contentmeasure){ //move up?
 //edgeoffset_vert_{id}=dropmenuobj_vert_{id}.contentmeasure+obj.offsetHeight edgeoffset_vert_{id}=dropmenuobj_vert_{id}.contentmeasure-23 //g&#65533;re la hauteur d\\\'affichage du menu d&#65533;roulant
 if ((dropmenuobj_vert_{id}.y-topedge_vert_{id})<dropmenuobj_vert_{id}.contentmeasure) //up no good either?
 edgeoffset_vert_{id}=dropmenuobj_vert_{id}.y+obj.offsetHeight-topedge_vert_{id}
 }
 }
 return edgeoffset_vert_{id}
 }
  function populatemenu_vert_{id}(what){
 if (ie4||ns6)
 dropmenuobj_vert_{id}.innerHTML=what.join(\\\"\\\")
 }

   function dropdownmenu_vert_{id}(obj, e, menucontents, menuwidth_vert_{id}){
 if (window.event) event.cancelBubble=true
 else if (e.stopPropagation) e.stopPropagation() 
clearhidemenu_vert_{id}()  

dropmenuobj_vert_{id}=document.getElementById? document.getElementById(\\\"
dropmenudiv_vert_{id}\\\") : dropmenudiv_vert_{id}
 populatemenu_vert_{id}(menucontents)

  if (ie4||ns6){
 showhide_vert_{id}(dropmenuobj_vert_{id}.style, e, \\\"visible\\\", \\\"hidden\\\", menuwidth_vert_{id}) 
dropmenuobj_vert_{id}.x=getposOffset_vert_{id}(obj, \\\"left\\\") 
dropmenuobj_vert_{id}.y=getposOffset_vert_{id}(obj, \\\"top\\\") 
dropmenuobj_vert_{id}.style.left=dropmenuobj_vert_{id}.x-clearbrowseredge_vert_{id}(obj, \\\"rightedge\\\")+\\\"px\\\" 
dropmenuobj_vert_{id}.style.top=dropmenuobj_vert_{id}.y-clearbrowseredge_vert_{id}(obj, \\\"bottomedge\\\")+obj.offsetHeight+\\\"px\\\" 
unhideIframe_vert_{id}() 
}

  return clickreturnvalue_vert_{id}()
 }
  function clickreturnvalue_vert_{id}(){
 if (ie4||ns6) return false
 else return true
 }

  function contains_ns6(a, b) {
 while (b.parentNode)
 if ((b = b.parentNode) == a)
 return true;
 return false;
 }
  function dynamichide_vert_{id}(e){
 if (ie4&&!dropmenuobj_vert_{id}.contains(e.toElement))
 delayhidemenu_vert_{id}()
 else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget)) 
delayhidemenu_vert_{id}()
 }

  function hidemenu_vert_{id}(e){
 if (typeof dropmenuobj_vert_{id}!=\\\"undefined\\\"){
 if (ie4||ns6)
 dropmenuobj_vert_{id}.style.visibility=\\\"hidden\\\"
 hideIframe_vert_{id}()
 }
 }

  function delayhidemenu_vert_{id}(){
 if (ie4||ns6) 
delayhide_vert_{id}=setTimeout(\\\"hidemenu_vert_{id}()\\\",disappeardelay_vert_{id})
 }

  function clearhidemenu_vert_{id}(){
 if (typeof delayhide_vert_{id}!=\\\"undefined\\\")
 clearTimeout(delayhide_vert_{id})
 }

  if (hidemenu_onclick_vert_{id}==\\\"yes\\\")
 document.onclick=hidemenu_vert_{id}

  // Hide IFrame function
 hideIframe_vert_{id}() {
 if (ie5_5){
 var theIframe_vert_{id} = document.getElementById(\\\"dropmenuiframe_vert_{id}\\\") theIframe_vert_{id}.style.display = \\\"none\\\";
 }
 }

  // Unhide IFrame function unhideIframe_vert_{id}() {
 if (ie5_5){
 var theIframe_vert_{id} = document.getElementById(\\\"dropmenuiframe_vert_{id}\\\")
 var theDiv_vert_{id} = document.getElementById(\\\"dropmenudiv_vert_{id}\\\");
 theIframe_vert_{id}.style.width = theDiv_vert_{id}.offsetWidth+\\\'px\\\';
 theIframe_vert_{id}.style.height = theDiv_vert_{id}.offsetHeight+\\\'px\\\';
 theIframe_vert_{id}.style.top = theDiv_vert_{id}.offsetTop+\\\'px\\\';
 theIframe_vert_{id}.style.left = theDiv_vert_{id}.offsetLeft+\\\'px\\\';
 theIframe_vert_{id}.style.display = \\\"block\\\";
 }
 }

 .menuhcss ul li {
  float:left;
   position:relative;
  list-style-type: none;
 z-index:999;
 }

 .menuhcss ul li:hover ul {
  display:block;
   position:absolute;
   top:21px;
   z-index:999;
 }
 }
 }



- copié le code dans ma Feuille de style :
multimenu_dyn_vertical_0.css
=> pas de résultats non plus

le code:
/* Sub links */
 #dropmenudiv_vert_{id}{
   position:absolute;
   margin-left:160px;
   margin-top:-24px;
   background-color: #FFF;
   border: 1px outset black;
 }

  #dropmenudiv_vert_{id} a{
   width: 160px;
   display: block;
   text-indent: 12px;
   border-bottom: 1px solid #000;
   padding: 4px 0;
   background: url(\\\'{xoops_url}/modules/multimenu/templates/include/multimenu_dyn_vertical/arrow_down.gif\\\');
   background-repeat: no-repeat;
   background-position: left 50%;
 }
  #dropmenudiv_vert_{id} a:hover{
   background-color:#CCC;
 }
 .menuhcss ul li {
  float:left;
   position:relative;
  list-style-type: none;
 z-index:999;
 }
 .menuhcss ul li:hover ul {
  display:block;
   position:absolute;
   top:21px;
   z-index:999; }

Posté le : 16/12/2009 13:57
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Re: Probleme z-index Multimenu 1.82
#8
Guest_
Bonsoir,

Je n'ai toujours pas pu progresser a ce niveau la...

Je vais demander de l'aide a un ami dans le courant de la semaine prochaine (avec le reveillon qui arrive je vais pas l'embeter avec ca).

Je posterai ma solution une fois qu'elle aura été réalisée.

A bientôt pour de bonnes nouvelles je l'espere ;) ++

Posté le : 29/12/2009 23:56
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Re: Probleme z-index Multimenu 1.82
#9
Guest_
Bonjour et meilleurs vœux pour 2010 !

Je reviens poster la solution qui m'a permis de faire en sorte que les menus déroulants ne passent plus derrière les images.

Le problème n'est pas à chercher au sein du style CSS du menu mais plutôt du coté de celui du thème appliqué à xoops :

/xoops_folder/themes/theme_folder/css/ pour la plupart des cas.

L'attribut "position: relative;" était donné était donné a la balise "img". Il suffisait de supprimer cette ligne.

Comment l'effacer :

Ouvrir le fichier CSS correspondant au thème (au besoin, installer Firebug dans Firefox et inspecter la page, le chemin du fichier css du thème sera évident à déterminer).

Rechercher "img {" ou "img" et supprimer la ligne "position: relative;"

Personnellement, cela a réglé mon souci, j'espère qu'il en sera de même pour vous autres.

(Merci au copain ;) )

Nico

Posté le : 05/01/2010 12:13
Partager Twitter Partagez cette article sur GG+
Rapport Haut
xpected
Re: Probleme z-index Multimenu 1.82
#10
Régulier
Inscrit: 24/01/2008 09:20
De Moselle
Messages: 169
Je reviens après un long moment d'absence.

J'ai parcouru tous les fichiers de mon theme (M-Flower) et je ne trouve pas de position:relative dans aucun d'eux.

Du coup je reste avec mon souci :D

Posté le : 24/02/2010 16:25
Partager Twitter Partagez cette article sur GG+
Rapport Haut

 Haut   Précédent   Suivant
(1) 2 »



Vous pouvez voir les sujets.
Vous ne pouvez pas débuter de nouveaux sujets.
Vous ne pouvez pas répondre aux contributions.
Vous ne pouvez pas éditer vos contributions.
Vous ne pouvez pas effacez vos contributions.
Vous ne pouvez pas ajouter de nouveaux sondages.
Vous ne pouvez pas voter en sondage.
Vous ne pouvez pas attacher des fichiers à vos contributions.
Vous ne pouvez pas poster sans approbation.
Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

77 Personne(s) en ligne (61 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 77 | Plus ...