Discussion :

[sub_zero]

Bonsoir,

Voilà, j'essaye de faire un site en responsive design, pour qu'il s'adapte à toutes tailles d'écran.
Je pense créer deux points de rupture quand la taille de l'écran atteint une certaine limite, mais dans un premier temps, je veux, que lorsqu'on réduit la taille de l'écran progressivement, les différents éléments de la page se réduisent (jusqu'à atteindre le premier point de rupture, représentant, par exemple une tablette graphique de 10 pouces).

Pour parvenir à ce résultat, j'indique la taille de tous mes éléments en pourcentage (de l'élément parent).
Tout à l'air de fonctionner sauf avec mon menu déroulant qui se trouve au centre de ma bannière.

Le problème est qu'au survol (propriété hover), la liste au lieu de s'établir ligne par ligne, s'affiche n'importe comment, horizontalement ou même les éléments de la liste se superposent :



Le problème vient uniquement du fait qu'au lieu d'indiquer une taille en pixel à la liste, j'indique une taille en pourcentage :

Code :

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

1
2
3
4
5
#menu > li li {
	position: relative;
	display:inline-block;
	width: 25%;

Si je remplace par une taille en pixel, ça fonctionne normalement :

Code :

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

1
2
3
4
5
#menu > li li {
	position: relative;
	display:inline-block;
	width: 110px;

Mais je voudrais vraiment indiquer la taille de l'ul en pourcentage, car sinon en pixel, au changement de la taille de l'écran, je n'ai plus l'affichage responsive design voulu.

Voici le 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
#menu a { 
	display:block;
	color: #fff; 
	text-decoration:none;
	text-align: center;
	font-size: 1.5vw;
}
#menu > li,
#menu > li li {
	position: relative;
	display:inline-block;
	width: 25%;
	padding: 1% 2%;
	background-color: #777;
	background-image: linear-gradient(#aaa, #888 50%, #777 50%,#999);
}
#menu > li li { background: transparent none; }
#menu > li li a { color: #444; }
#menu > li li:hover { background:#eee; }
#menu > li:first-child {
	border-right: 1px solid #777;
	border-radius: 8px 0 0 8px;
}
#menu > li + li {
	border-left: 1px solid #aaa;
	border-right: 1px solid #777;
}
#menu > li:last-child {
	border-right:0;
	border-left: 1px solid #aaa;
	border-radius: 0 8px 8px 0 ;
}
#menu > li:hover {
	background-color: #999;
	background-image: linear-gradient(#ccc, #aaa 50%, #999 50%,#bbb);
}
#menu ul {
	position: absolute;
	top: 2.4vw; left:0;
	max-height:0em;	
	margin:0; padding:0;
	background-color: #FFCC00;
	background-image: linear-gradient(#FFCC00,FFCC00);
	overflow:hidden;
	transition: 1s max-height 0.3s;
	border-radius: 0 0 8px 8px;
	z-index: 1;
	
}
#menu > li:hover ul {
	max-height: 13em;
}
.menu_deroulant {
	position: absolute;
	top: 0.6%;
    left: 31%;
	height: 9%;
	width: 39%;
	padding-right: 1%;
}

le code html :

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
<div class="menu_deroulant">
		<ul id="menu">
			<li><a href="developpement-vba.html">Développement</a>
				<ul>
					<li><a href="#">liste1</a></li>
					<li><a href="#">liste2</a></li>
					<li><a href="#">liste3</a></li>
				</ul>
			</li>
			<li><a href="realisations.html">Réalisations</a>
				<ul>
					<li><a href="#">Alstom</a></li>
					<li><a href="#">Orange</a></li>
					<li><a href="#">Eccsel</a></li>
					<li><a href="#">Clip</a></li>
					<li><a href="#">Conseil Général</a></li>
				</ul>
			</li>
			<li><a href="#">Tarifs</a>
				<ul>
					<li><a href="#">liste1</a></li>
					<li><a href="#">liste2</a></li>
				</ul>
			</li>
		</ul>
	</div>

Merci pour une éventuelle idée de comment il est possible que l'affichage du hover puisse se retrouver ainsi désorganisé