Superposition du menu sur des conteneurs

**F6AAP** · 15/01/2018, 12h34

Bonjour,

Sur un conteneur j'inclus 4 sous- conteneurs.

Sur les deux premiers les menus et sous-menus s'affichent par dessus, sur les deux seconds suivants ce sont les conteneurs qui sont en premier plan.

je n'arrive pas à voir ou je fais l'erreur.

Ci-dessous le code css utilisé : si quelqu'un peut m'aider je l'en remercie par avance.

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
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
div#presentation
{
	float:rigth;
	width:60%;
	height:370px;
	background-color:#FFFFFF;
	border: 2px solid black;
	margin-left:10px;
	margin-right: 0px;
	margin-top: 10px;
	order: 1;	
}
div#presentation h1
{
	font-size: 15px;
	color: #33FF00;
	text-align: center;	
	font-weight: bold;
}
div#presentation h2
{
	font-size: 10px;
	color: #990000;
	text-align: center;	
}
div#presentation h3
{
	font-size: 12px;
	text-align: center;	
}
div#presentation h4
{
	font-size: 11px;
	text-align: left;
	margin-left: 15px;	
}
div#presentation h5
{
	font-size: 9px;
	text-align: left;
	margin-left: 40px;
	font-weight: normal;
	line-height: 12px;	
}
table
{
	border-collapse: collapse;
	border: 1px solid black;
	font-size: 11px;
	margin:  0 auto;
	justify-content: center;
}
div#infos
{
	float: right;
	width:40%;
	height:370px;
	background-color:#FFFFFF;
	border: 2px solid black;
	margin-left:10px;
	margin-right: 0px;
	margin-top: 10px;
	order: 2;
}	
div#infos h1
{
	font-size: 15px;
	color: #66ff00;
	text-align: center;	
	font-weight:bold;
}
div#infos h2
{
	font-size: 10px;
	text-align: left;	
	margin-left: 15px;
	font-weight: normal;
}
div#infos h3
{
	font-size: 8px;
	text-align: left;	
	margin-left: 30px;
	line-height: 4px;	
}
div#galene
{
	float:right;
	width:25%;
	height:370px;
	background-color:#FFFFFF;
	border: 2px solid black;
	margin-left:10px;
	margin-right: 0px;
	margin-top: 10px;
	order: 3;
	z-index: 9;
}
div#galene h1
{
	font-size: 10px;
	text-align: center
}
div#galene img
{
	width: 230px;
	height: 310px;
	margin-top: 0px;
}
div#galene img:hover
{
	width : 400px;
	height: 600px;
}
div#compteur
{
	float: right;
	width:35%;
	height:370px;
	max-width: 100%;
	background-color:#FFFFCC;
	border: 2px solid black;
	margin-left:10px;
	margin-right: 10px;
	margin-top: 10px;
	text-align: center;	
	font-size: 10px;
	z-index: 10;
	order: 4;
}
div#compteur h1
{
	font-size: 12px;
	text-align:center;
}
div#compteur img
{
	width:100px;
	height: 30px; 
	z-index: 10;
}

Cordialement

Invité · 15/01/2018, 13h01

Bonjour,

Un code CSS ne sert à rien sans code HTML associé (ou page en ligne).

A vue de nez : z-index à adapter.

**F6AAP** · 15/01/2018, 16h58

Bonjour,

Merci pour la réponse. J'ai fait pas mal de tentative avec z-index mais sans succés.

Ci-dessous le HTML:

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
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
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
<!DOCTYPE html>
<html>
	<head>
		<meta charset="uft-8" />
		<meta name="generator" content="PSPad editor, www.pspad.com">
		<meta name="author" content="http://radservebeer.free.fr">
		<meta name="generator" content="PSPad editor, www.pspad.com">
		<title>Titre</title>
		<link rel="stylesheet" href="index.css" /> 
	</head>
	<body>
		<div id="bloc_page"> 
 
	<header>
		<div id="conteneur1">
			<div class="element"><img src="Logo-ARA-61-HD.jpg" alt "Logo ARA-61" ></div>
			<div class="element">ASSOCIATION DES RADIOAMATEURS DE L'ORNE<br /><br />ARA-61<br />
				<h1>ARA-61 affiliée au REF association loi 1901 à but non lucratif</h1>	
				<h2>Site hébergé par les serveurs du REF</h2>
			</div>
			<div class="element"><img src="Logo-REF-HD.jpg" alt "Logo REF" ></div>
		</div>
	</header>
<ul id="menu">
	<li class="current"><a href="#">ACCUEIL</a></li>
	<li><a href="#">ASSOCIATION</a>
		<ul>
			<li><a href="#">LA VIE DE L'ARA-61<img src="images/multi.png" border="0" width="15" height="15" alt="" align="absmiddle"></a>
				<ul>
					<li><a href="#">Notre calendrier</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/Dernier CR de Réunion.pdf" target="_blank">CR dernière réunion de bureau</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/CR AG.pdf" target="_blank">CR dernière AG</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/Liste des OM du 61.pdf" target="_blank">Liste des radioamateurs du 61</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/Adherants-ARA-61.pdf" target="_blank">Liste de nos adhérents</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/Les AG du 61.pdf" target="_blank">Lieu de nos differentes AG</a></li>
				</ul>
			</li> 
			<li><a href="#">LES STATUTS <img src="images/multi.png" border="0" width="15" height="15" align="absmiddle"></a>
				<ul>
					<li><a href="/home/daniel/Documents/HTML/Docs/Statuts ARA-61-2014-04-13.pdf" target="_blank">Les Statuts</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/Reglement Interieur ARA-61-2014-04-13.pdf" target="_blank">Réglement intérieur</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/Recipisse Prefecture ARA-61.jpg" target="_blank">Récipissé préfecture</a></li>
				</ul>
			</li>	
			<li><a href="#">INFORMATIONS DIVERSES<img src="images/multi.png" border="0" width="15" height="15" alt="" align="absmiddle"></a>
				<ul>
					<li><a href="/home/daniel/Documents/HTML/Docs/Historique du REF 61.pdf" target="_blank">Historique du REF</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/REF-61 1950.pdf" target="_blank">Le REF 61 dans les années 50</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/Les radioamateurs du 61 avant 1945.pdf" target="_blank">Les OM du 61 avant 1945</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/La presse.pdf" target="_blank">Ce qu'en dit la presse</a></li>
				</ul>
			</li>
			<li><a href="#">ACTIVITES<img src="images/multi.png" border="0" width="15" height="15" alt="" align="absmiddle"></a>
				<ul>
					<li><a href="http://dfcf-orne.over-blog.com/" target="_blank">Le DFCF de l'Orne</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/Activites 2014.pdf" target="_blank">Activité 2014</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/Activation de TM61FDC.pdf" target="_blank">Activation TM61FDC</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/Telegraphe Chappe 07-06-2015.pdf" target="_blank">Télégraphe de Chappe 07-06-2015</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/Activites 2015.pdf" target="_blank">Activités 2015</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/TM61FDC2016.pdf" target="_blank">Fête du ciel 2016 à L'AIGLE</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/TM61THF 2016-1.pdf" target="_blank">Activation TM61THF 2016</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="#">REGLEMENTATION</a>
		<ul>
			<li><a href="/home/daniel/Documents/HTML/Docs/Ethique RadioAmateur.pdf" target="_blank">L'étique du radioamateur </a></li>
			<li><a href="/home/daniel/Documents/HTML/Docs/La Nouvelle Reglementation presenté par F6GPX.pdf" target="_blank">La nouvelle réglementation </a></li>
			<li><a href="https://www.legifrance.gouv.fr/affichTexte.do?cidTexte=JORFTEXT000027144455" target="_blank">Journal officiel du 07/03/2013 concernant le service amateur </a></li>
		</ul>
	</li>
	<li><a href="#">LE BULLETIN</a>
		<ul>
			<li><a href="#">ANNEES 2017-2015<img src="images/multi.png" border="0" width="15" height="15" align="absmiddle"></a>
				<ul>
					<li><a href="/home/daniel/Documents/HTML/Docs/GALENE 61 N°73.pdf" target="_blank">Galène N° 73 Decembre 2017</a></li>	
					<li><a href="/home/daniel/Documents/HTML/Docs/GALENE 61 N°72.pdf" target="_blank">Galène N° 72 Juillet/Aout 2017</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/GALENE 61 N°71.pdf" target="_blank">Galène N° 71 Mars 2017</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/GALENE 61 N°70.pdf" target="_blank">Galène N° 70 Decembre 2016</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/GALENE 61 N°69.pdf" target="_blank">Galène N° 69 Novembre 2016</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/GALENE 61 N°68.pdf" target="_blank">Galène N° 68 Juin 2016</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/GALENE 61 N°67.pdf" target="_blank">Galène N° 67 Mars 2016</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/GALENE 61 N°66.pdf" target="_blank">Galène N° 66 Decembre 2015</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/GALENE 61 N°65.pdf" target="_blank">Galène N° 65 Nov-Dec 2015</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/GALENE 61 N°64.pdf" target="_blank">Galène N° 64 Mai 2015</a></li>
				</ul>
			<li><a href="#">ANNEES 2014-2012<img src="images/multi.png" border="0" width="15" height="15" align="absmiddle"></a><!-- n2 -->
				<ul>
					<li><a href="/home/daniel/Documents/HTML/Docs/GALENE 61 N°63.pdf" target="_blank">Galène N° 63 Novembre 2014</a></li>	
					<li><a href="/home/daniel/Documents/HTML/Docs/GALENE 61 N°62.pdf" target="_blank">Galène N° 62 Mai 2014</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/GALENE 61 N°61.pdf" target="_blank">Galène N° 61 Mars 2014</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/GALENE 61 N°60.pdf" target="_blank">Galène N° 60 Decembre 2013</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/GALENE 61 N°59.pdf" target="_blank">Galène N° 59 Octobre 2016</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/GALENE 61 N°58.pdf" target="_blank">Galène N° 58 Fevrier 2013</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/GALENE 61 hors serie 12-2012.pdf" target="_blank">Galène hors-serie Decembre 2012</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/GALENE 61 N°57.pdf" target="_blank">Galène N° 57 Novembre 2012</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/GALENE 61 N°56.pdf" target="_blank">Galène N° 56 Fevrier 2012</a></li>
				</ul>
		</ul>
	</li>
	<li><a href="#">LE DIPLOME</a>
		<ul>
			<li><a href="/home/daniel/Documents/HTML/Docs/Le Diplome du 61.pdf" target="_blank">Conditions d'attribution</a></li>	
		</ul>
	</li>
	<li><a href="/home/daniel/Documents/HTML/relais.html" target="_blank"">LE RELAIS R4</a>
	</li>
	<li><a href="#">LIENS</a>
		<ul>
			<li><a href="#">ASSOCIATIONS<img src="images/multi.png" border="0" width="15" height="15" align="absmiddle"></a>
				<ul>
					<li><a href="http://www.ref-union.org/" target="_blank">REF</a></li>	
					<li><a href="http://f6kcz.free.fr/" target="_blank">Radioclub du 14</a></li>
					<li><a href="http://ref50.jimdo.com/" target="_blank">Le site du 50</a></li>
					<li><a href="http://www.adrasec61.fnrasec.org/" target="_blank">ADRASSEC 61</a></li>
					<li><a href="http://arrl.org/" target="_blank">ARRL</a></li>
					<li><a href="http://f4dxu.pagesperso-orange.fr/" target="_blank">F4DXU</a></li>
				</ul>
			<li><a href="#">ADMINISTRATIONS<img src="images/multi.png" border="0" width="15" height="15" align="absmiddle"></a>	
				<ul>
					<li><a href="http://amatpres.anfr.fr/presentation.do?reqCode=annuaire" target="_blank">ANFR</a></li>	
					<li><a href="http://www.ornetourisme.com/" target="_blank">Le tourisme dans le 61</a></li>
				</ul>			
			<li><a href="#">INFORMATIONS<img src="images/multi.png" border="0" width="15" height="15" align="absmiddle"></a>
				<ul>
					<li><a href="http://www.eqsl.cc/" target="_blank">Eqsl gestion electronique des QSL</a></li>	
					<li><a href="http://www.qrz.com/" target="_blank">QRZ recherche d'indicatifs</a></li>
					<li><a href="http://qrzcq.com/" target="_blank">QRZCQ recherche indicatifs et autres infos</a></li>
					<li><a href="http://www.dxzone.com/dx5641/qrz-ru-russian-hamradio-server.html" target="_blank">QRZRU recherche indicatifs pays de l'est</a></li>
					li><a href="http://hamcall.net/call" target="_blank">recherche indicatifs les plus connus</a></li>
					<li><a href="http://www.dxinfocentre.com/tropo.html" target="_blank">Prévisions propagation</a></li>
					<li><a href="http://www.hamqsl.com/solar.html" target="_blank">Activité solaire</a></li>
					<li><a href="http://www.udppc.asso.fr/bupdoc/index.php" target="_blank">Bulletin de l'union des physiciens</a></li>
				</ul>
		</ul>
	</li>
	<li><a href="#">TECHNIQUE</a>
		<ul>
			<li><a href="#">REALISATIONS<img src="images/multi.png" border="0" width="15" height="15" align="absmiddle"></a>
				<ul>
					<li><a href="/home/daniel/Documents/HTML/Docs/Réalisation Bingo.pdf" target="_blank">Transceiver 3 bandes (80, 40, 20) (F1FOI, F6AAP)</a></li>	
					<li><a href="/home/daniel/Documents/HTML/Docs/Alimentation 28V.pdf" target="_blank">Alimentation 28 V (F1DOI)</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/Des petits coffrets à QSJ QRP.pdf" target="_blank">Des petits coffrets à QSJ QRP (F1DOI)</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/Faites revivre les Tubes.pdf" target="_blank">Faites revivre vos tubes (F1DOI)</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/Mesureur de Champ simple.pdf" target="_blank">Mesureur de champ simple (F1DOI)</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/Girouette.pdf" target="_blank">Girouette (F1DOI)</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/Réception Satellite.pdf" target="_blank">La réception satellite (F4GOP)</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/manipulateur cw.pdf" target="_blank">Manipulateur pour la CW (F4GOP)</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/Alimentations de Serveur DELL en Alimentation de Labo.pdf" target="_blank">Alimentation serveur dell en alimentation labo (F1DOI)</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/Charge Fictive.pdf" target="_blank">Charge fictive (F4GOP)</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/Un connecteur simple.pdf" target="_blank">Un connecteur simple (F1DOI)</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/Transformez votre Analyseur en Q Metre.pdf" target="_blank">Transformez voutre analyser en Q-métre (F1DOI)</a></li>
				</ul>
			<li><a href="#">DESCRIPTIONS<img src="images/multi.png" border="0" width="15" height="15" align="absmiddle"></a>	
				<ul>
					<li><a href="/home/daniel/Documents/HTML/Docs/Adaptation EN-1487 pour FT-847.pdf" target="_blank">Adaptation de l'interface EN-1487 pour FT-847 (F1DOI)</a></li>	
					<li><a href="/home/daniel/Documents/HTML/Docs/Convertisseur 14-144 MHz.pdf" target="_blank">Convertisseur 14-144 Mhz (F1DOI)</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/Modification FT221R.pdf" target="_blank">Modification du FT221R (F1DOI)</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/Panne sur le FT 897.pdf" target="_blank">Panne sur le FT897 (F5LTI)</a></li>
				</ul>			
			<li><a href="#">DOCUMENTATIONS<img src="images/multi.png" border="0" width="15" height="15" align="absmiddle"></a>
				<ul>
					<li><a href="http://www.antenna-theory.com/" target="_blank">La théorie des antennes (anglais) (F1DOI)</a></li>	
					<li><a href="/home/daniel/Documents/HTML/Docs/Technique Fibre Optique.pdf" target="_blank">La technique de la fibre optique (F5HVI)</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/Cable Coaxial.pdf" target="_blank">Les câbles coaxiaux (F5HVI)</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/Performances des différents modes.pdf" target="_blank">Performance des modes de transmission (F1DOI)</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/Galene-61 la Technique.xls" target="_blank">Galène 61 liste des articles techniques (F1DOI)</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/Piles-Bouton-Equivalence-IEC.pdf" target="_blank">Pile bouton équivalence IEC (F5CTB)</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/argenture du cuivre.pdf" target="_blank">Argenter vos CI (F6AAP)</a></li>
					<li><a href="/home/daniel/Documents/HTML/Docs/Etamage du cuivre.pdf" target="_blank">Etamer vos CI (F6AAP)</a></li>
				</ul>
		</ul>
	</li>
	<li><a href="#">HISTOIRE</a>
		<ul>
			<li><a href="/home/daniel/Documents/HTML/Docs/La Tour Eiffel sauvee par la Radiox.pdf" target="_blank">Comment la radio a sauvée la Tour Eiffel (F1DOI)</a></li>	
			<li><a href="/home/daniel/Documents/HTML/Docs/Traitement par la HF en 1913.pdf" target="_blank">Traitement par la HF en 1913</a></li>		<li><a href="/home/daniel/Documents/HTML/Docs/Telegraphie Optique en 1870.pdf" target="_blank">Télégraphie optique en 1870 (F1DOI)</a></li>	
			<li><a href="/home/daniel/Documents/HTML/Docs/La télégraphie dans l'Orne 1870.pdf" target="_blank">La télégraphie dans l'Orne en 1870 (F1DOI)</a></li>	
			<li><a href="http://www.cargos-paquebots.net/Revue%20de%20presse/histoire_de_saint_lys_radio.pdf" target="_blank">Histoire de Saint Lys radio</a></li>	
			<li><a href="/home/daniel/Documents/HTML/Docs/Historique Affichage Digital.pdf" target="_blank">Historique de l'affichage digital (F1DOI)</a></li>		
		</ul>
	</li>
	<li><a href="#">INFORMATIQUE</a>
		<ul>
			<li><a href="/home/daniel/Documents/HTML/Docs/Reparer une Cle USB.pdf" target="_blank">Répérer une clé USB (F1DOI)</a></li>	
			<li><a href="/home/daniel/Documents/HTML/Docs/Messagerie.pdf" target="_blank">Bien utiliser sa messagerie (F6AAP)</a></li>			
			<li><a href="/home/daniel/Documents/HTML/Docs/Linux partie 1.pdf" target="_blank">LINUX alernative à WINDOWS (F6AAP)</a></li>	
			<li><a href="/home/daniel/Documents/HTML/Docs/Gifs.pdf" target="_blank">Les fichiers GIFS dans les messagerie (F1DOI)</a></li>		
		</ul>
	</li>
	<li><a href="#">PETITES ANNONCES</a>
	<li><a href="#">CONTACTS</a><!-- n1 -->
 
	</li>
</ul>	
<div id="conteneur2">
	<div id="conteneur2a">	
		<div id="presentation">	
			<h1>ASSOCIATION DES RADIOAMATEURS DE L'ORNE<br /></h1>
			<h2>ARA-61<br />4, Rue des Erables<br />61000 – ST GERMAIN du CORBEIS<br /></h2>
			<h2>Lieu de réunion*:  Cour du Corbys (derrière la Poste)<br /></h2>
			<h3><a href="#">Le Bureau<br /><a/></h3>
			<table>
				<tr>
					<th class="colonne1"> </th>
					<th class="colonne2"> </th>
					<th class="colonne3"> </th>
				</tr>
				<tr>
					<td style="text-align: right;">Président :</td>
					<td>F5LEY </td>
					<td> </td>
					<td>F4AKO</td>
					<td>: Responsable administratif relais (F6ZCE)</td>
 
				</tr>
				<tr>
					<td style="text-align: right;">Secrétaire :</td>
					<td>F1DOI</td>
					<td> </td>
					<td>F5JLP</td>
					<td>: QSL Manager</td>
				</tr>
				<tr>
					<td style="text-align: right;">Secrétaire adjoint*:</td>
					<td>F8CGY</td>
					<td> </td>
					<td>F5JLS</td>
					<td>: Diplôme Manager*</td>
				</tr>
					<tr>
					<td style="text-align: right;">Trésorier*:</td>
					<td>F1BIO</td>
					<td> </td>
					<td>F4GNN</td>
					<td>: Membre*</td>
				</tr>
					<tr>
					<td style="text-align: right;">Webmaster*:</td>
					<td>F6AAP</td>
					<td> </td>
					<td>F5CTB</td>
					<td>: Membre*</td>
				</tr>
					<tr>
					<td style="text-align: right;">Rédacteur Galène*:</td>
					<td>F4HAQ</td>
					<td> </td>
					<td></td>
					<td></td>
				</tr>
			</table>
			<h4>Pour garder le contact :</h4>
			<h5>QSO de l’ARA-61 tous les mercredis à 20h45 sur le R4 (145,700 Mhz)<br />Diffusion du Bulletin du REF tous les dimanches matin 11 h  sur le R4 (145,700 Mhz) par F5CT</h5>
		</div>
			<div id="infos">
				<h1>DERNIERES INFOS</h1>
				<h2> <a href="/home/daniel/Documents/HTML/Docs/pique-nique du 23-07-2017.pdf" target="_blank"> - Pique-Nique du 23-07-2017 par F5LEY</a></h2>
				<h2> <a href="http://f4dxu.pagesperso-orange.fr/documents-radio/Pilote-antenne.pdf" target="_blank"> - Antenne ATAS par F4DXU </a></h2> <h3>(visitez le site de Jean-Marc, ça en vaut la peine)</h3>	
				<h2> <a href="/home/daniel/Documents/HTML/Docs/Piles-Bouton-Equivalence-IEC.pdf" target="_blank"> - Piles-Bouton-Equivalence-IEC par F5CTB</a></h2>
				<h2> <a href="/home/daniel/Documents/HTML/Docs/ocs/" target="_blank"> - Activité TM61THF 2016</a></h2>
				<h2> <a href="/home/daniel/Documents/HTML/Docs/TM61FDC2016.pdf" target="_blank"> - Compte rendu activation TM61FDC</a></h2>
				<h2> <a href="/home/daniel/Documents/HTML/Docs/Historique Affichage Digital.pdf" target="_blank"> - Historique de l'affichage digital par F1DOI</a></h2>			
			</div>
			<div id="galene">
				<div><img src="/home/daniel/Documents/TEST/Galene page de garde.png"><a href="/home/daniel/Documents/HTML/Docs/GALENE 61 N°73.pdf" target="_blank"></a></div> 
				<h1>Cliquez <a href="/home/daniel/Documents/HTML/Docs/GALENE 61 N°73.pdf" target="_blank">ICI</a> pour ouvrir le numéro de Galène</h1>
			</div>
			<div id="compteur">
				<h1>Vous êtes le</h1>
				<div id="element2e1"><a href="https://www.compteurdevisite.com" title="compteur de visite"><img src="https://counter2.freecounter.ovh/private/compteurdevisite.php?c=tgft8jnh34fzaqpetjf41bgeb4rkdt6y" border="0" title="compteur de visite" alt="compteur de visite"></a>
				<h1>visiteurs</h1>
			</div>
	</body>
</html>

Merci pour vos réponses à venir.

Cordialement

Invité · 16/01/2018, 10h04

Bonjour,

1- Il manque le fichier index.css....
On ne peut toujours pas tester.

2- Corrige :

Code css :

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

1
2
3
4
div#presentation
{
	float:rigth;
...

3- Pour être sémantiquement correct, il faut entourer le menu d'une balise <nav> (navigation)

Code html :

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

1
2
3
4
5
<nav>
  <ul id="menu">
  ...
  </ul>
</nav>

4- Double apostrophe en trop ici :

Code html :

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

	<li><a href="/home/daniel/Documents/HTML/relais.html" target="_blank"">LE RELAIS R4</a>

**JefReb** · 16/01/2018, 11h28

Jreaux62 a tiré plus vite que moi.
Je rajouterais qu'il y a aussi de nombreuses erreurs dans le menu html. Même si les navigateurs sont très conciliant, il faut de la rigueur.
ainsi, juste un exemple:

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
<li><a href="#">INFORMATIONS<img src="images/multi.png" border="0" width="15" height="15" align="absmiddle"></a>
      <ul>
        <li><a href="http://www.eqsl.cc/" target="_blank">Eqsl gestion electronique des QSL</a></li>
        <li><a href="http://www.qrz.com/" target="_blank">QRZ recherche d'indicatifs</a></li>
        <li><a href="http://qrzcq.com/" target="_blank">QRZCQ recherche indicatifs et autres infos</a></li>
        <li><a href="http://www.dxzone.com/dx5641/qrz-ru-russian-hamradio-server.html" target="_blank">QRZRU recherche indicatifs pays de l'est</a></li>     
        li><a href="http://hamcall.net/call" target="_blank">recherche indicatifs les plus connus</a>
        </li>
        <li><a href="http://www.dxinfocentre.com/tropo.html" target="_blank">Prévisions propagation</a></li>
        <li><a href="http://www.hamqsl.com/solar.html" target="_blank">Activité solaire</a></li>
        <li><a href="http://www.udppc.asso.fr/bupdoc/index.php" target="_blank">Bulletin de l'union des physiciens</a></li>
      </ul>
   </li>
    </ul>
</li>

De plus, de nombreux <li> ne sont pas fermés.
Une liste même imbriquée et compliquée doit avoir ses <li> fermés par </li>, même si ça fonctionne.
Du moins c'est mon avis, rigueur oblige. Un oubli d'accord mais beaucoup, cela est dur de corriger ensuite dans un menu aussi long.
ainsi pour rappel:

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
<ul>
  <li>---</li> 
  <li>---
     <ul>
        <li>---
            <ul>
               <li>---</li>
               <li>---</li>
            </ul>
        </li>
        <li>---</li>
        <li>---</li>
     </ul>
  </li>
   <li>---</li> 
</ul>

Dans tous les cas il manque pas mal de css et surtout sur la navigation, puisqu'il manque le css #menu.
Difficile de voir le problème.

**F6AAP** · 16/01/2018, 13h04

Bonjour,

Merci pour vos remarques.

Je suis débutant sur ce sujet et bien sur je vais tenir compte de vos remarques.

Par contre je vous joins l'intégralité de mon code css.

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
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
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
 
#conteneur1
{
	display: flex;
	background-color: #FFFFFF;
	width: 97%;
	border: 2px solid black;
	height: 170px;
	justify-content: center;
	margin-left:20px;
	margin-right: 0px;
}
#conteneur1 img
{
	width :115px;
	height: 170px;
}
#conteneur1 h1
{
	text-align: center;
	font-size: 15px;
	color: #FFFFFF;
}
#conteneur1 h2
{
	text-align: right;
	margin-right: 150px;
	font-size: 15px;
	color: #66FF00;
}
.element:nth-child(2)
{
	flex: 2;
	height: 170px;
	max-width: 100%;
	text-align: center;
	font-size: 28px;
	font-style: bold;
	color: #FFFF00;
	background-image: url(Bandeau-2.jpg);
	background-position: top;
	background-size:cover;
}
 
menu {font: normal .8em/1.5em Arial, Helvetica, sans-serif;background: #ebebeb;width: 97%;margin: 5px auto;color: #666;font-size: 10px;}
#menu {margin: 5px;padding: 7px 6px 0;background: #CC0000 url(../images/gradient.png) repeat-x 0 -110px;line-height: 100%;margin-left:20px; 
	border-radius: 2em;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	-webkit-box-shadow: 0 1px 3px #66FFCC;
	-moz-box-shadow: 0 1px 3px #66FFCC;}
#menu li {margin: 0 5px;padding: 0 0 8px;float: left;position: relative;list-style: none;}
 
/* main level link */
#menu a {font-weight: bold;color: #e7e5e5;text-decoration: none;display: block;padding:  8px 20px;margin: 0; font-size: 10px;
<!	-webkit-border-radius: 1.6em; !>
<!	-moz-border-radius: 1.6em; !>
	text-shadow: 0 1px 1px rgba(0,0,0, .3);}
#menu a:hover {background: #000;color: #fff;}
 
/* main level link hover */
#menu .current a, #menu li:hover > a {background: #66FFCC url(../images/gradient.png) repeat-x 0 -40px;color: #444;border-top: solid 1px #f8f8f8;
	-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
	-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
	box-shadow: 0 1px 1px rgba(0,0,0, .2);
	text-shadow: 0 1px 0 rgba(255,255,255, 1);}
 
/* sub levels link hover */
#menu ul li:hover a, #menu li:hover li a {background: #FFFF00;border: solid 1px #b4b4b4; color: #000000;
	font-size: 9px;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;}
#menu ul a:hover {background: #000000 url(../images/gradient.png) repeat-x 0 -100px !important;
	color: #fff !important;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	text-shadow: 0 1px 1px rgba(0,0,0, .1);}
 
/* dropdown */
#menu li:hover > ul {display: block;}
 
/* level 2 list */
#menu ul {display: none;margin: 0;padding: 0;width: 250px;position: absolute;top: 35px;left: 0;z-index: 1;
	background: #ddd url(../images/gradient.png) repeat-x 0 0;
	border: solid 1px #b4b4b4;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
	box-shadow: 0 1px 3px rgba(0,0,0, .3);}
#menu ul li {float: none;margin: 0;padding: 0;}
 
#menu ul a {font-weight: normal;text-shadow: 0 1px 0 #fff;}
 
/* level 3+ list */
#menu ul ul {left: 246px;top: -3px;}
 
/* rounded corners of first and last link */
#menu ul li:first-child > a {
	-webkit-border-top-left-radius: 9px;
	-moz-border-radius-topleft: 9px;
 
	-webkit-border-top-right-radius: 9px;
	-moz-border-radius-topright: 9px;
}
#menu ul li:last-child > a {
	-webkit-border-bottom-left-radius: 9px;
	-moz-border-radius-bottomleft: 9px;
 
	-webkit-border-bottom-right-radius: 9px;
	-moz-border-radius-bottomright: 9px;
}
 
/* clearfix */
#menu:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
#menu {display: inline-block;} 
html[xmlns] #menu {display: block;}
* html #menu {height: 1%;}
#conteneur2
{
	display: flex;
	background-color: #00FFCC;
	width: 97%;
	border: 2px solid black;
	height: 700px;
	margin-left:20px;
	margin-right: 0px;
	margin-top: 0px;
}
#conteneur2a
{
	display: flex;
	background-color: #00FFCC;
	width: 100%;
	height: 400px;
	margin-left:0px;
	margin-right: 0px;
	margin-top: 0px;
}
div#presentation
{
	float:rigth;
	width:60%;
	height:370px;
	background-color:#FFFFFF;
	border: 2px solid black;
	margin-left:10px;
	margin-right: 0px;
	margin-top: 10px;
	order: 1;	
}
div#presentation h1
{
	font-size: 15px;
	color: #33FF00;
	text-align: center;	
	font-weight: bold;
}
div#presentation h2
{
	font-size: 10px;
	color: #990000;
	text-align: center;	
}
div#presentation h3
{
	font-size: 12px;
	text-align: center;	
}
div#presentation h4
{
	font-size: 11px;
	text-align: left;
	margin-left: 15px;	
}
div#presentation h5
{
	font-size: 9px;
	text-align: left;
	margin-left: 40px;
	font-weight: normal;
	line-height: 12px;	
}
table
{
	border-collapse: collapse;
	border: 1px solid black;
	font-size: 11px;
	margin:  0 auto;
	justify-content: center;
}
div#infos
{
	float: right;
	width:40%;
	height:370px;
	background-color:#FFFFFF;
	border: 2px solid black;
	margin-left:10px;
	margin-right: 0px;
	margin-top: 10px;
	order: 2;
}	
div#infos h1
{
	font-size: 15px;
	color: #66ff00;
	text-align: center;	
	font-weight:bold;
}
div#infos h2
{
	font-size: 10px;
	text-align: left;	
	margin-left: 15px;
	font-weight: normal;
}
div#infos h3
{
	font-size: 8px;
	text-align: left;	
	margin-left: 30px;
	line-height: 4px;	
}
div#galene
{
	float:right;
	width:25%;
	height:370px;
	background-color:#FFFFFF;
	border: 2px solid black;
	margin-left:10px;
	margin-right: 0px;
	margin-top: 10px;
	order: 3;
	z-index: 9;
}
div#galene h1
{
	font-size: 10px;
	text-align: center
}
div#galene img
{
	width: 230px;
	height: 310px;
	margin-top: 0px;
}
div#galene img:hover
{
	width : 400px;
	height: 600px;
}
div#compteur
{
	float: right;
	width:35%;
	height:370px;
	max-width: 100%;
	background-color:#FFFFCC;
	border: 2px solid black;
	margin-left:10px;
	margin-right: 10px;
	margin-top: 10px;
	text-align: center;	
	font-size: 10px;
	z-index: 10;
	order: 4;
}
div#compteur h1
{
	font-size: 12px;
	text-align:center;
}
div#compteur img
{
	width:100px;
	height: 30px; 
	z-index: 10;
}
 
J’espère que celui vous permettra de mieux comprendre d’où vient mon problème de chevauchement.
 
Avec mes remerciements anticipés,
 
Cordialement

Invité · 16/01/2018, 13h31

Bon.

Supprime TOUS les z-index* PARTOUT, SAUF sur le MENU.

* notamment sur div#galene, div#compteur et div#compteur img.

N.B. A partir du moment où un identifiant est UNIQUE, il est inutile d'écrire div#galene.
#galene suffit.

**NoSmoking** · 16/01/2018, 14h34

@JebRef :

...
De plus, de nombreux <li> ne sont pas fermés.
Une liste même imbriquée et compliquée doit avoir ses <li> fermés par </li>, même si ça fonctionne.

la non fermeture des tags peut devenir un atout d'autant que dans le cas des </li> celle ci n'est pas obligatoire dans certaines conditions.
• [W3.org] The li element</a> voir §Tag omission in text/html.

Envoyé par Tag omission in text/html

An <li> element’s end tag may be omitted if the <li> element is immediately followed by another <li> element or if there is no more content in the parent element.

Exemple permettant de voir l'influence de la présence ou non de la fermeture de la balise sur les « whitespace » en mode display:inline.

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><LI> Avec ou sans tag de fin</title>
<meta name="Author" content="NoSmoking">
<style>
html, body {
  margin: 0;
  font: 1em/1.25 Verdana;
}
main {
  display: block;
  margin: 0 auto;
  max-width: 60em;
}
h1, h2 {
  color: #069;
}
code {
  font-family: "Courier new";
  color: #0077aa;
  background: #EFEFEF;
}
ul {
  background: #ECD;
}
li {
  display: inline;
  padding: .25em .5em;
  background-color: #CDE;
}
li +li {
  border-left: 1px solid #000;
}
</style>
</head>
<body>
<main>  
  <h1>Avec ou sans &lt;/li></h1>
  <p>Influence de la présence de la balise de fermeture sur des <code>&lt;li></code> en <code>display:inline</code>.</p>
  <h2>Avec &lt;/li></h2>
  <ul>
    <li>Menu #1</li>
    <li>Menu #2</li>
    <li>Menu #3</li>
  </ul>
  <p>On note la présence du fameux « whitespace ».</p>
  <h2>Sans &lt;/li></h2>
  <ul>
    <li>Menu #1
    <li>Menu #2
    <li>Menu #3
  </ul>
  <p>Dans ce cas le « whitespace » n'est pas présent.</p>
  <h2>Documentation</h2>
  <p>
    <a href="https://www.w3.org/TR/html5/grouping-content.html#the-li-element"><i>[W3.org]</i> The li element</a> voir §Tag omission in text/html
  </p>
</main>
</body>
</html>

**F6AAP** · 16/01/2018, 14h56

Bonjour,

Merci pour les réponses.

J'ai supprimé tous les z-index sauf celui du menu et tout est rentré dans l'ordre.

Je vous remercie tous pour votre contribution.

Cordialement

**JefReb** · 16/01/2018, 16h29

@NoSmocking
Merci, j'en apprends tout le temps.
Difficile d'avoir lu toutes les docs même en anglais. Et c'est pour cela que j'aime bien ce forum.
Si je n'avais pas écrit cette remarque sur la rigueur ... comme quoi faut, jamais avoir peur de s'exprimer.
Encore merci

Superposition du menu sur des conteneurs

CSS

Discussions similaires

Partager

Partager