Discussion :

[Lelka]

Bonjour à tous,

J'ai fais un menu vertical coulissant en Javascript. Le problème c'est qu'il ne s'affiche pas de la même façon sur IE7 que sur Firefox ! Bizarrementj'ai une page qui, sur IE7, affiche correctement le menu mais c'est la seule.. Ca je ne comprend pas!!

Voici le lien de cette page qui affiche correctement le menu:
http://www.cap-sante.org/fils/cs_bel...l_kabinda.html

Code Javascript associé:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<link rel="stylesheet" media="screen" type="text/css" title="Essai" href="../../styles/design_index.css" />
 
 <script type="text/javascript" src="../../styles/jquery-1.2.6.js"></script>
 
<script type="text/javascript">
<!--
  $(document).ready( function () {
    // On cache les sous-menus :
    $(".navigation ul.subMenu").hide();
    // On sélectionne tous les items de liste portant la classe "toggleSubMenu"
    // et on remplace l'élément span qu'ils contiennent par un lien :
    $(".navigation li.toggleSubMenu span").each( function () {
        // On stocke le contenu du span :
        var TexteSpan = $(this).text();
        $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
    } ) ;
 
    // On modifie l'évènement "click" sur les liens dans les items de liste
    // qui portent la classe "toggleSubMenu" :
    $(".navigation li.toggleSubMenu > a").click( function () {
        // Si le sous-menu était déjà ouvert, on le referme :
        if ($(this).next("ul.subMenu:visible").length != 0) {
            $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") });
        }
        // Si le sous-menu est caché, on ferme les autres et on l'affiche :
        else {
            $(".navigation ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") });
            $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") });
        }
        // On empêche le navigateur de suivre le lien :
        return false;
     });
   } ) ;
   // -->
 
</script>

Et un autre lien d'une page avec affichage foireux du menu:

http://www.cap-sante.org/fils/cs_bel...n_afrique.html

Code Javascript associé:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<link rel="stylesheet" media="screen" type="text/css" title="Essai" href="../styles/design_index.css" />
 
<script type="text/javascript" src="../styles/jquery-1.2.6.js"></script>
 
<script type="text/javascript">
<!--
$(document).ready( function () {
    // On cache les sous-menus :
    $(".navigation ul.subMenu").hide();
    // On sélectionne tous les items de liste portant la classe "toggleSubMenu"
    // et on remplace l'élément span qu'ils contiennent par un lien :
    $(".navigation li.toggleSubMenu span").each( function () {
        // On stocke le contenu du span :
        var TexteSpan = $(this).text();
        $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
    } ) ;
 
    // On modifie l'évènement "click" sur les liens dans les items de liste
    // qui portent la classe "toggleSubMenu" :
    $(".navigation li.toggleSubMenu > a").click( function () {
        // Si le sous-menu était déjà ouvert, on le referme :
        if ($(this).next("ul.subMenu:visible").length != 0) {
            $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") });
        }
        // Si le sous-menu est caché, on ferme les autres et on l'affiche :
        else {
            $(".navigation ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") });
            $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") });
        }
        // On empêche le navigateur de suivre le lien :
        return false;
    });
} ) ;
// -->
 
</script>

Pourtant ces 2 pages utilisent le même fichier .CSS.

Code CSS associé aux 2 pages:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
.navigation {
    margin: 0;
    padding: 0;
    list-style: none;
    background: #000;
    color: #fff;
}
.navigation li {
    list-style-type: none;
}
.navigation a, .navigation span {
    display: block;
    padding: 0;
    text-decoration: none;
    background-image: url("../images/fond_menu_img1.jpg");
    font-style: normal;
    font-family: "Times New Roman", "Arial Black", Times, serif;
    font-size: 1.1em;
 
    padding-left: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
 
    border: 1px solid black;
    border-top: none;
    border-right: none;
    border-left: none;
 
    color: #040f38;
}
.navigation .toggleSubMenu a, .navigation .toggleSubMenu span {
}
.navigation .open a, .navigation .open span {
}
.navigation a:active {
    background-image: url("../images/fond_menu_img2.jpg");
    text-decoration: none;
    color: #074e09;
}
.navigation a:hover {
    background-image: url("../images/fond_menu_img2.jpg");
    text-decoration: none;
    color: #074e09;
    border-bottom: 2px solid black;
    border-top: 1px solid black;
}
.navigation .subMenu {
    font-size: .8em;
    background: #ccc 0 0 repeat-x;
    font-size: .9em;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #666;
}

Quelqu'un pourrait m'eclaircir sur ce bug ?

D'avance, merci

[RomainVALERI]

Les chemins d'accès à la feuille de style ne sont pas les mêmes ^^

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<link rel="stylesheet" media="screen" type="text/css" title="Essai" href="../../styles/design_index.css" />

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<link rel="stylesheet" media="screen" type="text/css" title="Essai" href="../styles/design_index.css" />

[Auteur]

bonjour,

tu peux t'inspirer de cet exemple :
http://css.developpez.com/galerie/?p...-verticaux#MV2

[RomainVALERI]

Je me rends compte à l'instant que ma remarque s'applique tout autant à l'inclusion du fichier .js

Pas besoin ici de savoir comment sont organisés tes répertoires, car si ce fichier marche et pas les autres... on dirait bien que c'est à cause de cette histoire de chemins erronés aux ressources externes ^^

[Lelka]

bonjour,

tu peux t'inspirer de cet exemple :
http://css.developpez.com/galerie/?p...-verticaux#MV2

Très bon exemple, mais je recherche plus le glisser qu'un affichage sec

Pas besoin ici de savoir comment sont organisés tes répertoires, car si ce fichier marche et pas les autres... on dirait bien que c'est à cause de cette histoire de chemins erronés aux ressources externes ^^

Ca ne peut pas être un chemin erroné vu que sur Firefox ça marche non ?

[Kerod]

Hmmm. Quel est exactement ton problème car ayant pas IE7 je ne vois pas de différence.

Le souci vient du Slide ? Ou du survol des liens sur lesquels on voit apparaitre des bordures top et bottom ??

Si c'est ce dernier alors ça vient de cette classe CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.navigation a:hover {
    background-image: url("../images/fond_menu_img2.jpg");
    text-decoration: none;
    color: #074e09;
    border-bottom: 2px solid black;
    border-top: 1px solid black;
}

Chez moi je retire les bordures et j'ai plus cet effet.

Enfin, ce margin-left de la page à 170px est-il voulu ou c'est juste pour tenter de centrer la page dans une certaine résolution ?? En 1024 ça le fait pas trop et même chose en 1680

[RomainVALERI]

Ca ne peut pas être un chemin erroné vu que sur Firefox ça marche non ?

Sur le principe, je suis bien d'accord avec toi, mais dans la mesure où on ne sait pas toujours ce que les navigateurs font "dans l'arrière-boutique" (quelle culture technique ) pour nous simplifier la tâche... il serait quand même utile de mettre à jour les chemins en fonction de tes répertoires... ^^

[Lelka]

Le souci vient du Slide ? Ou du survol des liens sur lesquels on voit apparaitre des bordures top et bottom ??

Le problème vient du fait que sur IE7, les menus du slide sont 2 fois plus grand (en hauteur) que la normale. Je pense que ca doit venir du .CSS mais comme je dis bizarement sur firefox, les menus s'affiche correctement.

Enfin, ce margin-left de la page à 170px est-il voulu ou c'est juste pour tenter de centrer la page dans une certaine résolution ?? En 1024 ça le fait pas trop et même chose en 1680

En fait c'est pour une résolution 1280x800. Le margin: auto; ne fonctionne pas. Alors j'ai un DIV pour la page entière que je mets à 170px du bord. C'est la seule solution que j'ai trouvée...
Aurais-tu quelque chose d'autre à me proposer ?

[RomainVALERI]

En fait c'est pour une résolution 1280x800. Le margin: auto; ne fonctionne pas. Alors j'ai un DIV pour la page entière que je mets à 170px du bord. C'est la seule solution que j'ai trouvée...
Aurais-tu quelque chose d'autre à me proposer ?

>>> Interroger les propriétés clientWidth et clientHeight de ton élément body pour déterminer dynamiquement ta marge gauche.
Si tu développes pour IE, cette page du MSDN peut t'être utile afin de bien différencier les différentes propriétés spatiales des éléments.

(mais je vois que tu utilises jquery, et il est possible que cette bibliothèque propose des fonctionnalités plus avancées pour ce genre de besoin.... je l'ignore ^^)