| |
 Savez-vous bien utiliser les outils de mesure d'audience ?
Effectuez-vous un calcul de ROI (Retour sur investissement) pour savoir comment améliorer vos campagnes emarketing ?
Savez-vous utiliser les bons outils pour booster votre taux de transformation ?
La formation Web Analytics de Ranking Metrics, présentée par un expert reconnu officiellement par Google Analytics, vous apportera les réponses à toutes vos questions !
===> Informations et inscriptions.
|
Voir le sujet précédent :: Voir le sujet suivant
|
| Auteur |
Message |
| |
|
twin
WRInaute passionné
Inscrit le: 23 Fév 2004
Messages: 930
Localisation: La Rochelle
|
 Posté le : Lun Mai 19, 2008 20:47 Sujet du message: Problèmes avec les calques css |
|
|
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è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
WRInaute accro
Inscrit le: 05 Déc 2004
Messages: 1002
|
| Posté le : Lun Mai 19, 2008 21:03 Sujet du message: Problèmes avec les calques css |
|
|
| le premier problème c'est que ton code est illisible (saut de lignes et indentation) |
|
| |
|
|
twin
WRInaute passionné
Inscrit le: 23 Fév 2004
Messages: 930
Localisation: La Rochelle
|
| Posté le : Lun Mai 19, 2008 21:07 Sujet du message: Problèmes avec les calques css |
|
|
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
WRInaute accro
Inscrit le: 05 Déc 2004
Messages: 1002
|
| Posté le : Lun Mai 19, 2008 21:07 Sujet du message: Problèmes avec les calques css |
|
|
| 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
WRInaute accro
Inscrit le: 05 Déc 2004
Messages: 1002
|
| Posté le : Lun Mai 19, 2008 21:11 Sujet du message: Problèmes avec les calques css |
|
|
| twin a écrit: |
| 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
WRInaute passionné
Inscrit le: 23 Fév 2004
Messages: 930
Localisation: La Rochelle
|
| Posté le : Lun Mai 19, 2008 21:17 Sujet du message: Problèmes avec les calques css |
|
|
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
WRInaute accro
Inscrit le: 05 Déc 2004
Messages: 1002
|
| Posté le : Lun Mai 19, 2008 21:52 Sujet du message: Problèmes avec les calques css |
|
|
| twin a écrit: |
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.
| Citation: |
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
WRInaute accro
Inscrit le: 27 Déc 2004
Messages: 2362
Localisation: La roche s/ yon
|
| Posté le : Mar Mai 20, 2008 7:03 Sujet du message: Problèmes avec les calques css |
|
|
| essaye avec un display none |
|
| |
|
|
twin
WRInaute passionné
Inscrit le: 23 Fév 2004
Messages: 930
Localisation: La Rochelle
|
| Posté le : Mar Mai 20, 2008 10:22 Sujet du message: Problèmes avec les calques css |
|
|
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
Modérateur
Inscrit le: 23 Déc 2003
Messages: 12577
Localisation: Toulouse
|
| Posté le : Mar Mai 20, 2008 10:36 Sujet du message: Problèmes avec les calques css |
|
|
| et sous ton calque, un <hr style='clear:left'> règle le problème ? |
|
| |
|
|
nickargall
WRInaute accro
Inscrit le: 13 Juin 2005
Messages: 3866
Localisation: Exilé au Groland à cause de Joe Dalton
|
| Posté le : Mar Mai 20, 2008 12:02 Sujet du message: Problèmes avec les calques css |
|
|
| +1 avec E kiwi, on oublie souvent ce bon clear:left, après utilisation de Float:left |
|
| |
|
|
twin
WRInaute passionné
Inscrit le: 23 Fév 2004
Messages: 930
Localisation: La Rochelle
|
| Posté le : Mar Mai 20, 2008 12:31 Sujet du message: Problèmes avec les calques css |
|
|
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
WRInaute accro
Inscrit le: 13 Juin 2005
Messages: 3866
Localisation: Exilé au Groland à cause de Joe Dalton
|
| Posté le : Mar Mai 20, 2008 12:44 Sujet du message: Problèmes avec les calques css |
|
|
| 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
WRInaute accro
Inscrit le: 05 Déc 2004
Messages: 1002
|
| Posté le : Jeu Mai 22, 2008 11:11 Sujet du message: Problèmes avec les calques css |
|
|
| twin a écrit: |
| 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. |
|
| |
|
|
| |
|
|
|
|
Autres sujets de discussion :
|
|
