Discussion :

[cyrano_de_bergerac]

Bonjour,

Mon menu est le suivant:

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
 
<asp:Menu ID="mainMenu" runat="server" Orientation="Horizontal" StaticEnableDefaultPopOutImage="False"
                                DynamicHorizontalOffset="5" StaticSubMenuIndent="0">
                                <StaticMenuItemStyle CssClass="staticMenuItem" />
                                <StaticHoverStyle CssClass="staticMenuHover" />
                                <DynamicMenuStyle CssClass="dynamicMenu" />
                                <DynamicHoverStyle CssClass="dynamicMenuHover" />
                                <DynamicMenuItemStyle CssClass="dynamicMenuItem" />
                                <Items>
                                    <asp:MenuItem Value="orders">
                                        <asp:MenuItem Value="newcommand" ImageUrl="../../Images/Menu/picto_nvelle_commande.png" />
                                        <asp:MenuItem NavigateUrl="~/Pages/NotsentCommands.aspx" ImageUrl="../../Images/Menu/picto_non_envoyee.png"
                                            Value="unsentcommand"></asp:MenuItem>
                                        <asp:MenuItem NavigateUrl="~/Pages/CurrentCommands.aspx" ImageUrl="../../Images/Menu/picto_en_cours.png"
                                            Value="currentcommand"></asp:MenuItem>
                                        <asp:MenuItem NavigateUrl="~/Pages/History.aspx" ImageUrl="../../Images/Menu/picto_historique.png"
                                            Value="history"></asp:MenuItem>
                                    </asp:MenuItem>
                                    <asp:MenuItem NavigateUrl="~/Pages/Approval.aspx" Value="myapprovals"></asp:MenuItem>
                                    <asp:MenuItem NavigateUrl="~/Pages/Delegation.aspx" Value="delegation"></asp:MenuItem>
                                    <asp:MenuItem Value="admin">
                                        <asp:MenuItem ImageUrl="../Images/Menu/picto_delegation.png" Value="delegAdministration">
                                        </asp:MenuItem>
                                        <asp:MenuItem ImageUrl="../Images/Menu/picto_admin.png" Value="approAdministration">
                                        </asp:MenuItem>
                                    </asp:MenuItem>
                                </Items>
                            </asp:Menu>

Et le code CSS associé:

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
 
.staticMenuItem
{
	width: 157px;
	height: 33px;
	text-align: center;
	vertical-align:middle;
	background-image: url(../Images/Menu/btn_menu_normal.png);
	background-repeat: no-repeat;
	color: #ffffff;
	font-family: Arial;
	font-size: 12px;
}
 
.staticMenuHover
{
	width: 157px;
	height: 33px;
	text-align: center;
	vertical-align:middle;
	background-image: url(../Images/Menu/btn_menu_pushed.png);
	background-repeat: no-repeat;
	color: #ffffff;
	font-family: Arial;
	font-size: 11px;
}
 
.dynamicMenu
{
	width: 147px;
	/*height: 33px;*/
	/*text-align: left;
	vertical-align:middle;*/
	background-image: url(../Images/Menu/sous-menu.png);
	background-repeat: repeat-y;
	/*color: #ffffff;
	font-family: Arial;
	font-size: 12px;*/
	z-index:10;
}
 
.dynamicMenuItem
{
	width: 147px;
	height: 33px;
	text-align: left;
	vertical-align:middle;
	background-image: url(../Images/Menu/sous-menu.png);
	background-repeat: repeat-y;
	color: #ffffff;
	font-family: Arial;
	font-size: 12px;
	z-index:10;
}
 
.dynamicMenuHover
{
	width: 147px;
	height: 33px;
	text-align: left;
	vertical-align:middle;
	background-image: url(../Images/Menu/sous-menu.png);
	background-repeat: repeat-y;
	color: #dfdfdf;
	font-family: Arial;
	font-size: 11px;
	z-index:10;
}

J'ai plusieurs questions:

Avec le background-image sur mes static items, le texte apparait sur un petit cadre gris, comme le montre l'image ci-dessous:

Si je remplace le background-image par un background-color noire, je n'ai plus ce problème...

J'ai du mal à comprendre l'imbrication des dynamic items sous les static items.
Le width de mon static item est de 157px (défini en CSS, aussi la largeur de mon image en background-image).
Le width de mon dynamic item est de 147px (défini en CSS, aussi la largeur de mon image en background-image).
Et j'ai DynamicHorizontalOffset="5".
Pourquoi donc, avec ces valeurs, mes static items et mes dynamics items sont alignés, et en plus les dynamic items prennent la même largeur que mes static items, comme le montre l'image suivante:

?
Je m'attendais plus à voir les dynamic items, un peu décalé à droite par rapport au static item, et ne dépassant pas le bord droite de mon static item: 147 (width dynamic item) + 5 (DynamicHorizontalOffset) < 157 (width static item).
Si je mets mon DynamicHorizontalOffset à 0, mes dynamic items sont plus à gauche par rapport aux statics items, alors que je m'attendais à ce qu'ils soient alignés, alignement que j'ai avec un DynamicHorizontalOffset à 5 justement...

Enfin, je ne comprends pas trop dans ma CSS la différence entre DynamicMenuStyle et DynamicMenuItemStyle, j'ai cherché sur internet en plus de msdn, ça ne me parait pas claire...

Merci d'avance!