Discussion :

[lemirandais]

Bonjour à tous

Depuis environ 2 semaines, j'essai de corriger un petit bug de mon menu déroulant, je n'arrive pas à repérer mon erreur. Regardez mon menu:
http://ecole.leknoppix.fr/ (page testé que sous firefox et chrome)
J'ai un décalage dans mon sous menu et de plus, j'ai un contour arrondi autour de mes liens, que je n'arrive pas à supprimer.
Un peu d'aide serait la bienvenu.
Voici mon 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
 
#menulist .sousmenu
{
	display: none;
	position: absolute;
}
ul#menulist
{
    position:absolute;
    left: 236px;
    float:left;
}
#menu ul#menulist li
{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */;
    list-style: none;
    display: inline-block;
    margin-left:15px;
    margin-right:15px;
}
#menu ul#menulist li a{
    color:white;
    font-family: 'Niconne', cursive;
    font-size:20px;
    font-weight:normal;
    text-decoration: none;
    padding-left:5px;
    padding-right:5px;
}
#menu ul#menulist li a.current, #menu ul#menulist li:hover a
{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */;
    color:#ffce00;
    height: 25px;
    -webkit-border-radius: 8px/8px;
    -moz-border-radius: 8px/8px;
    border-radius: 8px/8px;
    background-color: #5f5723;
    -webkit-box-shadow: 0 0 2px rgba(0,130,200,.75), inset 0 2px 2px rgba(0,0,0,.5);
    -moz-box-shadow: 0 0 2px rgba(0,130,200,.75), inset 0 2px 2px rgba(0,0,0,.5);
    box-shadow: 0 0 2px rgba(0,130,200,.75), inset 0 2px 2px rgba(0,0,0,.5);
    background-image: -webkit-linear-gradient(bottom, #075f9f, #004695);
    background-image: -moz-linear-gradient(bottom, #075f9f, #004695);
    background-image: -o-linear-gradient(bottom, #075f9f, #004695);
    background-image: -ms-linear-gradient(bottom, #075f9f, #004695);
    background-image: linear-gradient(to top, #075f9f, #004695);
}
#menu ul#menulist ul.sousmenu li, #menu ul#menulist ul.sousmenu li a
{
	background: url('../img/fond_menu.png');
	width:149px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	height: 26px;
	line-height:26px;
}
#menu ul#menulist ul.sousmenu li:hover
{
	width:149px;
	background: url('../img/fond_menu_hover.png');
	height: 26px;
	line-height:26px;
	color:white;
}
#menu ul#menulist li:hover > .sousmenu
{
	display: block;
}
#menu ul#menulist .sousmenu li
{
	display: block;
	top:15px;
	position: relative;
}

Merci d'avance.
lemirandais

[rodolphebrd]

Bonjour,

vous pourriez rajouter un left:

Code :

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

1
2
3
4
5
6
#menu ul#menulist .sousmenu li {
  display: block;
  top: 15px;
  position: relative;
  left: -60px;
}

Les coins arrondis proviennent d'ici :

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
#menu ul#menulist li a.current, #menu ul#menulist li:hover a
{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */;
    color:#ffce00;
    height: 25px;
    -webkit-border-radius: 8px/8px;
    -moz-border-radius: 8px/8px;
    border-radius: 8px/8px;
    background-color: #5f5723;
    -webkit-box-shadow: 0 0 2px rgba(0,130,200,.75), inset 0 2px 2px rgba(0,0,0,.5);
    -moz-box-shadow: 0 0 2px rgba(0,130,200,.75), inset 0 2px 2px rgba(0,0,0,.5);
    box-shadow: 0 0 2px rgba(0,130,200,.75), inset 0 2px 2px rgba(0,0,0,.5);
    background-image: -webkit-linear-gradient(bottom, #075f9f, #004695);
    background-image: -moz-linear-gradient(bottom, #075f9f, #004695);
    background-image: -o-linear-gradient(bottom, #075f9f, #004695);
    background-image: -ms-linear-gradient(bottom, #075f9f, #004695);
    background-image: linear-gradient(to top, #075f9f, #004695);
}

Note : le background image ne sert à rien ici :

Code :

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

1
2
3
4
5
6
7
8
9
#menu ul#menulist ul.sousmenu li, #menu ul#menulist ul.sousmenu li a
{
	background: url('../img/fond_menu.png');
	width:149px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	height: 26px;
	line-height:26px;
}

[lemirandais]

Merci pour cette réponse.
Concernant les bords arrondis, je viens de trouver mais je vois pas comment les désactivés pour l'élément fils (.sousmenu).

De plus, le background-image du sous menu est "obligatoire" puisque sinon, je n'aurais pas le rendu attendu.
Voici le menu que je devrais avoir au final:

lemirandais

[Invité]

Bonjour,
pour n'appliquer un style qu'aux enfants directs :

Code css :

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

1
2
3
4
5
6
/* menu */
#menu ul#menulist > li {...}
#menu ul#menulist > li > a {...}
/* sous-menu */
#menu ul#menulist > li > ul > li {...}
#menu ul#menulist > li > ul > li > a {...}

[lemirandais]

Bonjour,
pour n'appliquer un style qu'aux enfants directs :

Code css :

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

1
2
3
4
5
6
/* menu */
#menu ul#menulist > li {...}
#menu ul#menulist > li > a {...}
/* sous-menu */
#menu ul#menulist > li > ul > li {...}
#menu ul#menulist > li > ul > li > a {...}

Merci cela marche très bien.

Pour rodolphebrd, sur la photo cela ne se voit pas, mais tu as une petite ombre portée.

Merci beaucoup

lemirandais

[Invité]

L'ombre portée peut AUSSI se faire en CSS !
=> box-shadow (ou text-shadow sur un texte)

Concernant les sous-menus décalés :
PAR DEFAUT, les <ul> ont un padding-left.

POUR EVITER d'être gêné par ces valeurs par défaut, on peut mettre en tout début de fichier CSS :

Code css :

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

* { margin:0; padding:0; border:0; }

[rodolphebrd]

Désactiver le border-radius initial et créer la règle suivante :

Code :

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

1
2
3
#menulist>li>a {
   border-radius: 8px;
}

De plus, le background-image du sous menu est "obligatoire" puisque sinon, je n'aurais pas le rendu attendu.

Placer une image en background qui est une couleur n'est pas judicieux.
Autant utiliser la couleur directement dans le background (background:bleu;)