Quelles techniques pour faire ce sous-menu ?

1 pièce(s) jointe(s)

Bonsoir,

J'ai un exercice à faire pour les cours de xHTML et CSS2 à rendre fin de semaine et je me demande quelles techniques utiliser pour faire ce sous menu. Je n'arrive pas à le moduler comme je veux avec la méthode du ul li ul li pour faire 2 menus imbriqués. La taille du sous-menu ne veut pas du tout prendre la taille que je souhaite, il reste à la taille du 'li' dont il est issue.

Est-ce une bonne technique que de le faire en div plutôt qu'en 'li' en xHTML ?

Ou avez-vous une technique pour le faire simplement et rapidement ?

Voici ce que je dois faire :

Pièce jointe 193401

Merci.

Bonjour,

ul / li.
Le reste n'est que du CSS.

Indices :
- ul li ul en %
- petite flèche avec :after

J'ai pas réussi à faire la flèche avec le :after.

C'est bon si je fais ça comme ça ?

Code:

1
2
3
4
5
6
7
8
9
10
	#wrap .sous-menu a{
		display: block;
		width: 200px;
		height: 52px;
 		background-image: url('images/arrow.png');
		background-position: 5px 22px;
		background-repeat: no-repeat;
		padding-left: 18px;
		padding-top: 5px;
	}

Du code CSS n'a d'intérêt qu'avec le code HTML associé.

Voir :

Glossaire des propriétés CSS
La galerie CSS
Un menu déroulant en CSS3

et aussi :

CSS triangle generator

1 pièce(s) jointe(s)

Pour le menu c'est fini, j'ai lu les liens que tu as mis et m'ont bien aidé, merci.

J'ai un autre soucis maintenant.

Cette bordure peut se faire en CSS2 ? ou dois-je le faire en image ?

Pièce jointe 193506

Tout à droite c'est une simple bordure blanche donc ça va, entre les deux c'est une bordure de 1px noir et blanc pour chaque div mais celle du haut qui est en noir puis blanche je voudrais savoir la meilleure chose à faire.

Même celle du haut est une bordure double gris/blanc.

Glossaire CSS - II-D. Type de bordure | border-style

Thanks, avec le dégradé je n'avais pas vu que c'était bien la border : groove qui était utilisé.

1 pièce(s) jointe(s)

Et ma dernière question.

Je ne comprends pas pourquoi mes div passent les unes sur les autres...

J'ai tenté le min-height avec un padding-bottom mais ça ne prend pas en compte le contenu de ma div principale et ça ne s'ajuste pas automatiquement. J'ai tenté un display: table mais ça ne fonctionne pas. Peut-être un problème dans mon code.

Si vous avez des améliorations sur mon code à me conseiller, je prends.

Pièce jointe 193526

Je vous le montre :

HTML:

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   <title>Exercice WordAppeal</title>
   <meta name="author" content="Christopher Crosnier" />
   <meta name="description" content="Exercice pour la société WordAppeal en xHTML et CSS2" />
   <link href="exo.css" rel="stylesheet" type="text/css" media="all" />
 
<!--[if IE 8]>
<style type="text/CSS">
#menu li ul {
 position:absolute;
 }
</style>
<![endif]--> 
 
</head>
<body>
	<div id="content-page"> <!-- Conteneur de la page -->
		<div id="header"><!-- Header -->
			<div id="title-img"></div>
			<div id="infos">
				<p>99, rue du Faubourg Saint-Martin</p>
				<p>75010 Paris</p>
				<p><span>Phone:</span> +33 (0)1 43 38 90 20</p> 
				<p><span>Fax:</span> +33 (0)1 43 38 90 23</p> 
				<p><span>Skype:</span> word.appeal</p>
			</div>
			<div id="menu-div">
				<ul id="menu">
					<li class="menu-titre1"><a href="#"></a>
						<ul>
							<li><a href="#">WordAppeal is hiring</a></li>
							<li><a href="#">Le texte de la conférence de Jean<br/> Audouze en ligne !</a></li>
							<li><a href="#">Celebrating 10 years already!<br/> Thank you!</a></li>
						</ul>
					</li>
					<li class="menu-titre2"><a href="#"></a></li>
					<li class="menu-titre3"><a href="#"></a></li>
				</ul>
			</div>
			<div id="accroche">
				<p><span class="color-one">WordAppeal</span> help leading <span class="color-two">European Companies</span> maximise<br/>
				their communications with <span class="color-two">tailored strategies</span> and <span class="color-two">integrated editorial solutions.</span></p>
			</div>
		</div><!-- Fin header -->
 
		<div id="page"><!-- Page -->
			<div id="block-left">
				<div id="block1">
					<div class="text1">
						<h1>WordAppeal is hiring !</h1>
						<p class="text-mini">27 July 2010, by <a href="#" class="color1">Lorraine de Maisonneuve</a></p>
					</div>
					<div class="text2">
						<p>Looking for a new challenge? Want to join a young, dynamic team at a high-growth company?</p><br/>
						<p>Then join the WordAppeal team! Our agency currently has several job and internship opportunities available. Check them out on the <a href="#" class="color1">’Employment Opportunities 2010’</a> section of our website and send your application directly to recrutement@wordappeal.com on our website. You can also find information about our 5-step recruitment process. Get your CV ready!</p>
					</div>
					<div class="links">
						<div class="interactions">
							<a href="#" class="comment">comments</a>
							<a href="#" class="print">print</a>
							<a href="#" class="send">send</a>
						</div>
						<div class="status">
							<a href="#">recruitment</a>
							<a href="#">news</a>
						</div>						
					</div>
				</div>
				<div id="block2">
					<div class="text1">
						<h1>Le texte de la conférence de Jean Audouze en ligne !</h1>
						<p class="text-mini">18 June 2010, by <a href="#" class="color1">Lorraine de Maisonneuve</a></p>					
					</div>
					<div class="text2">
						<p>A l’occasion des 10 ans de WA, nous avons eu le plaisir d’entendre Jean Audouze, de l’Institut d’Astrophysique de Paris (CNRS et UPMC), nous parler des paradoxes du visible et de l’invisible.</p>
						<br/>
						<p>Une conférence pendant laquelle le célèbre astrophysicien a réussi la périlleuse mission de capte l’attention de son auditoire sur trois concepts à la frontière de la physique et de la philosophie. D’une part, la suprématie de l’invisible sur le visible, d’autre part, la perceptibilité accrue de certains invisibles, et enfin, l’apparente « simplicité » de l’invisible qui tranche sur la « complexité » du visible.</p>
						<br/>
						<p>Saviez-vous que l’Homme n’est capable de voir qu’une petite fraction des 3% de matière « ordinaire » atomique composant notre Univers ? Ou que ce que nous appelons les « trous noirs » sont en réalité composées de matières particulièrement chaudes et brillantes ?</p>
						<br/>
						<p>Jean Audouze a également rappelé que notre vision est influencée par notre état d’esprit du moment, et que nous ne voyons que ce que voulons voir…</p>
						<br/>
						<p>Un texte à découvrir absolument en cliquant sur le lien ci-dessous :</p>					
					</div>
					<div class="link-text">
						<a href="#">conference_jean_audouze.pdf</a>
					</div>
					<div class="links">
						<div class="interactions">
							<a href="#" class="comment">comments</a>
							<a href="#" class="print">print</a>
							<a href="#" class="send">send</a>
						</div>
						<div class="status">
							<a href="#">online</a>
							<a href="#">news</a>
						</div>						
					</div>					
				</div>				
			</div>
			<div id="block-right">
				<div id="connexion">
					<h2>Extranet</h2>
					<form method="post" action="">
						<input type="text" id="input-text" name="identifiant"/>
						<input type="password" id="input-pass" name="motdepasse"/>
						<input type="submit" value="LOGIN" id="btn-login"/>
					</form>					
				</div>
				<div id="team">
					<h2>Our team</h2>
					<div id="img-team">
						<div id="line1">
							<img src="images/team_1.jpg" alt="Notre équipier 1"/>
							<img src="images/team_2.jpg" alt="Notre équipier 2"/>
						</div>
						<div id="line2">
							<img src="images/team_3.jpg" alt="Notre équipier 3"/>
							<img src="images/team_4.jpg" alt="Notre équipier 4"/>
						</div>
					</div>
				</div>				
			</div>
		</div><!-- Fin page -->
	</div><!-- Fin conteneur page -->
 
	<div id="footer"><!-- Footer -->
		<div id="content-footer">
		</div>
	</div><!-- Fin footer -->
</body>
</html>

CSS:

Code:

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
288
289
290
291
292
293
294
295
296
297
h1,h2,h3,h4,h5,p,body,ul{
	margin: 0;
	padding: 0;
}
 
body{
	background-image: url('images/background.jpg');
	background-position: left top;
	font-family: arial;
	font-size: 11px;
}
 
span{
	color: #e31b5a;
}
 
#content-page{
	width: 755px;
	height: 500px;
	margin: 0 auto;
	display: table;
}
 
/**** HEADER ****/
 
#title-img{
	background-image: url('images/title-img.png');
	background-position: left top;
	width: 246px;
	height: 45px;
	margin-top: 66px;
	float: left;
}
#infos{
	float: left;
	text-align: right;
	color: #267a88;
	margin-top: 53px;
	margin-left: 349px;
}
 
#menu{
	clear: both;
	padding-top: 25px;
}
	#menu,#menu ul{
		list-style-type: none;
	}
	#menu li{
		float: left;
	}
	#menu li a{
		 display:block;
		 text-decoration:none;	
	}
	#menu ul li{
		border-left: 5px solid #e31b5a;
		margin-left: 13px;
		background-image: url('images/bg-deg.png');
		background-color: #fff;
		background-repeat: repeat-y;
		background-position: right;
	}
	#menu ul li a{
		display: block;
		width: 200px;
		height: 32px;
 		background-image: url('images/arrow.png');
		background-position: 5px 15px;
		background-repeat: no-repeat;
		padding: 13px 0 5px 18px;
 
		border-right: 1px solid #c3c3c3;
	}
	#menu ul li a{
		border-bottom: 1px dashed #267a88;
	}
	#menu ul li:last-child a{
		border-bottom: 1px solid #c3c3c3;
	}
 
	#menu ul{
		display: none;
	}
	#menu li:hover ul{
		display:block;
	}
	#menu li:hover ul li{
		float:none;
	}
	#menu ul{
		position:absolute;
	}
 
	.menu-titre1{
		width: 251px;
		height: 52px;
		background-image: url('images/bg-menu1.png');
	}
		.menu-titre1 a{
			display: block;
			width: 251px;
			height: 52px;
		}
 
	.menu-titre2 a{
		width: 251px;
		height: 52px;
		background-image: url('images/bg-menu2.png');
	}	
	.menu-titre3 a{
		width: 253px;
		height: 52px;
		background-image: url('images/bg-menu3.png');
	}
	#menu ul li a{
		color: #267a88;
	}
	#menu ul li:first-child a:after{ /** Petite flèche **/
		content: '';
		position: absolute;
		left: 120px;
		top: -7px;
		width: 0;
		height: 0;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-bottom: 7px solid #fff;
	}
 
#accroche{
	font-size: 20px;
	color: #797979;
	font-style: italic;
	margin: 87px 0 34px 33px;
}
 
.color-one{
	color: #e31b5a;
}
 
.color-two{
	color: #267a88;
}
 
/**** PAGE ****/
 
#page{
	padding-bottom: 45px;
	min-height: 500px;
	display: table;
}
 
#block-left{
	float: left;
	width: 566px;
	height: 500px;
	font-size: 12px;
}
	#block-left h1{
		color: #e31b5a;
		font-size: 30px;
		font-weight: bold;
	}
 
.text-mini{
	color: #797979;
	font-size: 10px;
}
 
.color1{
	color: #267a88;
}
 
.text2{
	margin-top: 18px;
}
 
/**Block gauche **/
 
#block1, #block2{
	border-top: 2px groove #fff;
	border-right: 2px groove #fff;
	padding: 21px 15px 32px 0;
}
 
.text1 .color1{
	text-decoration: none;
}
 
.link-text a{
	background: transparent url('images/circle-arrow-r.png') 22px top no-repeat;
	padding: 0 0 8px 51px;
	margin-top: 10px;
	color: #267a88;
	width: 200px;
	display: block;
}
 
.links{
	margin-top: 20px;
}
	.comment, .print, .send{
		padding:0 10px 0 22px;
		display: block;
		height: 14px;	
	}
	.comment{
		background: transparent url('images/comment.png') 5px 5px no-repeat;
	}
	.print{
		background: transparent url('images/print.png') 5px 2px no-repeat;		
	}
	.send{
		background: transparent url('images/send.png') 5px top no-repeat;		
	}	
 
.status{
	float: right;
}
 
.interactions a, .status a{
	float: left;
	color: #267a88;
	text-decoration: none;
	font-size: 10px;
}
 
.status a{
	background: transparent url('images/etiquette.png') 5px 3px no-repeat;
	padding:0 15px 0 36px;
	display: block;
	height: 14px;
}
 
/**Block droite**/
#block-right{
	float: left;
	width: 187px;
	height: 500px;
}
 
#block-right h2{
	color: #267a88;
	font-size: 11px;
	font-weight: regular;
	background: transparent url('images/circle-arrow-d.png') 10px 10px no-repeat;
	padding: 13px 0 0 37px;
	display: block;
	height: 20px;
}
 
#connexion, #team{
	border-top: 2px groove #fff;
}
 
#input-text{
	margin: 12px 0 0 23px;
}
 
#input-pass{
	margin: 4px 0 0 23px;
}
 
#btn-login{
	background-color: #267a88;
	color: #FFF;
	border: none;
	font-weight: bold;
	font-size: 11px;
	width: 52px;
	height: 22px;
	margin: 4px 0 20px 118px;
}
 
#img-team{
	margin: 0 0 0 6px;
}
	#img-team img{
		float: left;
 
	}
	#line1 img:first-child, #line2 img:first-child{
		margin-right: 1px;
	}
	#line1 img{
		padding-bottom: 1px;
	}
 
/**** FOOTER ****/
 
#footer{
	background-color: #1e616c;
	width: 100%;
	height: 208px;
	margin-top: 45px;
}

Merci.

Bonjour,

FAQ CSS : Comment faire pour qu'un conteneur englobe ses enfants flottants ?