demande d'explication pour un code css

**gaya102** · 03/03/2009, 12h00

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 :

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
 
 
<!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 :

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
 
 
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 :

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
#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 :

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

#menuDeroulant li:hover > .sousMenu { display: block; }

Que veut dire cette ligne?

Merci d'avance pour vos explications

**Ethyde** · 03/03/2009, 15h27

Code :

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

1
2
3
4
5
6
7
8
9
10
#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)*/

Dans l'ordre :

Pour les valeur de couleur en hexa si les 6 caractères sont identique seul les trois premier suffise. Cependant pour éviter certain probleme d'intepretation il est conseillé de mettre les 6.

Pour le padding je te renvoie aux Dimensions des boîtes qui est valable pour les padding, mais aussi margin, border et autres .

Pour le border ici uniquement celui de droite, il est inutile de definir les autres car un peu avant dans #menuDeroulant li il y a mention de border:0;

Code :

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

1
2
3
4
5
6
7
#menuDeroulant .sousMenu
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;}

La mention display:none; fait que tu peu modifier tout ce que tu veux dedans de toute façon en l'état tu ne le verras jamais car c'est

Code :

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

#menuDeroulant li:hover > .sousMenu { display: block; }

qui rend ton .sousMenu visible.

**gaya102** · 03/03/2009, 19h17

Code :

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

#menuDeroulant li:hover > .sousMenu { display: block; }

A quoi sert le > je pensais que c'était un = qu'il fallait

merci de ton aide

**Alt157** · 03/03/2009, 21h10

Bonsoir,

A priori c'est un sélecteur d'enfant. Dans ton cas cela veut dire que le style est appliqué aux .sousMenu enfants d'un li:hover appartenant au menuDeroulant

Parait également que IE ne reconnait pas la syntaxe.

Bonne soirée

**gaya102** · 03/03/2009, 22h39

merci de ton aide
Effectivement je viens de voir que IE ne la reconnais pas

. Je vais chercher autre chose pour faire un menu déroulant qui fonctionne sous IE

demande d'explication pour un code css

CSS

Discussions similaires

Partager

Partager