Discussion :

[yozart]

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:


le code de mon menu:

Site.Master:

Code :

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

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 :

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
 
.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 :

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

<siteMapNode url="~/Website/Default.aspx" title="Home">

ajout d'espaces blancs:

Code :

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

<siteMapNode url="~/Website/Default.aspx" title="&nbsp;&nbsp;Home">

a priori non toléré

Code :

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

<siteMapNode url="~/Website/Default.aspx" title="  Home">

les espaces ne sont pas affichés

[yozart]

Problème résolu. En regardant le code généré, on voit:

Code :

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

1
2
3
4
5
6
7
<table class="staticMenu ctl00_Menu1_4" border="0" cellpadding="0" cellspacing="0" width="100%">
    <tbody>
        <tr>
	    <td style="white-space: nowrap;"><a class="ctl00_Menu1_1 staticMenu ctl00_Menu1_3" href="#" style="border-style: none; font-size: 1em; cursor: text;">Order</a></td>
	 </tr>
    </tbody>
</table>

Il y a 2 appels à la CSS !!!!!

Pour corriger le tir, j'ai donc rajouté dans ma CSS:

Code :

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

1
2
3
4
5
6
7
 
.staticMenu a
{
     width:130px; 
     height: 30px;
     background-image:none;
}

et hop, plus aucun souci, je peux faire des text-align:center sans souci désormais ^^