asp menu avec background-image et espacement des items

2 pièce(s) jointe(s)

Bonjour, :)

Voici le menu que j'ai visuellement:
http://www.developpez.net/forums/att...1&d=1302532026

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:
http://www.developpez.net/forums/att...1&d=1302532688

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:

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:

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

Citation:

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.

Difficile a comprendre.:zzz:

Citation:

Envoyé par Ramajb

Difficile a comprendre.:zzz:

En gros, si tu regardes la 2ème image, j'ai un background-image sur l'item Commande. ça c'est ce que je voulais.
Par contre, le background-image s'applique aussi sur le texte même "Commande".

Tout ça à cause de:
Code:

1 2 <StaticHoverStyle CssClass="staticMenuHover" />
Code:

1 2 3 4 5 6 7 8 9 .staticMenuHover { background-image: url(../Images/Menu/btn_menu_pushed.png); /*147*24px*/ background-repeat: no-repeat; color: #dfdfdf; font-family: Arial; font-size: 11px; }
Bref, comment faire pour que le background-image ne s'applique pas une seconde fois sur le texte même?

Je trouve que le composant asp menu nous limite pas mal, ou qu'il faut pas mal bidouiller pour avoir le résultat attendu.