<![CDATA[Les forums de JeBulle.net – Petits blèmes sur Firefox avec menus vertical et horizontal]]> https://forums.jebulle.net/topic/406/petits-blemes-sur-firefox-avec-menus-vertical-et-horizontal/ Wed, 15 Jun 2005 13:19:52 +0000 PunBB <![CDATA[Re: Petits blèmes sur Firefox avec menus vertical et horizontal]]> https://forums.jebulle.net/post/5553/#p5553 Merci :-)

]]> Wed, 15 Jun 2005 13:19:52 +0000 https://forums.jebulle.net/post/5553/#p5553 <![CDATA[Re: Petits blèmes sur Firefox avec menus vertical et horizontal]]> https://forums.jebulle.net/post/5547/#p5547 À dire vrai je n'ai pas pas trop le temps mais j'essairais de jeter un oeil quand même wink

]]> Wed, 15 Jun 2005 07:32:43 +0000 https://forums.jebulle.net/post/5547/#p5547 <![CDATA[Re: Petits blèmes sur Firefox avec menus vertical et horizontal]]> https://forums.jebulle.net/post/5545/#p5545 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 !

]]> Tue, 14 Jun 2005 17:24:03 +0000 https://forums.jebulle.net/post/5545/#p5545 <![CDATA[Re: Petits blèmes sur Firefox avec menus vertical et horizontal]]> https://forums.jebulle.net/post/5544/#p5544 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.

]]> Tue, 14 Jun 2005 15:45:48 +0000 https://forums.jebulle.net/post/5544/#p5544 <![CDATA[Re: Petits blèmes sur Firefox avec menus vertical et horizontal]]> https://forums.jebulle.net/post/5526/#p5526 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 !

]]> Sun, 12 Jun 2005 21:02:46 +0000 https://forums.jebulle.net/post/5526/#p5526 <![CDATA[Re: Petits blèmes sur Firefox avec menus vertical et horizontal]]> https://forums.jebulle.net/post/5524/#p5524 SamRay1024 est plus proche de l'original. Ca ne fonctionne pas non plus avec son code ?

]]> Sat, 11 Jun 2005 14:29:51 +0000 https://forums.jebulle.net/post/5524/#p5524 <![CDATA[Re: Petits blèmes sur Firefox avec menus vertical et horizontal]]> https://forums.jebulle.net/post/5523/#p5523 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 ?

]]> Fri, 10 Jun 2005 20:14:39 +0000 https://forums.jebulle.net/post/5523/#p5523 <![CDATA[Re: Petits blèmes sur Firefox avec menus vertical et horizontal]]> https://forums.jebulle.net/post/5518/#p5518 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 ?

]]> Fri, 10 Jun 2005 01:30:21 +0000 https://forums.jebulle.net/post/5518/#p5518 <![CDATA[Re: Petits blèmes sur Firefox avec menus vertical et horizontal]]> https://forums.jebulle.net/post/5517/#p5517 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>
]]> Thu, 09 Jun 2005 19:03:11 +0000 https://forums.jebulle.net/post/5517/#p5517 <![CDATA[Re: Petits blèmes sur Firefox avec menus vertical et horizontal]]> https://forums.jebulle.net/post/5516/#p5516 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

]]> Thu, 09 Jun 2005 18:47:30 +0000 https://forums.jebulle.net/post/5516/#p5516 <![CDATA[Re: Petits blèmes sur Firefox avec menus vertical et horizontal]]> https://forums.jebulle.net/post/5515/#p5515 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...

]]> Thu, 09 Jun 2005 18:44:58 +0000 https://forums.jebulle.net/post/5515/#p5515 <![CDATA[Re: Petits blèmes sur Firefox avec menus vertical et horizontal]]> https://forums.jebulle.net/post/5514/#p5514 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();

]]> Thu, 09 Jun 2005 18:27:17 +0000 https://forums.jebulle.net/post/5514/#p5514 <![CDATA[Re: Petits blèmes sur Firefox avec menus vertical et horizontal]]> https://forums.jebulle.net/post/5513/#p5513 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.

]]> Thu, 09 Jun 2005 18:20:52 +0000 https://forums.jebulle.net/post/5513/#p5513 <![CDATA[Re: Petits blèmes sur Firefox avec menus vertical et horizontal]]> https://forums.jebulle.net/post/5512/#p5512 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 )

]]> Thu, 09 Jun 2005 14:07:21 +0000 https://forums.jebulle.net/post/5512/#p5512 <![CDATA[Re: Petits blèmes sur Firefox avec menus vertical et horizontal]]> https://forums.jebulle.net/post/5511/#p5511 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...

]]> Thu, 09 Jun 2005 13:47:24 +0000 https://forums.jebulle.net/post/5511/#p5511