Problèmes avec les calques css

twin · 19 Mai 2008

Hello à tous,

J'ai posé la question sur un autre forum; mais sans réponse.

Je rencontre un problème de superposition des calques.
J'ai un menu que je met sur www.toilef1.com/forums et j'ai un problème avec Firefox uniquement. Voici un aperçu après le test :
Firefox :

IE :

Dans la page que j'inclu j'ai la chose suivante :

Code:

<style>

#tab 

{

	margin:0;

	top:0;

}

#tab ul 

{

	margin:0;

	padding:0;

	list-style:none;

	float:left;

	text-align:left;

}

#tab li 

{

display:inline;

	float:left;

	margin:0 0 0 0 ;

	padding:0;

}

#tab a 

{

	margin:0;

	padding:0;

	text-decoration:none;

	border:0;

	display:block;

	float:left;

	text-align:left;

}

#tab a span 

{

	display:block;

	padding: 2px 15px 0 15px;

	font-family:Arial, Helvetica, sans-serif;

	font-size:11px;

	color:#000000;

	font-weight:bold;

	line-height:20px;

}

#tab a:hover,#tab li.item_active a 

{

	background-position:right bottom;

	border-color:#000000;

}

#tab a:hover span,#tab li.item_active a span 

{

	background-position:left bottom;

	color:#FFF;

	font-weight:bold;

	font-style:normal;

	text-decoration:none;

	

	

}

.dropmenudiv

{

	position:absolute;

	top:0;

	float:left;

	display:block;

	visibility:hidden;

	border:0 solid #330066;

	background: #FFF;

	color:#FFF;

	opacity: 0.80;

	filter : alpha(opacity=80);

	z-index: 600;

	text-decoration:none;

	padding:0;

}

.dropmenudiv ul 

{

	margin:0;

	padding:0;

	list-style:none;

		text-align:left;



}

.dropmenudiv li 

{

	display:inline;

	margin:0;

	padding:0;

		text-align:left;



}

.dropmenudiv a:link, .dropmenudiv a:visited

{

	width:600px;

	margin:0 0 0 0;

	padding:0;

	display:block;

	border:0 solid #FFFFFF;

	color:#000000;

	font-family:verdana;

	background:#FFFFFF;

	font-style:normal;

	text-decoration:none;

	font-size: 11px;

	line-height:16px;

	font-weight: bold;

		text-align:left;



}

.dropmenudiv a span 

{

	float:left;

	display:block;

	line-height:15px;

	background:#CCC;

	opacity: 0.30;

	padding:0 15px 0 15px;

	font-family:Arial, Helvetica, sans-serif;

	font-size:11;

	color:#000000;

		text-align:left;



	

}

</style>

<script>

//Chrome Drop Down Menu- Author: Dynamic Drive (http://www.dynamicdrive.com)

//Last updated: June 14th, 06' v2.0



var cssdropdown={

disappeardelay: 1500, //set delay in miliseconds before menu disappears onmouseout

disablemenuclick: false, //when user clicks on a menu item with a drop down menu, disable menu item's link?

enableswipe: 1, //enable swipe effect? 1 for yes, 0 for no



//No need to edit beyond here////////////////////////

dropmenuobj: null, ie: document.all, firefox: document.getElementById&&!document.all, swipetimer: undefined, bottomclip:0,



getposOffset:function(what, offsettype){

var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;

var parentEl=what.offsetParent;

while (parentEl!=null){

totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;

parentEl=parentEl.offsetParent;

}

return totaloffset;

},



swipeeffect:function(){

if (this.bottomclip<parseInt(this.dropmenuobj.offsetHeight)){

this.bottomclip+=10+(this.bottomclip/10) //unclip drop down menu visibility gradually

this.dropmenuobj.style.clip="rect(0 auto "+this.bottomclip+"px 0)"

}

else

return

this.swipetimer=setTimeout("cssdropdown.swipeeffect()", 10)

},



showhide:function(obj, e){

if (this.ie || this.firefox)

this.dropmenuobj.style.left=this.dropmenuobj.style.top="-500px"

if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover"){

if (this.enableswipe==1){

if (typeof this.swipetimer!="undefined")

clearTimeout(this.swipetimer)

obj.clip="rect(0 auto 0 0)" //hide menu via clipping

this.bottomclip=0

this.swipeeffect()

}

obj.visibility="visible"

}

else if (e.type=="click")

obj.visibility="hidden"

},



iecompattest:function(){

return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

},



clearbrowseredge:function(obj, whichedge){

var edgeoffset=0

if (whichedge=="rightedge"){

var windowedge=this.ie && !window.opera? this.iecompattest().scrollLeft+this.iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15

this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetWidth

if (windowedge-this.dropmenuobj.x < this.dropmenuobj.contentmeasure)  //move menu to the left?

edgeoffset=this.dropmenuobj.contentmeasure-obj.offsetWidth

}

else{

var topedge=this.ie && !window.opera? this.iecompattest().scrollTop : window.pageYOffset

var windowedge=this.ie && !window.opera? this.iecompattest().scrollTop+this.iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18

this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetHeight

if (windowedge-this.dropmenuobj.y < this.dropmenuobj.contentmeasure){ //move up?

edgeoffset=this.dropmenuobj.contentmeasure+obj.offsetHeight

if ((this.dropmenuobj.y-topedge)<this.dropmenuobj.contentmeasure) //up no good either?

edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge

}

}

return edgeoffset

},



dropit:function(obj, e, dropmenuID){

if (this.dropmenuobj!=null) //hide previous menu

this.dropmenuobj.style.visibility="hidden" //hide menu

this.clearhidemenu()

if (this.ie||this.firefox){

obj.onmouseout=function(){cssdropdown.delayhidemenu()}

obj.onclick=function(){return !cssdropdown.disablemenuclick} //disable main menu item link onclick?

this.dropmenuobj=document.getElementById(dropmenuID)

this.dropmenuobj.onmouseover=function(){cssdropdown.clearhidemenu()}

this.dropmenuobj.onmouseout=function(e){cssdropdown.dynamichide(e)}

this.dropmenuobj.onclick=function(){cssdropdown.delayhidemenu()}

this.showhide(this.dropmenuobj.style, e)

this.dropmenuobj.x=this.getposOffset(obj, "left")

this.dropmenuobj.y=this.getposOffset(obj, "top")

this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"

this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"

}

},



contains_firefox:function(a, b) {

while (b.parentNode)

if ((b = b.parentNode) == a)

return true;

return false;

},



dynamichide:function(e){

var evtobj=window.event? window.event : e

if (this.ie&&!this.dropmenuobj.contains(evtobj.toElement))

this.delayhidemenu()

else if (this.firefox&&e.currentTarget!= evtobj.relatedTarget&& !this.contains_firefox(evtobj.currentTarget, evtobj.relatedTarget))

this.delayhidemenu()

},



delayhidemenu:function(){

this.delayhide=setTimeout("cssdropdown.dropmenuobj.style.visibility='hidden'",this.disappeardelay) //hide menu

},



clearhidemenu:function(){

if (this.delayhide!="undefined")

clearTimeout(this.delayhide)

},



startchrome:function(){

for (var ids=0; ids<arguments.length; ids++){

var menuitems=document.getElementById(arguments ids ).getElementsByTagName("a")

for (var i=0; i<menuitems.length; i++){

if (menuitems.getAttribute("rel")){

var relvalue=menuitems[i].getAttribute("rel")

menuitems[i].onmouseover=function(e){

var event=typeof e!="undefined"? e : window.event

cssdropdown.dropit(this,event,this.getAttribute("rel"))

}

}

}

}

}



}

</script>

<div id="MainMenu">

	<div id="tab">



		<ul>

<li><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu_104')"><span><font color="#468910" style="font-family:verdana">Les derni&egrave;res actus </font></span></a></li>

		</ul>

	</div>

</div>



<div id="dropmenu_104" class="dropmenudiv">

	<ul>

		<li>

 



		<?php 

$sql = "SELECT * FROM spip_articles ORDER BY date DESC,id_article DESC LIMIT 15";

$req= mysql_query($sql) or die('Une Erreur SQL !<br>'.$sql.'<br>'.mysql_error());   

while($data = mysql_fetch_array($req)){

		?>



<a href="http://www.toilef1.com/article.php3?id_article=<?php echo $data['id_article']?>" title="F1 - <?php echo $data['titre']?>">● <?php echo $data['date']?> : <?php echo  utf8_encode($data['titre'])?></a>

<?php } ?>



</li>

	</ul>



</div>

Avez-vous une idée du problème ?

merci d'avance

zeb · 19 Mai 2008

le premier problème c'est que ton code est illisible (saut de lignes et indentation) :wink:

twin · 19 Mai 2008

Oups; je suis désolé. Mais au niveau du script; il ne doit pas y avoir de problème. Je pense que c'est plus du côté du css ou il y a des liens de mon forum qui viennent se mettent en premier plan...et uniquement sous ff :?

zeb · 19 Mai 2008

ensuite ce serait pas un problème d'ordre d'arrivé a l'affichage de ton menu qui pourrait se résoudre avec un z-index sur ton screen le menu semble passer 'en dessous' de certains éléments.

zeb · 19 Mai 2008

twin a dit:
Oups; je suis désolé. Mais au niveau du script; il ne doit pas y avoir de problème. Je pense que c'est plus du côté du css ou il y a des liens de mon forum qui viennent se mettent en premier plan...et uniquement sous ff :?

il est visible pas connecté ton menu ?

twin · 19 Mai 2008

Justement, je pensé que sa venait du z-index; mais j'ai mis :
z-index: 600;
pour être certains qu'il soit au premier plan...et pourtant.

Le menu n'est pas visible; c'est pour çà; pas super évident d'expliquer et de recevoir de l'aide

mais il est difficile de mettre en ligne quelque chose qui bug. Le forum est à l'adresse suivante : www.toilef1.com/forums

zeb · 19 Mai 2008

twin a dit:
Justement, je pensé que sa venait du z-index; mais j'ai mis :
z-index: 600;
pour être certains qu'il soit au premier plan...et pourtant.

as tu défini le z-index des éléments qui le masque ? car c'est relativement entre eux que cela fonctionne.

Tips and Notes

Tip: Elements can have negative stack orders.

Note: zIndex only works on elements that have been positioned, like position:absolute;

voir http://www.w3schools.com/htmldom/prop_style_zindex.asp

bproductiv · 20 Mai 2008

essaye avec un display none

twin · 20 Mai 2008

En fait, il faut que j'applique le z-index sur les liens qui viennent en premier plan.
Et pour le display none; que faut-il faire et où faut-il l'appliquer ?

e-kiwi · 20 Mai 2008

et sous ton calque, un <hr style='clear:left'> règle le problème ?

nickargall · 20 Mai 2008

+1 avec E kiwi, on oublie souvent ce bon clear:left, après utilisation de Float:left

twin · 20 Mai 2008

Sous mon calque, c'est à dire ?
Dans quelle partie css ? Le forum où le code css mis dans mon premier poste ?

Désolé j'ai encore du mal avec le css :?

nickargall · 20 Mai 2008

Oui mais non en fait, l'attribut Clear left ne t'aidera pas en l'occurence. Cet attribut est fait, en gros, pour faire un "retour à la ligne" sous un calque qui serait en "float:left";

zeb · 22 Mai 2008

twin a dit:
En fait, il faut que j'applique le z-index sur les liens qui viennent en premier plan.

OUI il me semble et aussi sur l'élément censé se 'superposer' dessus.