Sujet : Petits blèmes sur Firefox avec menus vertical et horizontal

Bonjour à tous,

sur le site d'une assoc germano-yougoslave pour laquelle je suis webmaster, lien ici, j'ai installé et arrangé deux menus, un vertical et un horizontal, tous les deux javascript+css très chouettes et qui fonctionnent sans problème sur MIE. Sur Mozilla/Firefox ils fonctionnent aussi mais déconnent un peu : Les sous-menus du menu horizontal se chevauchent parfois, alors qu'il devrait n'apparaître qu'un seul à la fois. Et en ce qui concerne le menu vertical, où il n'y a heureusement  qu'un seul sous-menu ("Aktuelles"), celui-ci déconne aussi sur Firefox. C'est un peu difficile à expliquer comme ça mais le plus simple est de comparer entre MIE et Firefox.

A tout hasard, et dans l'espoir que certains viendront à mon secour  , ci-après les codes de l'un et de l'autre (pour chacun une page *html, car le site est encore sur frames  )

Code du menu horizontal ( je pense que le javascript du menu horizontal est peut-être en cause ) :

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Suedost_Navioben</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
/* CSS issu des tutoriels www.alsacreations.com/articles */
body {
    margin: 10px;
    padding: 0px;
    background-color: #ffcc66;
    }

dt, dl, dd, ul, li {
    list-style-type: none;
    margin: 0 10px 0 0;
    }

.menu {
    position : absolute;
    left: 0px;
    top: 30px;
    width: 650px;
    }

.menu dl {
    float: left;
    }
.menu li {
    display: inline;
    list-style: none;
    }

.menu a {
    text-decoration: none;
    color: #007cc3;
    background: transparent url(../Webbilder/Bilder/bluebullet.gif) left center no-repeat;
    padding-left: 10px;
    font: bold 0.9em Arial, "Times New Roman", Times, serif;
    }
    
#smenu1, #smenu2, #smenu3, #smenu4 {
    display: none;
    font: bold 0.75em Georgia, Verdana, Arial, Times, serif;
    height: 40px;
    padding-top:5px;
    }
    
#smenu1 { 
position: absolute;
left: 0px;
width: 700px;
}

#smenu2 {
position: absolute;
left: 0px;
width: 700px;
}

#smenu3{ 
position: absolute;
left: 120px;
width: 700px;
}

#smenu4 {
position: absolute;
left: 310px;
width: 400px;
}

.frieden2 {left: 0px; font: bold 0.9em Arial, "Times New Roman", Times, serif; font-style: normal; color: #FFFFCC; letter-spacing: 3px}

html>body li a { width: 10em; }


a:hover
{
    background: transparent url(../Webbilder/Bilder/orangebullet.gif) left center no-repeat;
    color: #ffffcc;
    padding-left: 10px;
}

a:active
{
    background: transparent url(../Webbilder/Bilder/redbullet.gif) left center no-repeat;
    color: #f30;
    padding-left: 7px;
}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
  function montre(id) {
      if (document.getElementById) {
          document.getElementById(id).style.display="inline";
        } else if (document.all) {
          document.all[id].style.display="inline";
        } else if (document.layers) {
          document.layers[id].display="inline";
        } } 

 function cache(id) {
      if (document.getElementById) {
          document.getElementById(id).style.display="none";
        } else if (document.all) {
          document.all[id].style.display="none";
        } else if (document.layers) {
          document.layers[id].display="none";
        } } 
//-->
</script>
</head>
<body>
<div id="frieden" style="position:absolute; left:5px; top:12px; width:507px; height:15px; z-index:3;"><span class="frieden2">Friedensarbeit 
  durch</span></div>
<div class="menu" onclick="this.style.color='red'">
    <dl>
        <dt onmouseover="montre('smenu1');" onmouseout="cache('smenu1');"><a href="#"> &nbsp;Kultur</a></dt>
            <dd id="smenu1"  onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
                <ul>
                    <li><a href="../kultur/kulturallg.htm" target="Inhalt"> &nbsp;allgemein</a></li>
                    <li><a href="../kultur/ausstellungen.htm" target="Inhalt"> &nbsp;Kunstaustellungen</a></li>
                    <li><a href="../kultur/musik.htm" target="Inhalt"> &nbsp;Musik</a></li>
                    <li><a href="../kultur/literatur.htm" target="Inhalt"> &nbsp;Literatur</a></li>

                </ul>
            </dd>
    </dl>
    
    <dl>            
        <dt onmouseover="montre('smenu2');" onmouseout="cache('smenu2');"><a href="#"> &nbsp;Praktische Hilfen</a></dt>
            <dd id="smenu2"  onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
                <ul>
                    <li><a href="../praktischeHilfen/sozberatung.htm" target="Inhalt"> &nbsp;Sozialberatung</a></li>
                    <li><a href="../praktischeHilfen/ther_hilfe.htm" target="Inhalt"> &nbsp;Therapeutische Hilfe</a></li>
                    <li><a href="../praktischeHilfen/bildungsberatung.htm" target="Inhalt"> &nbsp;Ausbildungberatung</a></li>
                    <li><a href="../praktischeHilfen/sprachkurse.htm" target="Inhalt"> &nbsp;Sprachkurse</a></li>
                    <li><a href="../praktischeHilfen/roma.htm" target="Inhalt"> &nbsp;Roma-Programme</a></li>
                </ul>
            </dd>
    </dl>
    
    <dl>    
        <dt onmouseover="montre('smenu3');" onmouseout="cache('smenu3');"><a href="#"> &nbsp;Projekte in S&uuml;dosteuropa</a></dt>
            <dd id="smenu3"  onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
                <ul>
                    <li><a href="../soe_projekte/bosnien_5.htm" target="Inhalt"> &nbsp;5x in Bosnien</a></li>
                    <li><a href="../soe_projekte/schulpartner.htm" target="Inhalt"> &nbsp;Schulpartnerschaften</a></li>
                    <li><a href="../soe_projekte/inselpartner.htm" target="Inhalt"> &nbsp;Inselpartnerschaften</a></li>
                    <li><a href="../soe_projekte/patenschaften.htm" target="Inhalt"> &nbsp;Patenschaften</a></li>
                </ul>
            </dd>
    </dl>
    
    <dl>    
        <dt onmouseover="montre('smenu4');" onmouseout="cache('smenu4');"><a href="#"> &nbsp;Vernetzung</a></dt>
            <dd id="smenu4"  onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
                <ul>
                    <li><a href="../vernetzung/vernetzallg.htm" target="Inhalt"> &nbsp;allgemein</a></li>
                    <li><a href="../vernetzung/theraustausch.htm" target="Inhalt"> &nbsp;Therapeutenaustausch</a></li>
                    <li><a href="../vernetzung/reisen.htm" target="Inhalt"> &nbsp;Reisen</a></li>
                </ul>
            </dd>
    </dl>
</div>
</body>
</html>

Code du menu vertical ( là, c'est le sous-menu déroulant en rollover sur Aktuelles qui déconne franchement quand on est passé en rollover une fois dessus ).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> 
    <title>Suedost_Navilinks</title> 
    <!--<style type="text/css" media="screen">@import url(floatutorial.css);</style>--> 
    <!--<link rel="SHORTCUT ICON" href="/floatutorial/floatutorial.ico">--> 
    <!--<link rel="stylesheet" href="../stylesheets/print.css" media="print">--> 
    <style type="text/css" media="screen"> 
body {background-color:#ffcc66; /*background-color:#FF9933*/} 
#logo { 
    float: left; 
    position: absolute; 
    top: 0.8em; 
    width: 81px; 
    height: 110px; 
} 
#navcontainer 
{ 
    float: left; 
    position: absolute; 
    top: 17.5em; 
    width: 10em; 
    height: 100%; 
    padding: 0 0 1em 0; 
    margin-bottom: 1em; 
    font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; 
    background-color: #ffcc66;
    font-size: 0.6em;
    color:#007cc3; 
    } 

#navcontainer ul 
{ 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    border: none; 
} 

#navcontainer li 
{ 
    border-bottom: 1px solid #ffcc66; /*couleur bordure entre items*/ 
    margin: 0; 
} 

#navcontainer li a 
{ 
    display: block; 
    padding: 5px 5px 5px 0.5em; 
    border-left: 10px solid #007cc3; /*9D9A97 -- couleur rectangle gauche*/ 
    border-right: 10px solid #ffcc66; /*couleur rectangle droite*/                                background-color:#ffcc66; /*ff9933 -- couleur centrale normale*/ 
    color: #007cc3; /*couleur texte centrale normale*/ 
    text-decoration: none; 
    width: 100%; 
 } 

html>body #navcontainer li a { width: 10em; /*width: auto;*/} 

#navcontainer li a:hover 
{ 
    border-left: 10px solid #508fc4; /*couleur rectangle gauche en rollover*/ 
    border-right: 10px solid #FABB61; /*FABB61 -- couleur rectangle droite enrollover*/ 
    background-color:#F79A3C; /*couleur centrale rollover*/ 
    color: #ffffcc; 
} 

#navcontainer li a:active 
{ 
    border-left: 10px solid #508fc4; /*couleur rectangle gauche en rollover*/ 
    color: #f30; 
} 

/*Premier item avec carré d'autre couleur: Home*/ 
#navlist a#current { 
    border-color: #5bd #ffcc66 #068 #508fc4; 
} 
#navlist a#current:hover 
{ 
    background: #28b; 
    border-color: #069 #6cf #5bd #f30; 
    border-right: 10px solid #3399cc; 
} 

/*Deuxième item avec carré d'autre couleur: Aktuelles*/ 
#navlist a#current2 { 
    border-color: #5bd #ffcc66 #068 #007cc3; 
} 
#navlist a#current2:hover 
{ 
    background: #28b; 
    border-color: #069 #6cf #5bd #ffffcc; 
    border-right: 10px solid #3399cc;
} 
#navlist a#current2:active 
{ 
    color: #ffffcc; 
} 


/*Troisième item avec carré d'autre couleur: Aktuelles*/ 
#navlist a#current3 { 
    border-color: #5bd #ffcc66 #068 #F79A3C; 
    background-color:#FABB61; 
} 
#navlist li a#current3:hover 
{ 
    border-left: 10px solid #508fc4; /*couleur rectangle gauche en rollover*/ 
    border-right: 10px solid #FABB61; /*FABB61 -- couleur rectangle droite enrollover*/ 
    background: #F79A3C;
} 

/*MENU DÉROULANT menu alsacreation deroulant_vertical_1.htm*/ 
.menu { 
    clear: both;  /* pour obliger le retour à la ligne des menus */ 
    margin-top: 5px; 
    width: 100%; 
    height: 20px; 
    background-color: #ffcc66; 
} 

#smenu1, #smenu2, #smenu3, #smenu4 { 
    float: left; 
    display: none;  /* par défaut, les sous-menus ne seront pas affichés */ 
    font-size: 10px; 
    padding: 5px 0 5px 0; 
    width: 100%; 
    background-color: #ffcc66; 
} 
#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a { 
    font-weight: normal; 
    border-top: 0 none; 
} 
</style> 
<script language="JavaScript" type="text/JavaScript"> 
<!--MENU DEROULANT> 
    function montre(id) { 
      if (document.getElementById) { 
          document.getElementById(id).style.display="block"; 
        } else if (document.all) { 
          document.all[id].style.display="block"; 
        } else if (document.layers) { 
          document.layers[id].display="block"; 
        } } 

function cache(id) { 
      if (document.getElementById) { 
          document.getElementById(id).style.display="none"; 
        } else if (document.all) { 
          document.all[id].style.display="none"; 
        } else if (document.layers) { 
          document.layers[id].display="none"; 
        } } 
</script> 

</head> 
<body> 
<div id="logo"><a href="../index.htm" target="_parent"><img src="../Webbilder/logosoleil.gif" width="81" height="110" style="border: 0px;"></a></div> 
<div id="navcontainer"> 
<ul id="navlist"> 
<li id="active"><a href="inhalt.htm" id="current" target="Inhalt">Home</a></li> 
<li><a href="../wirueberuns/wirueberuns.htm" target="Inhalt">Wir &uuml;ber uns </a></li> 
<li class="menu" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');"><a href="#" id="current2" style="cursor: crosshair;">Aktuelles</a> 
        <div id="smenu4"  onmouseover="montre('smenu4');" onmouseout="cache('smenu4');"> 
            <ul> 
                <li><a href="../aktuelles/veranstaltungen.htm" id="current3" target="Inhalt">Veranstaltungen</a></li> 
                <li><a href="../aktuelles/gruppen.htm" id="current3" target="Inhalt">Regelm.Gruppen</a></li> 
            </ul> 
        </div> 
</li> 
<li><a href="../photos/index.php" target="Inhalt">Fotogalerien</a></li> 
<li><a href="../spenden/spenden.htm" target="Inhalt">Spenden und Mitgliedschaft </a></li> 
<li><a href="../kontakt/kontakt.htm" target="Inhalt">Kontakt</a></li> 
<li><a href="../downloads/downloads.htm" target="Inhalt">Downloads</a></li> 
<li><a href="../links/links.htm" target="Inhalt">Links</a></li> 
<li><a href="../sitemap/sitemap.htm" target="Inhalt">&Uuml;bersicht</a></li> 
</ul> 
</div> 
</body> 
</html>

...En fait, comme on peut le remarquer, le problème vient peut-être du fait que j'ai mélangé deux codes (beaucoup de css et un zest de javascript) ...et qu'il y a quelque-chose que Firefox ne peut pas digérer, puisqu'il déconne quand on passe et repasse sur les sous-menus avec la souris.

Mon rêve c'est que ces deux menus très simples finalement fonctionnent parfaitement sur tous les navigateurs : En plus de MIE, au moins Firefox, Mozilla, Opera, Safari et MIE-Mac ...Ce rêve peut-il devenir réalité ?

Voilà, j'espère que quelqu'un pourra m'aider à trouver la faille  Et puis, j'aimerai bien savoir quelle tronche ont mes deux menus sur Mac ... MERCI!!

Re : Petits blèmes sur Firefox avec menus vertical et horizontal

Je pense que tu as oublié de mettre le lien dans ton précédent message. Pourrais-tu nous le mettre pour que l'on puisse aller jeter un coup d'oeil ? Merci wink

-------------------------------
"Keyboard not detected, press a key to continue..."

WWW

3

Re : Petits blèmes sur Firefox avec menus vertical et horizontal

Oups, suis-je bête : http://www.suedost-ev.de ...clic sur "Start" et on arrive sur la Homepage avec menu horizontal en haut et menu vertical à gauche ( sous-menu sur "Aktuelles").

Re : Petits blèmes sur Firefox avec menus vertical et horizontal

Oki, j'ai jeté un rapide coup d'oeil et effectivement sous FireFox ca cafouille un peu...
J'ai testé sous Safari, ca passe nickel.

Je n'aurais pas le tps de regarder ce soir malheureusement (je vais à un concert wink) mais il me semble que tout ca doit pouvoir être fait sans Javascript (je ne suis pas convaincu que mélanger CSS et JavaScript soit la meilleure solution car selon les navigateurs, ca peut donner des surprises).

Ce que je peux te dire très rapidement c'est peut être d'essayer de fixer la largeur de ton menu vertical (car il s'agit d'un décalage à droite du reste du menu quand le sous menu apparaît) ou alors de tenter de mettre un clear: both; dans le sous-menu pour forcer le reste à descendre dessous...(je n'ai pas eu le tps de regarder ton code donc je ne sais pas ce que tu as fait)

Je te réponds avec plus de précision demain, sauf si quelqu'un d'autre passe avant moi wink

Bonne soirée.

-------------------------------
"Keyboard not detected, press a key to continue..."

WWW

5

Re : Petits blèmes sur Firefox avec menus vertical et horizontal

Nerci SamRay1024 pour la réponse! Déjà super content de savoir que ça marche sur Safari (Mac??). J'ai essayé le clear: both; et de mettre une width dans les #smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, mias ça n'a rien changé. J'attend la suite avec impatience

Re : Petits blèmes sur Firefox avec menus vertical et horizontal

Je t'ai peut-être dit une bêtise hier. Ca n'est pas dans le sous-menu qu'il faut mettre le clear: both; (puisque lui est bien placé) mais dans le menu lui même. Essaye pour voir.

(Sinon oui Safari = Mac wink)

-------------------------------
"Keyboard not detected, press a key to continue..."

WWW

Re : Petits blèmes sur Firefox avec menus vertical et horizontal

Je viens de regarder. J'ai un début de solution. J'ai juste rajouté ceci dans ton style CSS :

#navlist li { clear: both; }

Ca ne résout le problème qu'à moitié car ca fait bien descendre le reste du menu...sauf qu'il ne remonte pas quand on quitte le sous-menu big_smile !

-------------------------------
"Keyboard not detected, press a key to continue..."

WWW

8

Re : Petits blèmes sur Firefox avec menus vertical et horizontal

J'ai essayé de le mettre à plusieurs endroits mais ça ne change pas grand chose, sauf peut-être quand le clear:both; est mis dans #navcontainer li, où là enfin le sous-menu disparaît quand on passe ailleurs en rollover et réapparaît quand on repasse dessus. C'est quand même une amélioration, mais le problème reste fondamentalement le même : après rollover sur le sous-menu de "Aktuelles", le menu ne reprend pas sa forme initiale, il reste toujours un espace entre le point de menu "Aktuelles" et celui d'après ("Fotgalerien"), ce qui n'est pas du tout l'effet escompté et a pour conséquence de faire disparître le dernier point de menu tout en bas dans le frame du bas.

9

Re : Petits blèmes sur Firefox avec menus vertical et horizontal

Sinon aussi, n'y aurait-il pas une légère incompatibilité du javascript avec Firefox?

10

Re : Petits blèmes sur Firefox avec menus vertical et horizontal

ALors, je viens d'essayer #navlist li { clear: both; } dans le css : oui, il y a vraiment une grosse amélioration comme tu dis et, si, des fois il remonte, mais pas tout le temps !?

Re : Petits blèmes sur Firefox avec menus vertical et horizontal

Il se peut qu'il y est des incompatibilités de Javascript avec FireFox mais d'après ce que j'ai vu de ton code Javascript, je ne pense pas que ca soit à ce niveau là.

Ceci dit, je ne suis vraiment pas un expert en Javascript et sur ce terrain, je ne m'avance pas trop.

Et donc tu dis qu'il remonte ? Je ne l'ai jamais vu remonter moi...

-------------------------------
"Keyboard not detected, press a key to continue..."

WWW

12

Re : Petits blèmes sur Firefox avec menus vertical et horizontal

Si, quand tu es un webmaster désespéré que ton menu ne marche pas tip-top sur Firefox, alors tu passes et repasses la souris sur le menu, et là, oui, ça lui arrive de remonter ...et c'est déjà un progrès ! Merci !! Mais évidemment le mystère du problème sur Firefox reste entier, de même en ce qui concerne le menu du haut...

Re : Petits blèmes sur Firefox avec menus vertical et horizontal

Je suis désolé, je n'ai pas bcp le tps de regarder, surtout que je sais qu'un problème de ce genre peut prendre bcp de tps wink (je compatie donc...).

En fait je n'avais pas encore vu le pb du menu horizontal ! Et effectivement y'a un petit souci. Enfin ça n'en est pas vraiment un. C'est juste qu'il manque des informations pour qu'un sous-menu s'efface lorsque tu passes sur un autre sans avoir déclenché le onmouseout du sous-menu sur lequel tu te trouves.

Je pense que pour ce problème, tu devrais pouvoir le corriger en complétant tes fonctions javascript. Il faut prendre comme postulat : "je cache tous les autres sous-menus quand l'affichage de l'un d'entre eux est demandé". Comme cela tu seras sûr que tu n'en affiches qu'un seul. Le jeu consiste donc à ne plus utiliser l'attribut onmouseout et de tout faire sur le onmouseover d'un item. Ca grossit un peu ta fonction javascript mais ça aura le mérite d'être sans faille wink.

J'essaye de regarder plus en détail ce soir à tête reposée pour le menu horizontal (je ne te garantie rien sad )

-------------------------------
"Keyboard not detected, press a key to continue..."

WWW

Re : Petits blèmes sur Firefox avec menus vertical et horizontal

Alors, je viens de m'attarder sur le menu horizontal. Je me suis un peu avancé en disant qu'il ne fallait plus utiliser l'attribut onmouseout big_smile. Donc côté HTML, tu ne changes rien. Les seules modifications concernent le javascript que voici :

<script language="javascript" type="text/javascript">
<!--

    function inline(id)
    {
        
        if (document.getElementById)    document.getElementById(id).style.display="inline";
        else if (document.all)            document.all[id].style.display="inline";
        else if (document.layers)        document.layers[id].display="inline";
    
    }
    
    function cache(id) {
    
        if (document.getElementById)    document.getElementById(id).style.display="none";
        else if (document.all)            document.all[id].style.display="none";
        else if (document.layers)        document.layers[id].display="none";
        
    }
    
    function montre(id)
    {
    
        for( i = 1 ; i < 5 ; i++ )
        {
        
            if( document.getElementById('smenu' + i).id.substring( 5 ) == id.substring( 5 ) )
                inline(id);
            else
                cache( 'smenu' + i );
            
        }
        
    }
    
//-->
</script>

Explications :

J'ai donc renommé ta fonction montre() initiale en inline(), ta fonction cache() n'a pas changé. J'ai ajouté une fonction, montre() qui remplace la précédente. Celle-ci fait une boucle sur le nombre d'items présents dans le menu (si tu ajoutes des items, il faut donc changer la limite d'itérationq de ta boucle ; peut-être peut-on connaître dynamiquement le nombre d'items présents mais ça, je te laisse le soin de l'adapter wink ) Pour chaque itération, on regarde si l'indice de l'item (par rapport à 'smenu') est celui dont on demande l'affichage. Si oui on l'affiche avec inline() sinon on le cache.

Ceci permet donc de cacher tous les items tout le temps sauf celui demandé. Ca n'est pas une fonction générique car elle se base sur le nom que tu donnes à tes items ('smenu') donc il ne faut pas que tu changes leur nom wink.

-------------------------------
"Keyboard not detected, press a key to continue..."

WWW

Re : Petits blèmes sur Firefox avec menus vertical et horizontal

Pour le menu horizontal pourquoi ne pas avoir garder l'exemple d'alsacreations ??

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Suedost_Navioben</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
/* CSS issu des tutoriels www.alsacreations.com/articles */
body {
    margin: 10px;
    padding: 0px;
    background-color: #ffcc66;
    }

dt, dl, dd, ul, li {
    list-style-type: none;
    margin: 0 10px 0 0;
    }

.menu {
    position : absolute;
    left: 0px;
    top: 30px;
    width: 650px;
    }

.menu dl {
    float: left;
    }
.menu li {
    display: inline;
    list-style: none;
    }

.menu a {
    text-decoration: none;
    color: #007cc3;
    background: transparent url(../Webbilder/Bilder/bluebullet.gif) left center no-repeat;
    padding-left: 10px;
    font: bold 0.9em Arial, "Times New Roman", Times, serif;
    }
    
#smenu1, #smenu2, #smenu3, #smenu4 {
    display: none;
    font: bold 0.75em Georgia, Verdana, Arial, Times, serif;
    height: 40px;
    padding-top:5px;
    }
    
#smenu1 { 
position: absolute;
left: 0px;
width: 700px;
}

#smenu2 {
position: absolute;
left: 0px;
width: 700px;
}

#smenu3{ 
position: absolute;
left: 120px;
width: 700px;
}

#smenu4 {
position: absolute;
left: 310px;
width: 400px;
}

.frieden2 {left: 0px; font: bold 0.9em Arial, "Times New Roman", Times, serif; font-style: normal; color: #FFFFCC; letter-spacing: 3px}

html>body li a { width: 10em; }


a:hover
{
    background: transparent url(../Webbilder/Bilder/orangebullet.gif) left center no-repeat;
    color: #ffffcc;
    padding-left: 10px;
}

a:active
{
    background: transparent url(../Webbilder/Bilder/redbullet.gif) left center no-repeat;
    color: #f30;
    padding-left: 7px;
}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
    for (var i = 1; i<=10; i++) {
        if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
    }
if (d) {d.style.display='block';}
}
//-->
</script>
</head>
<body>
<div id="frieden" style="position:absolute; left:5px; top:12px; width:507px; height:15px; z-index:3;"><span class="frieden2">Friedensarbeit 
  durch</span></div>
<div class="menu" onclick="this.style.color='red'">
    <dl>
        <dt onmouseover="montre('smenu1');"><a href="#"> &nbsp;Kultur</a></dt>
            <dd id="smenu1"  onmouseover="montre('smenu1');">
                <ul>
                    <li><a href="../kultur/kulturallg.htm" target="Inhalt"> &nbsp;allgemein</a></li>
                    <li><a href="../kultur/ausstellungen.htm" target="Inhalt"> &nbsp;Kunstaustellungen</a></li>
                    <li><a href="../kultur/musik.htm" target="Inhalt"> &nbsp;Musik</a></li>
                    <li><a href="../kultur/literatur.htm" target="Inhalt"> &nbsp;Literatur</a></li>

                </ul>
            </dd>
    </dl>
    
    <dl>            
        <dt onmouseover="montre('smenu2');"><a href="#"> &nbsp;Praktische Hilfen</a></dt>
            <dd id="smenu2"  onmouseover="montre('smenu2');">
                <ul>
                    <li><a href="../praktischeHilfen/sozberatung.htm" target="Inhalt"> &nbsp;Sozialberatung</a></li>
                    <li><a href="../praktischeHilfen/ther_hilfe.htm" target="Inhalt"> &nbsp;Therapeutische Hilfe</a></li>
                    <li><a href="../praktischeHilfen/bildungsberatung.htm" target="Inhalt"> &nbsp;Ausbildungberatung</a></li>
                    <li><a href="../praktischeHilfen/sprachkurse.htm" target="Inhalt"> &nbsp;Sprachkurse</a></li>
                    <li><a href="../praktischeHilfen/roma.htm" target="Inhalt"> &nbsp;Roma-Programme</a></li>
                </ul>
            </dd>
    </dl>
    
    <dl>    
        <dt onmouseover="montre('smenu3');"><a href="#"> &nbsp;Projekte in S&uuml;dosteuropa</a></dt>
            <dd id="smenu3"  onmouseover="montre('smenu3');">
                <ul>
                    <li><a href="../soe_projekte/bosnien_5.htm" target="Inhalt"> &nbsp;5x in Bosnien</a></li>
                    <li><a href="../soe_projekte/schulpartner.htm" target="Inhalt"> &nbsp;Schulpartnerschaften</a></li>
                    <li><a href="../soe_projekte/inselpartner.htm" target="Inhalt"> &nbsp;Inselpartnerschaften</a></li>
                    <li><a href="../soe_projekte/patenschaften.htm" target="Inhalt"> &nbsp;Patenschaften</a></li>
                </ul>
            </dd>
    </dl>
    
    <dl>    
        <dt onmouseover="montre('smenu4');"><a href="#"> &nbsp;Vernetzung</a></dt>
            <dd id="smenu4"  onmouseover="montre('smenu4');">
                <ul>
                    <li><a href="../vernetzung/vernetzallg.htm" target="Inhalt"> &nbsp;allgemein</a></li>
                    <li><a href="../vernetzung/theraustausch.htm" target="Inhalt"> &nbsp;Therapeutenaustausch</a></li>
                    <li><a href="../vernetzung/reisen.htm" target="Inhalt"> &nbsp;Reisen</a></li>
                </ul>
            </dd>
    </dl>
</div>
</body>
</html>

Testé sur IE6 et FireFox 1.0.4

Je regarde le reste .... wink

#Edit : grillé par Samy big_smile
Mais je n'ai qu'une seule fonction moi ! Et donc plus de cache();

----------------------------------------------------------------------------------------------------------------------------
On peut être intelligent toute sa vie et stupide un instant.

WWW

Re : Petits blèmes sur Firefox avec menus vertical et horizontal

Lol smile Certe c'est plus optimisé, mais je suis pas du tout un as du javascript !

Sinon je suis sur le menu vertical et je ne vois pas du tout...

-------------------------------
"Keyboard not detected, press a key to continue..."

WWW

Re : Petits blèmes sur Firefox avec menus vertical et horizontal

Moi aussi et j'ai un peu plus de mal wink

Sinon, dans un premier temps meh, tu ne dois utiliser les id que lorsque qu'il n'y a qu'un seul élément comme ça sur la page. Sinon il faut utiliser class

----------------------------------------------------------------------------------------------------------------------------
On peut être intelligent toute sa vie et stupide un instant.

WWW

Re : Petits blèmes sur Firefox avec menus vertical et horizontal

J'ai un code qui fonctionne mais sans le style car l'erreur vient de là !!

Voici le code simplifié :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> 
    <title>Suedost_Navilinks</title> 
    <style type="text/css" media="screen"> 
/*MENU DÉROULANT menu alsacreation deroulant_vertical_1.htm*/ 
.menu { 
    clear: both;  /* pour obliger le retour à la ligne des menus */ 
    margin-top: 5px; 
    width: 100%; 
} 

#smenu1, #smenu2, #smenu3, #smenu4 { 
    display: none;  /* par défaut, les sous-menus ne seront pas affichés */ 
    width: 100%; 
} 
</style> 
<script language="JavaScript" type="text/JavaScript"> 
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
    for (var i = 1; i<=10; i++) {
        if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
    }
if (d) {d.style.display='block';}
}
//-->
</script> 

</head> 
<body> 
<div id="navcontainer"> 
    <ul id="navlist"> 
        <li class="menu" id="active" onmouseover="javascript:montre();"><a href="inhalt.htm" id="current" target="Inhalt">Home</a></li> 
        <li class="menu" onmouseover="javascript:montre();"><a href="../wirueberuns/wirueberuns.htm" target="Inhalt">Wir &uuml;ber uns </a></li> 
        <li class="menu" onmouseover="javascript:montre('smenu4');">
                <a href="#" id="current2" style="cursor: crosshair;">Aktuelles</a> 
                <div id="smenu4"  onmouseover="javascript:montre('smenu4');"> 
                    <ul> 
                        <li><a href="../aktuelles/veranstaltungen.htm" class="current3" target="Inhalt">Veranstaltungen</a></li> 
                        <li><a href="../aktuelles/gruppen.htm" class="current3" target="Inhalt">Regelm.Gruppen</a></li> 
                    </ul> 
                </div> 
        </li> 
        <li class="menu" onmouseover="javascript:montre();"><a href="../photos/index.php" target="Inhalt">Fotogalerien</a></li> 
        <li class="menu" onmouseover="javascript:montre();"><a href="../spenden/spenden.htm" target="Inhalt">Spenden und Mitgliedschaft </a></li> 
        <li class="menu" onmouseover="javascript:montre();"><a href="../kontakt/kontakt.htm" target="Inhalt">Kontakt</a></li> 
        <li class="menu" onmouseover="javascript:montre();"><a href="../downloads/downloads.htm" target="Inhalt">Downloads</a></li> 
        <li class="menu" onmouseover="javascript:montre();"><a href="../links/links.htm" target="Inhalt">Links</a></li> 
        <li class="menu" onmouseover="javascript:montre();"><a href="../sitemap/sitemap.htm" target="Inhalt">&Uuml;bersicht</a></li> 
    </ul> 
</div> 
</body> 
</html>
----------------------------------------------------------------------------------------------------------------------------
On peut être intelligent toute sa vie et stupide un instant.

WWW

19

Re : Petits blèmes sur Firefox avec menus vertical et horizontal

Vraiment un énooorme MERCI à vous deux pour vos efforts sur le menu 1 horizonzal !!!

...En ce qui concerne les id/class, je le savais, ça faisait partie de mes "bonnes actions" futures de changer ça (...), mais merci de me le rappeler ! Donc pour le menu horizontal j'ai utilisé le code proposé par Cyberbob002 ...et tout marche nickel ! super :-) A ce propos, Cyberbob002, est-ce que tu as utilisé un code d'Alsacréation ? ...parce-que le javascript, soit je l'avais "trafiqué", soit j'en avais utilisé un autre, parce-qu'il ne ressemble pas du tout à celui que j'avais (voir tout en haut) ...En tout cas c'est carrément génial !

Concernant le menu 2 vertical de gauche, je regarde la dernière proposition de Cyberbob002 et je remarque que sur MIE dans le sous-menu en rollover (sur "Aktuelles"), il y a un point de liste en trop en face du second sous-menu, tandis que pour le coup, tout est nickel sur Firefox ...Est-ce que cela a une quelconque signification ? Et je vois que le javascript est le même que celui proposé pour le menu 1 horizontal, et c'estl vrai que ça marche nickel sans style ...Est-ce que vous voyez dans mon style une ou des erreurs grossières qui pourraient être à l'origine du déraillement du sous-menu sur Firefox ?

20 Dernière modification par meh (10/06/2005 21h17m59s)

Re : Petits blèmes sur Firefox avec menus vertical et horizontal

Comme je bossais aujourd'hui sur le site, je viens de m'apercevoir de quelquechose concernant le menu 1 horizontal "relooké" et me suis souvenu pourquoi j'avais mis le javascript qui y était à l'origine : je voulais que chaque sous-menu disparaisse non seulement quand on allait sur un autre sous-menu du même menu horizontal, mais aussi quand on allait sur le menu vertical de gauche, par soucis de logique et pour ne pas troubler les visiteurs. Maintenant, avec le super code optimisé pour Firefox (dont je suis quand même bien content :-)  ) que vous avez proposé hier (et que j'ai mis en ligne aussi), cela n'est plus possible : le dernier sous-menu du haut cliqué reste visible même quand on va sur le menu vertical de gauche ...Est-ce que vous voyez ce que je veux dire ?

Re : Petits blèmes sur Firefox avec menus vertical et horizontal

SamRay1024 est plus proche de l'original. Ca ne fonctionne pas non plus avec son code ?

----------------------------------------------------------------------------------------------------------------------------
On peut être intelligent toute sa vie et stupide un instant.

WWW

22

Re : Petits blèmes sur Firefox avec menus vertical et horizontal

Si, c'est vrai, sur le menu horizontal ça marche nickel comme je le voulais à l'origine avec le code deSamRay1024 ;-)

Sinon, en ce qui concerne le style de ce damné menu vertical une ou des erreurs grossières qui pourraient être à l'origine du déraillement du sous-menu sur Firefox ?

Merci à vous deux !

Re : Petits blèmes sur Firefox avec menus vertical et horizontal

Salut !

À mon avis, tu devrais remettre ton style au fur et à mesure, presque ligne par ligne même, pour savoir à quel moment ça déraille.
Si le code passe bien sur mozilla et IE en général ça passe aussi sur Safari (ou bugs très mineurs).

Cyb.

----------------------------------------------------------------------------------------------------------------------------
On peut être intelligent toute sa vie et stupide un instant.

WWW

24

Re : Petits blèmes sur Firefox avec menus vertical et horizontal

Oui, je vais essayer, mais je vois déjà que je vais galèrer, parce-que je l'avais déjà fait et ça n'avait pas abouti à mieux, de là mon appel public à l'aide ici même. Je vais le refaire ...mais n'hésitez pas si vous voyez quelquechose ;-)

...Et merci encore à vous deux pour votre aide, vos efforts et vos conseils !

Re : Petits blèmes sur Firefox avec menus vertical et horizontal

À dire vrai je n'ai pas pas trop le temps mais j'essairais de jeter un oeil quand même wink

----------------------------------------------------------------------------------------------------------------------------
On peut être intelligent toute sa vie et stupide un instant.

WWW