Discussion :

[Marc31]

Bonjour à tous,

J'ai pris un code pour réaliser un menu déroulant horizontal et j'aimerais réduire la taille des boutons d'un menu déroulant horizontal.

Si quelqu'un pouvait m'aider? merci

Bonne journée

[Invité]

Bonjour,

essaie :

• Abracadabra !
• Shazam !
• Am Stram Gram !

Si ça ne marche pas, tu peux toujours essayer de... nous montrer ton code (HTML + CSS) ?

[Marc31]

Bonjour,

J'ai testé plusieurs fois :

•Abracadabra !
•Shazam !
•Am Stram Gram !

même en inversant, ça marche pas....dommage....

•Shazam !
•Am Stram Gram !
•Abracadabra !

Voici le 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
<ul id="menu">
 
											<li><a href="#">index1</a>
											</li>
											<li><a href="#">index2</a>
											</li>
											<li><a href="#">index3</a>
												<ul>
													<li><a href="#">sous index3</a></li>
													<img src="images/menu_barre.png" width="176" height="9" align="center">
													<li><a href="#">sous index3 </a></li>
													<img src="images/menu_barre.png" width="176" height="9" align="center">
													<li><a href="#">sous index3</a></li>
												</ul>
											</li>
 
											</ul>

Et 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
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: 20px; /* --- taille police menu texte--- */
 
}
 
#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: 37px 0 0 0px; /* --- permet de decaler le sous menu--- */
z-index: 1000;
max-height: 0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu-demo2 li:hover ul{
max-height:15em;
}
/* 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 29px; /* taille police texte 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; /* change la couleur de la police texte au clique de la souris */
}

[Invité]

Bon.

1/ On ne peut pas mettre de balise <img> (ni autre) ENTRE 2 balises <li>...</li>.

2/ De quels "boutons" parles-tu ?

3/ Modifier quelle taille ?

• dimensions (width / height ) ?
• taille de polices (font-size) ?

Pour obtenir quel résultat ?

4/ font-size: 20px;
Non. On utilisera plutôt des em, ou %.

5/ Code CSS : c'est tout ?
Même en remplaçant #menu-demo2 par #menu (<ul id="menu">), le rendu est... sobre : on ne voit pas de "boutons"...
Il doit y avoir autre chose, non ?

[Marc31]

Les balises <img> me servent à introduire dans les menus déroulants des barres de séparations.

Comment puis je faire autrement?

Je parles des boutons prinicpaux index1, index2, etc....

la taille que prend le bouton pour réduire la taille du menu.

[Invité]

1/ <img>
J'ai bien compris, mais ce n'est pas la bonne méthode.
Ce sont des images "illustratives" (au contraire d'images "descriptive") -> leur place est plutôt en background.

ex. ici :

Code html :

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

1
2
3
4
5
6
7
8
9
    <li><a href="#">index3</a>
      <ul>
        <li><a href="#">sous index3</a></li>
        <li class="menu-hr"></li>
        <li><a href="#">sous index3 </a></li>
        <li class="menu-hr"></li>
        <li><a href="#">sous index3</a></li>
      </ul>
    </li>

Code css :

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

1
2
3
4
5
6
li.menu-hr {
  height:9px;
  padding:0;
  background:url('images/menu_barre.png') center center no-repeat;
  background-size:100% 9px;
}

2/ Réduire la dimension

Code css :

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

1
2
3
4
5
6
7
8
9
10
#menu-demo2, #menu-demo2 ul{
...
font-size: 20px; /* ici */
}
...
#menu-demo2 a{
...
padding:8px 29px; /*  ici */
...
}

3/ COPIER un code, c'est bien.
LE COMPRENDRE, c'est mieux.

Là, je le trouve trop complexe pour ce que tu sembles vouloir en faire
Tu devrais supprimer tout le CSS, puis AJOUTER chaque instruction une à une, afin de comprendre à quoi ça sert.