demande d'explication pour un code css
Bonjour,
voila j'essaye de comprendre le fonction d'un code pour un menu déroulant. J'ai fait des tests pour voir se que ca changer sur mon menu deroulant (changement de couleur, de taille...)Par contre il y a certaine chose je ne sias pas trop a quoi ca sert car quand je le modifie ca ne fais rien.
Tout d'abord je vous met tout mon code en entier
Code : 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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Jour J</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_emeline41.css" />
</head>
<body>
<!-- fond -->
<div id="rubrique">
<div id="menu">
<img src="image/emeline_rub.jpg" style="float: left">
<ul id="menuDeroulant">
<li>
<a href="#">Partie 1</a>
<ul class="sousMenu">
<li><a href="#">castor</a></li>
<li><a href="#">aligator</a></li>
<li><a href="#">musclor</a></li>
</ul>
</li>
<li>
<a href="#">Partie 2</a>
<ul class="sousMenu">
<li><a href="#">whisky</a></li>
<li><a href="#">vodka</a></li>
<li><a href="#">gin</a></li>
<li><a href="#">vin</a></li>
<li><a href="#">champagne</a></li>
</ul>
</li>
<li>
<a href="#">Partie 3</a>
<ul class="sousMenu">
<li><a href="#">pommes</a></li>
<li><a href="#">poires</a></li>
<li><a href="#">ananas</a></li>
<li><a href="#">pamplemousse</a></li>
<li><a href="#">banane</a></li>
<li><a href="#">raisins</a></li>
<li><a href="#">framboises</a></li>
<li><a href="#">fraises</a></li>
<li><a href="#">mirabelles</a></li>
<li><a href="#">groseilles</a></li>
</ul>
</li>
<li>
<a href="#">Partie 4</a>
<ul class="sousMenu">
<li><a href="#">tomates</a></li>
<li><a href="#">haricots</a></li>
<li><a href="#">carrottes</a></li>
<li><a href="#">choux</a></li>
<li><a href="#">concombres</a></li>
<li><a href="#">courgettes</a></li>
<li><a href="#">endives</a></li>
<li><a href="#">navets</a></li>
<li><a href="#">epinards</a></li>
<li><a href="#">avocat</a></li>
</ul>
</li>
</ul>
</div>
</body>
</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
|
body
{
font: 11px verdana, sans-serif;
background: #AFA99B;
margin: 0;
padding: 0;
}
#unite
{
width: 980px;
height: 542px;
margin: auto;
background-image : url("image/fond_emeline.jpg");
background-repeat: no-repeat;
border :2px solid black;
}
#rubrique
{
width: 980px;
height: 542px;
margin: auto;
background-image : url("image/fond_rubrique.jpg");
background-repeat: no-repeat;
border :2px solid black;
}
/* menu deroulant*/
#menuDeroulant/* modifie le block que représente l'ensemble des boutons longeur totale des boutons par exemple*/
{
width: 644px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
position: absolute;/* donne la position par apport au coin de la fenêtre*/
top: 0px; /* à 0px du haut du coin de la fenetre*/
left: 231px;/* à 231px du gauche du coin de la fenetre*/
}
#menuDeroulant li /* modifie qui à lieu sur chaque bouton longeur du boutons, hauteur du bouton..*/
{
float: left;
width: 160px; /* largeur des boutons ici 160px*/
margin: 0px;/*indique la taille de la marge extérieure*/
padding: 0; /*indique la taille de la marge intérieure*/
border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block; /*les blocs se placent toujours l'un en-dessous de l'autre*/
height: 1%;
color: #FFF;
background: #E4E871; /* en off donne sa coleur de fond des boutons*/
margin: 0;
padding: 4px 8px;
border-right: 1px solid #fff;
text-decoration: none;/*Pas de décoration (valeur par défaut)*/
}
#menuDeroulant li a:hover { background-color: #75EC3B; } /* en on et quand le sous menu aparrait donne sa couleur de fond des boutons*/
#menuDeroulant li a:active { background-color: #EC3BD1; }/* quand on clique dessus donne sa couleur de fond des boutons*/
#menuDeroulant .sousMenu li a:link,
body
{
background-color: #FBE3DE;
}
img {
border:0;
}
#menuDeroulant .sousMenu li a:visited
{
display: block;
color: #3B6DEC; /* couleur de la police des sous menus quand ils sont off*/
margin: 0;
border: 0;
text-decoration: none;
}
#menuDeroulant .sousMenu li a:hover
{
background-image: none;
background-color: #EC3BD1;/* en on donne sa couleur de fond des boutons à la cellule de sous menus*/
}
#menuDeroulant .sousMenu li
{
float: none;
margin: 0;
padding: 0;
border: 0;
width: 149px;
border-top: 3px solid transparent;/* donne 3px d'ecart avec la cellure de dessus*/
border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant li:hover > .sousMenu { display: block; } |
voila mes questions
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| #menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block; /*les blocs se placent toujours l'un en-dessous de l'autre*/
height: 1%;
color: #FFF; /*Pourquoi il n'y a que 3 lettres pour la couleurs?*/
background: #E4E871; /* en off donne sa couleur de fond des boutons*/
margin: 0;
padding: 4px 8px; /*Pourquoi il y a 3 dimensions dans le padding?*/
border-right: 1px solid #fff; /*Pourquoi également la 3 dimensions?*/
text-decoration: none;/*Pas de décoration (valeur par défaut)*/
#menuDeroulant .sousMenu
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0; |
A quoi sert toute cette partie. J'ai fait des modifications de dimensions mais rien n'a changer.
Code:
#menuDeroulant li:hover > .sousMenu { display: block; }
Que veut dire cette ligne?
Merci d'avance pour vos explications
