Discussion :

[HammR]

Bonjour,

Avant toute chose, sachez bien que je débute en CSS .
Le contexte est posé, maintenant, voici mon problème.

J'ai essayé de faire un menu de navigation d'après un modèle (ici).

J'ai essayé de l'adapter en l'intégrant à une balise <nav>, en étirant le menu à toute la largeur de la page, et en centrant l'ensemble des liens contenus dans le menu.
Pour ce faire, je me suis départi du float left, et j'ai utilisé du display inline-block.
Et ça marche TRES BIEN... Jusqu'à un certain point.

En effet, si le menu n'a qu'un seul niveau, tout se passe bien.
Mais dès que j'ajoute un niveau, ça se complique.
En effet, le bloc du lien du deuxième niveau est contenu dans le bloc du lien de premier niveau. Le truc, c'est que lorsque le bloc du deuxième niveau apparaît, il apparaît DANS le bloc du premier niveau, et le redimensionne.
Connaîtriez-vous un moyen pour que le bloc contenu dans un autre bloc s'affiche sans redimensionner son bloc parent ?

[Invité]

Bonjour,
il faudrait voit TON code, et les modifs que tu as faites.

Il se pourrait qu'il manque un position:absolute; quelque part.

[HammR]

Pas bête... Voici mon code :

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
nav
{
	text-align: center;/*On centre l'ensemble des élements sur la barre*/		
}
 
nav ul
{	
	list-style: none; /*On désactive les puces positionnées par défaut*/
	width : 100%; /*La liste prendra la totalité de la largeur de la fenêtre*/
	margin : 0; /*Il n'y aura pas de marge séparant ce block du block précédent*/
	padding : 10px 0 6px 0; /*On ajoute de l'espace entre le bord de la barre et les éléments du menu.*/
	/*Le fond sera un dégradé de noir*/
	background : #111;
	background : -moz-linear-gradient(#444, #111);
	background : -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background : -webkit-linear-gradient(#444, #111);
    background : -o-linear-gradient(#444, #111);
    background : -ms-linear-gradient(#444, #111);
    background : linear-gradient(#444, #111);
	/*Les coins du fond de couleur seront arrondis*/
	-moz-border-radius: 10px;
    border-radius: 10px;
	/*Une ombre portée très légère sera appliquée à la liste*/
	-moz-box-shadow: 0 2px 1px #9c9c9c;
    -webkit-box-shadow: 0 2px 1px #9c9c9c;
    box-shadow: 0 2px 1px #9c9c9c;
	max-height : 5 px;
}
 
nav ul li
{
	display: inline-block; /*chaque élément de la liste est considéré comme un block. Chaque block est positionné l'un à la suite de l'autre.*/
	max-height : 5 px;
}
 
nav ul a
{
	float : left ;
    height : 25px;
	max-height : 5 px;
    padding : 0 25px 0 25px;
    color : #999;
    text-transform : uppercase;
    font : bold 12px/25px Arial, Helvetica;
    text-decoration : none;
    text-shadow : 0 1px 0 #000;
}
 
nav ul li:hover > a
{
        color : #fafafa; /*Lorsqu'un lien est survolé, il s'affiche en gris clair.*/
}
 
nav ul li:hover > ul
{
        display : block;
}
 
nav ul ul 
{
	list-style : none;
    margin : 0;
    padding : 0;
    display : none;
    position : relative;	
    top: 35px;
    left : 0;
    z-index : 99999;
    background : #444;
    background : -moz-linear-gradient(#444, #111);
    background : -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background : -webkit-linear-gradient(#444, #111);
    background : -o-linear-gradient(#444, #111);
    background : -ms-linear-gradient(#444, #111);
    background : linear-gradient(#444, #111);
    -moz-border-radius: 5px;
    border-radius: 5px;
}
 
nav ul ul li
{
    float : none;
    margin : 0;
    padding : 0;
    display : block;
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
 
nav ul ul li:last-child
{
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
 
nav ul ul a
{
    padding : 10px;
    height : auto;
    line-height : 1;
    display : block;
    white-space : normal;
    float : none;
    text-transform : none;
}
 
nav ul ul a:hover
{
        background : #0186ba;
        background : -moz-linear-gradient(#04acec,  #0186ba);
        background : -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
        background : -webkit-linear-gradient(#04acec,  #0186ba);
        background : -o-linear-gradient(#04acec,  #0186ba);
        background : -ms-linear-gradient(#04acec,  #0186ba);
        background : linear-gradient(#04acec,  #0186ba);
}
 
nav ul ul li:first-child a
{
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;	
}
 
nav ul ul li:first-child a:after
{
    content : '';
    position : absolute;
    left : 30px;
    top: -8px;
    width : 0;
    height : 0;
    border-left : 5px solid transparent;
    border-right : 5px solid transparent;
    border-bottom : 8px solid #444;
}
 
nav ul ul li:first-child a:hover:after
{
    border-bottom-color : #04acec;
}
 
nav ul ul li:last-child a
{
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}
 
/* Rétablissement du flottement */
nav ul:after
{
    visibility : hidden;
    display : block;
    font-size : 0;
    content : " ";
    clear : both;
    height : 0;
}

[Invité]

Un code CSS sans son code html associé ne vaut pas grand chose.

Mais à priori, j'avais raison (voir ligne 65 ci-dessus).

Pour info :
nav ul { } : impacte TOUS les ul, quel que soit le niveau (ul ul, ul ul ul,...)
nav > ul { } : n'impacte que le 1er niveau (enfant direct)

Ca ira mieux ainsi : http://codepen.io/jreaux62/pen/yluoA

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
205
206
207
208
209
210
211
212
nav
{
	text-align:center;/*On centre l'ensemble des élements sur la barre*/		
	margin : 0; /*Il n'y aura pas de marge séparant ce block du block précédent*/
	padding : 0;
	/*Le fond sera un dégradé de noir*/
	background : #111;
	background : -moz-linear-gradient(#444, #111);
	background : -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background : -webkit-linear-gradient(#444, #111);
    background : -o-linear-gradient(#444, #111);
    background : -ms-linear-gradient(#444, #111);
    background : linear-gradient(#444, #111);
	/*Les coins du fond de couleur seront arrondis*/
	-moz-border-radius: 10px;
    border-radius: 10px;
	/*Une ombre portée très légère sera appliquée à la liste*/
	-moz-box-shadow: 0 2px 1px #9c9c9c;
    -webkit-box-shadow: 0 2px 1px #9c9c9c;
    box-shadow: 0 2px 1px #9c9c9c;
}
nav > ul
{
	display: inline-block;
	margin: 0 auto;
	padding: 10px 0 0 0;
	list-style: none;  
	height:30px;
}
 
 
nav > ul li
{
	float: left;
	padding: 0 0 10px 0;
	position: relative;
	line-height: 0;
}
 
nav > ul a 
{
	float: left;
	height: 25px;
	padding: 0 25px;
	color: #999;
	text-transform: uppercase;
	font: bold 12px/25px Arial, Helvetica;
	text-decoration: none;
	text-shadow: 0 1px 0 #000;
}
 
nav > ul li:hover > a
{
	color: #fafafa;
}
 
*html nav > ul li a:hover /* IE6 */
{
	color: #fafafa;
}
 
nav > ul li:hover > ul
{
	display: block;
}
 
/* Sub-menu */
 
nav > ul ul
{
    list-style: none;
    margin: 0;
    padding: 0;    
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;    
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);    
    background: -o-linear-gradient(#444, #111);	
    background: -ms-linear-gradient(#444, #111);	
    background: linear-gradient(#444, #111);
    -moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
    box-shadow: 0 0 2px rgba(255,255,255,.5);	
    -moz-border-radius: 5px;
    border-radius: 5px;
}
 
nav > ul ul ul
{
  top: 0;
  left: 150px;
}
 
nav > ul ul li
{
    float: none;
    margin: 0;
    padding: 0;
    display: block;  
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
 
nav > ul ul li:last-child
{   
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;    
}
 
nav > ul ul a
{    
    padding: 10px;
	height: 10px;
	width: 130px;
	height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
	text-transform: none;
}
 
*html nav > ul ul a /* IE6 */
{    
	height: 10px;
}
 
*:first-child+html nav > ul ul a /* IE7 */
{    
	height: 10px;
}
 
nav > ul ul a:hover
{
    background: #0186ba;
	background: -moz-linear-gradient(#04acec,  #0186ba);	
	background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
	background: -webkit-linear-gradient(#04acec,  #0186ba);
	background: -o-linear-gradient(#04acec,  #0186ba);
	background: -ms-linear-gradient(#04acec,  #0186ba);
	background: linear-gradient(#04acec,  #0186ba);
}
 
nav > ul ul li:first-child > a
{
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}
 
nav > ul ul li:first-child > a:after
{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}
 
nav > ul ul ul li:first-child a:after
{
    left: -8px;
    top: 12px;
    width: 0;
    height: 0;
    border-left: 0;	
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-right: 8px solid #444;
}
 
nav > ul ul li:first-child a:hover:after
{
    border-bottom-color: #04acec; 
}
 
nav > ul ul ul li:first-child a:hover:after
{
    border-right-color: #04acec; 
    border-bottom-color: transparent; 	
}
 
 
nav > ul ul li:last-child > a
{
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}
 
/* Clear floated elements */
nav > ul:after 
{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
 
* html nav > ul             { zoom: 1; } /* IE6 */
*:first-child+html nav > ul { zoom: 1; } /* IE7 */

[HammR]

Merci beaucoup, effectivement ça règle le problème.
je vais revoir les cours de CSS pour bien comprendre les subtilités qui me sont passées au dessus.

Je te renouvelle mes remerciements, et te souhaite une bonne journée.

[Invité]

???
Pourquoi chercher ailleurs ce qu'on trouve ici ?

Les cours sur DVP sont bien aussi :

• cours CSS
• FAQ CSS