Discussion :

[cyrano_de_bergerac]

Bonjour,

Voici le menu que j'ai visuellement:


J'ai été obligé de mettre un background-image en repeat sur l'ensemble du menu horizontal (StaticMenuStyle), car quand je mets le background-image sans repeat sur chaque item (StaticMenuItemStyle), je l'ai bien, mais je l'ai de nouveau en background-image du texte de mon item.
D'ailleurs, le problème est le même pour le hover:


Bref, j'aimerai avoir un vrai background-image pour chaque item, et qu'il y ait un espace blanc entre chaque item.

Voici le code de mon menu:

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
 
                                        <asp:Menu ID="mainMenu" runat="server" Orientation="Horizontal" StaticEnableDefaultPopOutImage="False"
                                            DynamicHorizontalOffset="0" StaticSubMenuIndent="0" OnMenuItemClick="OnMenuItemClick">
                                            <StaticMenuStyle CssClass="staticMenu" />
                                            <StaticMenuItemStyle CssClass="staticMenuItem" />
                                            <StaticHoverStyle CssClass="staticMenuHover" />
                                            <DynamicMenuStyle CssClass="dynamicMenu" />
                                            <DynamicMenuItemStyle CssClass="dynamicMenuItem" />
                                            <DynamicHoverStyle CssClass="dynamicMenuHover" />
                                            <Items>
                                                <asp:MenuItem Value="orders">
                                                    <asp:MenuItem Value="newcommand" />
                                                    <asp:MenuItem NavigateUrl="~/Pages/NotsentCommands.aspx" Value="unsentcommand"></asp:MenuItem>
                                                    <asp:MenuItem NavigateUrl="~/Pages/CurrentCommands.aspx" Value="currentcommand">
                                                    </asp:MenuItem>
                                                    <asp:MenuItem NavigateUrl="~/Pages/History.aspx" Value="history"></asp:MenuItem>
                                                </asp:MenuItem>
                                                <asp:MenuItem NavigateUrl="~/Pages/Approval.aspx" Value="myapprovals"></asp:MenuItem>
                                                <asp:MenuItem Value="admin">
                                                    <asp:MenuItem Value="delegAdministration"></asp:MenuItem>
                                                    <asp:MenuItem Value="approAdministration"></asp:MenuItem>
                                                </asp:MenuItem>
                                            </Items>
                                        </asp:Menu>

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

Merci pour votre éclairage!