Discussion :

[JefReb]

Bonjour à tous,
Je découvre un comportement différent suivant que le css est en interne ou placé dans un fichier externe.
Normalement je mets au point dans un fichier html avec les css interne et teste sur Firefox et Chrome. Une fois au point, je bascule dans un fichier css externe.
Et là, je m'aperçois que sous Firefox uniquement (pas sous Chrome) tous les sous-menus s'affichent pendant quelques millisecondes avant de disparaître, Fantôme rapide mais gênant, comme si il y avait un retard dans l'exécution du css externe.
Voici une capture du ghost fugitif:

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
@charset "utf-8";
/* CSS Document */
* {
	box-sizing: border-box;
}
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 100%;
}
body {
	font-family: "Times New Roman", Times, serif;
	font-size: 100%;
}
 
/*================================================================*/
/*          Définition du menu                                    */
/*================================================================*/
nav {
	position: relative;
	top: 20px;
	left: 20px;
	width: 100%;
	margin: 0;
	padding: 0;
	height: 40px;
	cursor: pointer;
}
#menu, #menu ul {
	margin: 0;
	padding: 0;
	list-style: none;			/*  supprimons les puces 	  */
}
#menu {
	width: 830px;				/* largeur pour centrer */
	margin: 0 auto;				/* on centre le menu dans nav */
	background-color: inherit;  /* récupération de la couleur du parent */
}
/* =========================================================== */
/* =============  pour annuler le flottement  ==============   */
/* =========================================================== */
/*#menu:before, #menu:after {
	content: "";
	display: table;
}
#menu:after {
	clear: both;
}*/
/* ======================================================== */
/*            définitions des	li   					    */
/* ======================================================== */
#menu li {
	float: left;
	position: relative;
}
/* ======================================================== */
/*      définition pour TOUS les liens 						*/
/* ======================================================== */
#menu a {
	padding: 12px 30px;
	text-transform: uppercase;
	text-align: center;
	font: bold 12px Arial, Helvetica;
	text-decoration: none;
	color: #fff;
	background-color: #111;    /* couleur fond presque noir */
}
 
#menu ul li {
	float: none;				/* pas de flottement pour les sous-menus */
	display: block;
}
/* ======================================================== */
/*            définitions de la largeur des liens		    */
/* ======================================================== */
/* 		définition des largeurs des différents liens  		*/ 
#menu a {
	width: 170px;				/* largeur de tous les liens */
}
#menu ul a {
	width: 150px;				/* largeur des liens du niveau 2 */
}
#menu ul ul a {
	width: 160px;				/* largeur des liens du niveau 3 */
}
#menu li:nth-child(3) ul a {
	width: 180px;				/* exception pour les liens du 3ème li de niveau 1 */
}
/* ======================================================== */
/* définition des liens des sous-niveaux  				    */
/* ======================================================== */
#menu ul a {
	padding: 10px;
	display: block;
	white-space: nowrap;
	text-transform: none;			/* texte en minuscule */
}
/* ======================================================== */
/* 			définition des  sous-niveaux  				    */
/* ======================================================== */
#menu ul {
	margin: 20px 0 0 0;	   /* nécessaire pour la transition */
	position: absolute;
	z-index: 9999;
	transition: all .6s ease-in-out; 	/* pour l'animation */
}
/* ======================================================== */
/* 			positionnement des  sous-niveaux  			    */
/* ======================================================== */
#menu ul {
	top: 42px;		  /* 3 fois 12px (font + padding) + 6px */
	left: 0;
}
#menu ul ul {
	top: 0;
	left: 162px;		   /* 150px niveau 2 + 12px 	    */
	margin: 0 0 0 20px;	   /* nécessaire pour la transition */
}
/* ======================================================= */
/*     Cachons TOUS les sous-menus       			       */
/* ======================================================= */
#menu ul {
	opacity: 0;
	visibility: hidden;
}
/* ======================================================= */
/* Rendons visible les sous -menus au survol des li        */
/* ======================================================= */
#menu li:hover > ul {
	opacity: 1;
	visibility: visible;
	margin: 0;		/* important pour le positionnement des sous-menus */
}
/* ======================================================= */
/*   Changement au survol des liens                 	   */
/* ======================================================= */
#menu li a:hover {
	color: white;
	background-color: #7db6d9;  			 /*bleu clair */
	text-decoration: underline;
}
/* ====================================================== */
/*                UN PEU DE COSMETIQUE  			 	  */
/* ====================================================== */
/*       arrondissons un peu les angles et ombrage   	  */
#menu ul {
	border-radius: 10px;   /* pour suprimer coin carré de l'ombre */
	box-shadow: 10px 10px 5px 0px #48739c;
}
#menu ul ul {
	box-shadow: 10px 10px 5px 0px #48739c; 		 /* ombrage */
}
#menu > li:first-child > a {
	border-radius: 10px 0 0 10px;
}
#menu li:last-child > a {
	border-radius: 0 10px 10px 0;
}
#menu ul li:first-child > a {
	border-radius: 10px 10px 0 0;
}
#menu ul li:last-child > a {
	border-radius: 0 0 10px 10px;
}
/* ====================================================== */
/*       plaçons des séparateurs transparents 			  */
/* ====================================================== */
#menu > li {
	border-right: 2px solid transparent;
}
#menu > li:last-child {
	border-right: none;   /* mais pas sur le dernier enfant */
}
#menu > li ul li {
	border-top: 2px solid transparent;
}
/* ====================================================== */
/* mettons un petit triangle pour annoncer les sous-menus */
/* ====================================================== */
#menu ul li:first-child > a:after {
	content: '';
	position: absolute;
	left: 40px;
	top: -10px;
	border-style: solid;
	border-width: 0 6px 10px 6px;
	border-color: transparent transparent #111; 	/* petit triangle haut */
}
#menu ul ul li:first-child a:after {
	content: '';
	position: absolute;
	left: -10px;
	top: 50%;
	border-style: solid;
	border-width: 6px 10px 6px 0;
	border-color: transparent #111 transparent; 	/* petit triangle vers gauche */
}
#menu ul li:first-child a:hover:after {
	border-color: transparent transparent #7db6d9;	/* changement de couleur au survol */
}
#menu ul ul li:first-child a:hover:after {
	border-color: transparent #7db6d9 transparent;	/* changement de couleur au survol */
}

Code html :

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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Accueil</title>
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<style type="text/css">
</style>
</head>
<body>
  <nav>
    <ul id="menu">
      <li><a href="#" title="Accueil">Accueil</a></li>
      <li><a href="#" title="Calendrier">Calendrier</a></li>
      <li><a href="#" title="Membres">Membres</a>
        <ul>
          <li><a href="#" title="Jacques">Jacques</a></li>
          <li><a href="#" title="Patrice >Patrice</a></li>
          <li><a href="#" title="Bernard">Bernard</a></li>
        </ul>
      </li>
      <li><a href="#" title="Téléchargements">Téléchargements</a>
        <ul>
          <li><a href="#" title="Outils">Outils</a>
            <ul>
              <li><a href="#" title="">xxx</a></li>
              <li><a href="#" title="">xxx</a></li>
            </ul>
          </li>
          <li><a href="#" title="Exercices">Exercices</a>
            <ul>
              <li><a href="#" title="">xxx</a></li>
              <li><a href="#" title="">xxx</a></li>
            </ul>
          </li>
          <li><a href="#" title="Corrigés">Corrigés</a>
            <ul>
              <li><a href="#" title="">xxx</a></li>
              <li><a href="#" title="">xxx</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</body>
</html>

Je teste avec Dreamweaver et Wampserver directement sur mon pc "de course". Je sais que Firefox est un peu long à démarrer.
Mais je pense que c'est la transition qui pose problème, car quand je supprime

Code css :

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

transition: all .6s ease-in-out;

, il n'y a pas de ghost, mais évidemment il faut revoir le css des sous-menus qui ne se laissent pas approcher.

PS: Question supplémentaire, je n'arrive pas à tester dans Edge, car je ne trouve pas l'exécutable comme internet explorer à mettre dans Dreamweaver.

Merci pour votre aide.

[Invité]

Bonjour,

tu as 3 définitions pour #menu ul {...}
Regroupe-les.

[JefReb]

Merci Jreaux62,
Effectivement, ça a l'air de marcher, mais ce n'était pas déjà flagrant.
J'aime bien comprendre et je reste sur ma faim. Le but de séparer et dissocier était de montrer pas à pas comment construire le menu aux membres du club.
Mais moi même, je galère parfois pas mal, même avec mon peu d'expérience.

Bien sûr, c'est une horreur dans Internet Explorer et la transition ne fonctionne pas. Et ça me gonfle de trouver les hacks. (Vive Microsoft!), mais faudra que j'y passe ...


En annexe, saurais-tu comment paramétrer dans Dreamweaver l'utilisation de Edge, car je ne trouve par l'exécutable comme ie, Firefox ou Chrome dans Windows 10.

[Invité]

Je n'ai jamais utilisé Dreamweaver...

[JefReb]

Ha bon???
Dreamweaver même en "vieille version 6" est super pratique.
Mais un topic sur les outils pour développer serait très intéressant, car si j'utilise Dreamweaver, c'est que j'ai contourné l'achat "excessif" par les offres Adobe universitaire.
C'est pourquoi je suis toujours en version 6, un peu beaucoup vieille, mais c'est quand même pas mal et pratique.
Il n'existe pas tellement d'outils peu cher et même NotePad++ gratuit a ses limites ...
Mais merci pour ta réponse.