ASP:Menu images en background
Bonjour à tous,
J'ai un asp:Menu lié à un Sitemap.
Pour faire un menu tout joli, tout beau, je veux mettre une image en fond. Le soucis, c'est que l'image est plus ou moins répétée. Comme s'il y avait plusieurs niveaux.
Voici une impression écran de mon soucis:
http://cjoint.com/data1/1brl8B8FUtV_PB.PNG
le code de mon menu:
Site.Master:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<div id="navigation" class="navigation">
<div class="IEfixForMenu">
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"
Orientation="Horizontal" StaticEnableDefaultPopOutImage="False" StaticMenuItemStyle-CssClass="staticMenu"
DynamicMenuItemStyle-CssClass="staticMenu">
<StaticMenuItemStyle CssClass="staticMenu"></StaticMenuItemStyle>
<StaticSelectedStyle CssClass="staticMenuSel" />
<DynamicMenuItemStyle CssClass="staticMenu"></DynamicMenuItemStyle>
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
</div>
</div> |
Ma 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
|
.navigation
{
width:80%;
height:25px;
position:fixed;
top: 79px;
}
.IEfixForMenu
{
position:relative;
top:0px;
}
.staticMenu
{
width:130px;
height: 25px;
text-align:center;
background-image:url('/Website/Styles/Images/menu.png');
background-repeat:no-repeat;
}
.staticMenuSel
{
width:130px;
height: 25px;
text-align:center;
background-image:url('/Website/Styles/Images/menu_sel.png');
background-repeat:no-repeat;
} |
En enlevant le text-align:center le problème disparait mais alors les textes sont en dehors de mes cases. J'ai essayé avec un padding-left, même soucis.
J'ai voulu contourner le problème en modifiant mon sitemap comme suit
ligne d'origine:
Code:
<siteMapNode url="~/Website/Default.aspx" title="Home">
ajout d'espaces blancs:
Code:
<siteMapNode url="~/Website/Default.aspx" title=" Home">
a priori non toléré
Code:
<siteMapNode url="~/Website/Default.aspx" title=" Home">
les espaces ne sont pas affichés
