Problème de compatibilité HELP!!!

Signaler
Messages postés
9
Date d'inscription
mercredi 19 novembre 2008
Statut
Membre
Dernière intervention
8 mai 2010
-
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
-
Bonjour  j'ai un gros problème...

Alors tout d'abord j'ai un menu parfait qui fonctionne à merveille sous EI puis losque je vais contrôler avec FF ou Opera surprise ça beug Grave!
Que dois je faire pour que mon menu soit compatible...dois-je ajouter un fichier replacer un bout de scripte, ajouter...
J'ai déjà chercher partout je connais les forum de tête.. enfin je trouve pas.. aider  moi si possible:

--> CODE HTLM(index.html) uniquement le menu:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>
        <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
        <meta name="generator" content="Adobe GoLive">
        <title> Bienvenue sur mon site </title>
        <link href="police.css" rel="stylesheet" type="text/css" media="all">

<SCRIPT LANGUAGE="JavaScript">

var couleur_fond = "#525C88";    // Couleur de fond du menu
var couleur_bordure = "#000000"; // Couleur de la bordure
var couleur_police = "#FFFFFF";  // Couleur de la police

var couleur_fond_rollover = "#FFFFFF";   // Couleur du lien surligner par la souris
var couleur_police_rollover = "#525C88"; // Couleur de la police surligner par la souris

var taille_menu_deroule = "150";  // largeur du menu déroulé
var taille_police = "10";         // taille de la police

</SCRIPT>

<SCRIPT LANGUAGE="JavaScript" src="javascript_104.js">
</SCRIPT>
    </head>

   
    Javascript
        <TABLE CLASS="menu_deroulant">
            ----, Exemples</TD>
            ----
Tutorial,
            ----
Astuces,
            ----
Liens,
       

    </TD>

    <TD CLASS="td_furtif" width="100">Php/MySql
                    ----
Exemples,
            ----
Astuces,
            ----
Tutorial,
       

    </TD>

    <TD CLASS="td_furtif" width="100">Forum
                    ----
Nouveau Message,
            ----
Lire Un Message,
            ----
Répondre,
       

    </TD>

        <TD CLASS="td_furtif" width="100">Contact
                    ----
Webmaster,
            ----
Service clientèle,
            ----
Partenariat,
       

    </TD>

        <TD CLASS="td_furtif" width="100">Partenaires
                    ----
Editeur Javascript,
            ----
Swisstools.net,
       

    </TD>
</TABLE>
   
</html>

--> fichier .Js(javascripte_104.js):

function MenuEffets() {
        var cls = event.srcElement.className;        var isClassContainer cls "td_furtif";        var isClassPopup cls "menu_deroulant";        var isClassMenuitem cls "objet_du_menu";

        if (isClassContainer) {
            if (event.type == "mouseover")
                event.srcElement.all(0).style.display = "block";
            else {
                 if (!event.fromElement.contains(event.toElement))
                    event.srcElement.all(0).style.display = "none";
            }
        }

        if (isClassPopup) {
               if (event.type == "mouseout" && !event.fromElement.contains(event.toElement)){
            event.srcElement.style.display = "none";
        }
        }

        if (isClassMenuitem) {
            if (event.type == "mouseover") {
                event.srcElement.style.color = couleur_police_rollover;
                event.srcElement.style.backgroundColor = couleur_fond_rollover;
            }

            else {
                event.srcElement.style.color = couleur_police;
                event.srcElement.style.backgroundColor = couleur_fond;

                if (!event.fromElement.parentElement.parentElement.parentElement.parentElement.contains(event.toElement))
                    event.srcElement.parentElement.parentElement.parentElement.style.display = "none";
            }
        }
    }

    //var maintenant = New Date();
    //var sec = maintenant.getTime();
    document.onmouseover = MenuEffets;
    document.onmouseout = MenuEffets;

    document.write('<STYLE>');
    document.write('.menu {font-family: Verdana, Arial, Helvetica, Tahoma, MS Sans Serif;');
    document.write('          font-size: '+ taille_police +'pt;');
    document.write('          color: '+ couleur_police +';');
    document.write('          cursor: default; }');

    document.write('.menu_deroulant {position: absolute;');
    document.write('        display: none;');
    document.write('        border-collapse: collapse;');
    document.write('        border-style: solid;');
    document.write('        border-width: 1px;');
    document.write('        border-color: '+ couleur_bordure + ';');
    document.write('        background-color: '+ couleur_fond + ';');
    document.write('        width: '+ taille_menu_deroule +'px;');
    document.write('        left: expression(this.parentElement.offsetLeft + 10);');
    document.write('        top: expression((this.parentElement.parentElement.parentElement.parentElement.offsetTop + this.parentElement.parentElement.parentElement.parentElement.offsetHeight-3) );');
    document.write('        font-family: Verdana, Arial, Helvetica, Tahoma, MS Sans Serif;');
    document.write('        font-size: '+taille_police+'pt;');
    document.write('        color: '+ couleur_police +'; }');

    document.write('.objet_du_menu {border-style: solid;');
    document.write('           border-width: 0px;');
    document.write('           border-color: '+ couleur_bordure +';');
    document.write('           cursor: hand; }');

    document.write('.td_furtif {');
    document.write('           border-style: solid;');
    document.write('           border-width: 1px;');
    document.write('           border-color: '+ couleur_bordure +';');
    document.write('           background-color: '+ couleur_fond +';');
    document.write('           cursor: hand; }');
    document.write('</STYLE>');

Voici mon code.. j'espère qu'au moins ici je trouverais une solution..merci d'avance..

8 réponses

Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
bonjour,

regarde la console d'erreurs,

event est indéfini
event.srcElement aussi
         on ne gère pas ça comme ça avec FF, opera....
        
event doit être passé en paramètre
      srcElement c'est exclusif IE

tu trouveras de nombreux exemples sur codesSources pour faire ça.

question :. pourquoi des document.write du css ?

Cordialement

          [mon Site] [M'écrire] Bul         
Messages postés
9
Date d'inscription
mercredi 19 novembre 2008
Statut
Membre
Dernière intervention
8 mai 2010

Comment dois-je faire, je dois ajouter un scripte des variables ou autre? je suis pas très fortiche.. je débute..
Pourrais-tu être plus clair?

Car je n'ai pas fais de .css  la police .css n'est pas en place. (mais celà n'est pas le problème^^)

j'ai préféré mettre tout dans le scripte....mais maintenant que je me rends compte je devrais peut-être utiliser un feuille .css non?
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
tu sais... de nos jours, un tel menu se fait uniquement en css. 
tu devrais plutôt t'orienter vers ce genre de choses.
une ch'tiote recherche t'apportera une foultitude de réponses.
          [mon Site] [M'écrire]  Bul         
Messages postés
9
Date d'inscription
mercredi 19 novembre 2008
Statut
Membre
Dernière intervention
8 mai 2010

Oui mais si je le fait en Css uniquement je px dire adieux à mes menus déroulants... et moi je veux un menu déroulant horizontal compatible.. et ça j'ai trouvé nul part.. c'est toujours soit vertical...mais pas compatible.. voi horizontal et pas compatible.. là est tout mon problème et ça fais déjà plusieurs jours que je trâme là dessus.. je ne sais plus vers quel St- me vouée...:) alors je voudrais bien une solution....(si on veux tombé du ciel) :D

je vais tout de même me renseigné à nouveau...ou alors peut-être que tu saurais comment je pourais rendre un menu vertical..horizontal... telle que j'ai sur mon site..http://electra69.go1.cc (je dois le modifier...)
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
>>je le fait en Css uniquement je px dire adieux à mes menus déroulants..
pas du tout !  ça se fait en css.

avec des ul/li/a et :hover par exemple.... et basta.
si tu en as un vertical, pas dur à modifier pour le faire horizontal
( ou lycée de Versailles )
s'il n'est pas compatible, il suffit généralement de mettre le bon doctype
( je ne parle pas pour les vieilles versions de navigateurs IE6 par exemple, où là
  3 lignes de javascript sont nécessaires. oui, oui, 3 lignes )

          [mon Site] [M'écrire] Bul         

ch'tiot exemple pour débuter,  montrer que c'est "simple"
il faut améliorer, peaufiner...  c'est le moins qu'on puisse dire,
  mais le principe est là, tu sauras sophistiquer pour adapter à ce que tu veux

de très nombreux exemples ( bien plus mieux, partout, y compris
    chez CodesSources !! )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

    <style type="text/css">

        ul.menu        {    list-style-type: none;

                            margin : 0;

                            padding: 0;   

                       }

        ul.menu li     {    float: left;

                            margin: 0;

                            border: 0;   

                       }   

        ul.menu ul     {    position: absolute;

                            display: none;

                            list-style-type: none;

                            margin: 0;

                            padding: 0;

                       }

        ul.menu ul li    

                       {    float: none;

                            padding: 0;   

                       }

        ul.menu li a:link, ul.menu li a:visited

                       {    display: block;

                            color: #800000;

                            background: #FFFFAA;

                            margin:0;

                            padding: 4px 4px;

                            text-decoration: none;   

                       }

        ul.menu li a:hover

                       {    background: #AAAAFF;    }

        ul.menu li:hover > ul

                       {    display: block;    }

        ul.menu a      {    border:1px solid #FFCC99;    }

    </style>

</head>

 

    <li>Un

     

        <li>Niveau 1.1</li>

        <li>Niveau 1.2</li>

     

    </li>

     <li>&nbsp;</li>

    <li>Deux

     

        <li>Niveau 2.1</li>

        <li>Niveau 2.2</li>

        <li>Niveau 2.3</li>

     

    </li>

 

</html>
Messages postés
9
Date d'inscription
mercredi 19 novembre 2008
Statut
Membre
Dernière intervention
8 mai 2010

Merci bien je vais voir ce que je px faire avec ce que tu m'as donné:) je crie à l'aide si j'ai un problème^^

(saches que j'ai pas trouvé sur CodeSource...il y avait toujours un truc qui n'allait pas(compatibilité etc).
Il est aussi possible que je ne soit pas allé sur les bons^^)

* a retrouvé l'espoir *
Messages postés
9
Date d'inscription
mercredi 19 novembre 2008
Statut
Membre
Dernière intervention
8 mai 2010

recoucou j'ai une un dernier petit souci... mon menu reste figé à gauche de ma page.. comment puis-je faire pour qu'il reste dans mon tableau..centré, même si j'étire la page??
:)

Après je serais vraiment au paradis..
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
en css !

c'était un exemple !    tu fais ce que tu veux
et peut-être ne rien mettre d'ailleurs, s'il est dans un tableau.

          [mon Site] [M'écrire] Bul