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!

[Ramajb]

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.

[cyrano_de_bergerac]

Difficile a comprendre.

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 :

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

1
2
 
<StaticHoverStyle CssClass="staticMenuHover" />

Code :

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

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.