Discussion :

[Marc31]

BOnjour,

Je suis en train de faire un site qui s'adapte en fonction de la taille de l'écran mais mon menu horizontal ne suit pas.

Je ne sais pas qu'elle valeur je dois modifier pour faire ceci?

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
#menu-demo2, #menu-demo2 ul{
padding: 0;
margin: 0;
list-style:none;
text-align:center;
font-size: 1.20em; /* ---22 px taille police menu texte - voir 1.35em--- */
 
}
 
#menu-demo2 li{
display: inline-block; /* --- positionne les boutons de façon horizontal--- */
position:relative;
border-radius:4px 4px 0 0;
 
 
}
 
#menu-demo2 ul li{
display:inherit;
border-radius:0;
 
 
}
#menu-demo2 ul li:hover{
border-radius:0;
 
 
 
}
#menu-demo2 ul li:last-child{
/*border-radius:0 0 8px 8px;*/ /* --- permet de rendre le menu carré--- */
 
 
}
#menu-demo2 ul{
position:absolute;
margin: 33px 0 0 0px; /* --- permet de decaler le sous menu--- */
z-index: 1000;
max-height: 0;
left: 0;
right: 0;
overflow: hidden;		/* --- hidden--- */
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu-demo2 li:hover ul{
max-height:15em; /* --- Longueur du menu vers le bas defilement--- */
}
/* background des liens menus */
#menu-demo2 li:first-child{
background-color: #FFFFFF;
/*background-image:-webkit-linear-gradient(top, #65537A 0%, #2A2333 100%);*/
/*background-image:linear-gradient(to bottom, #65537A 0%, #2A2333 100%);*/
}
#menu-demo2 li:nth-child(2){
background-color: #FFFFFF;
/*background-image: -webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);*/
/*background-image:linear-gradient(to bottom, #729EBF 0%, #333A40 100%);*/
}
#menu-demo2 li:nth-child(3){
background-color: #FFFFFF;
/*background-image:-webkit-linear-gradient(top, #F6AD1A 0%, #9F391A 100%);*/
/*background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);*/
}
#menu-demo2 li:last-child{
background-color: #FFFFFF;
/*background-image:-webkit-linear-gradient(top, #CFFF6A 0%, #677F35 100%);*/
/*background-image:linear-gradient(to bottom, #CFFF6A 0%, #677F35 100%);*/
}
/* background des liens sous menus */
#menu-demo2 li:first-child li{
background:#FFFFFF;
}
#menu-demo2 li:nth-child(2) li{
background:#FFFFFF;
}
#menu-demo2 li:nth-child(3) li{
background:#FFFFFF;
}
#menu-demo2 li:last-child li{
background:#FFFFFF;
}
/* background des liens menus et sous menus au survol */
#menu-demo2 li:first-child:hover, #menu-demo2 li:first-child li:hover{
background:#FFFFFF;
}
#menu-demo2 li:nth-child(2):hover, #menu-demo2 li:nth-child(2) li:hover{
background:#FFFFFF;
}
#menu-demo2 li:nth-child(3):hover, #menu-demo2 li:nth-child(3) li:hover{
background:#FFFFFF;
}
#menu-demo2 li:last-child:hover, #menu-demo2 li:last-child li:hover{
background:#FFFFFF;
}
/* les a href */
#menu-demo2 a{
text-decoration:none;
display:block;
padding:8px 12px; /* 16 taille du contenant 32*/
color:#383836;  /* couleur police texte */
font-family:arial;
}
#menu-demo2 ul a{
padding: 8px 0; /* longueur du menu defilant */
 
}
#menu-demo2 li:hover li a{
color:#383836; /* couleur police texte */
text-transform:inherit;
}
#menu-demo2 li:hover a, #menu-demo2 li li:hover a{
color:#383836; /* change la couleur de la police texte au survol de la souris */
}
 
#menu-demo2 a:focus
{
	color: #e20000;

Bonne journée, merci

[Invité]

Bonjour,

un code CSS SANS le code HTML associé n'a aucun intérêt.

Merci.

[Marc31]

Voici le code 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
<ul id="menu-demo2">
  <li><a href="index.php">Accueil</a>
  </li>
  <li>
    <a href="#">Autres</a>
    <ul>
      <li><a href="#">Autres</a></li>
      <img src="images/menu_barre.png" width="100%" height="10" align="center">
      <li><a href="#" target="_blank">Autres</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Nos équipes</a>
    <ul>
      <li><a href="#">Autres</a></li>
      <img src="images/menu_barre.png" width="100%" height="10" align="center">
      <li><a href="#">Autres </a></li>
      <img src="images/menu_barre.png" width="100%" height="10" align="center">
      <li><a href="#">Autres</a></li>
    </ul>
  </li>
  <li><a href="#">Autres</a>
  </li>
  <li><a href="#">Autres</a>
  </li>
  <li>
    <a href="#">Autres</a>
    <ul>
      <li><a href="#">Autres</a></li>
      <img src="images/menu_barre.png" width="100%" height="10" align="center">
      <li><a href="#">Autres</a></li>
      <img src="images/menu_barre.png" width="100%" height="10" align="center">
      <li><a href="#">Autres</a></li>
    </ul>
  </li>
  <li><a href="#">Autres</a>
  </li>
  <li><a href="#"><img src="images/loupe.png" width="31" height="27" align="center"></a>
  </li>
</ul>

[Invité]

Tel quel, il est responsive : http://codepen.io/jreaux62/pen/PWejpE

A moins que ça vienne d'un bout de CSS que tu ne montres pas...

[Marc31]

merci et il est dans une autre balise qui englobe plusieurs choses div ="menu"

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
#menu
{
	border: 0px solid white;
	/*overflow: auto; /*float: left;*/
	margin-right: 0px;
	background-color: #FFFFFF;
	margin-left: 0px;/*10 px*/
 
 
 
}
 
#menu h3
{
	text-align: center;
	margin: 5px 0 10px 0;
}
 
#menu ul
{
	padding: 0 5px 0 5px;
}