Petit probleme menu et CSS

[MrSlave]

Bonjour,

J'ai un petit problème pour limiter la taille d'une div qui contient un menu ASP.Net

En gros, j'ai :

Code :

1
2
3
4
5
6
7
8
9
10
11
 
                    <div id="border">
 
                    <asp:Menu ID="Menu_accueil" runat="server" Orientation="Horizontal" 
                            onmenuitemclick="Menu_accueil_MenuItemClick" CssClass="ongletmenu">
                    <StaticMenuStyle CssClass="ongletmenu" />
                    <StaticSelectedStyle CssClass="ongletmenuSelected" />
                    <StaticHoverStyle CssClass="ongletmenuHover" />
                    </asp:Menu>
 
                    </div>

Et dans ma css :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
#border 
{
	width:795px;
	border:solid 2px #c2dcff;
}
 
/*Menu*/
.ongletmenu{
background-image:url("../images/menu/menuUnselected.gif");
background-repeat:repeat-x;
font-family:Arial;
font-size:9pt; 
font-weight:bold;
background-color:#e2efff;
color:#003399;
}

Et le code

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
 
            //On efface l'ancienne liste d'onglets
            Menu_accueil.Items.Clear();
 
            List<Onglet> lstOnglets = AccesOnglets.getLstOnglets();
 
            foreach (Onglet onglet in lstOnglets)
            {
                MenuItem menuItem = new MenuItem();
                menuItem.Text = onglet.Libelle;
                menuItem.Value = onglet.IdOnglet.ToString();
                Menu_accueil.Items.Add(menuItem);
}

Ce que j'aimerai, c'est que mon menu fasse un retour chariot lorsque sa taille dépasse 795px. Or là, il dépasse les 800px sans rien pour l'arrêter.
J'ai essayé avec overflow, max-width, ... et un tas d'autres attributs mais rien ne semble pouvoir le forcer à faire ce retour chariot.
Le menu devient vite énorme et dépasse la largeur de ma page.

Si quelqu'un avait une idée, je lui en serais grandement reconnaissant.

Je vous remercie d'avance.

[ornitho13]

de quoi est composé ton menu en terme HTML ?
Si c'est un

Code :

<ul><li>...</li>...</ul>

tu peux rajouter un

Code :

float:left

sur les

Code :

<li>

, ce qui mettra à la ligne les onglets dépassants.

Ceci dit, si tu peux donner le code HTML généré, on verrait mieux ce qui se passe

[MrSlave]

Je te remercie de ta réponse ornitho13.

Voilà le code qui est généré :

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
 
<a href="#ctl00_Menu_accueil_SkipLink"><img alt="Ignorer les liens de navigation" src="/WebResource.axd?d=yXiRQBdwQJFqVdp075lF80Oc2wDgmHY1qWdQXdkATj0d1cUrvc9EMhIO0OSCzhiuOgxdBZ_iHnGq0ZY8CPGZpmnFzaI1&amp;t=634382897449801781" width="0" height="0" style="border-width:0px;" /></a><table id="ctl00_Menu_accueil" class="ongletmenu ongletmenu ctl00_Menu_accueil_3 ctl00_Menu_accueil_2" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_Menu_accueiln0"><table class="ongletmenuSelected ctl00_Menu_accueil_5" cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
				<td style="white-space:nowrap;"><a class="ctl00_Menu_accueil_1 ongletmenuSelected ctl00_Menu_accueil_4" href="javascript:__doPostBack('ctl00$Menu_accueil','1')" style="border-style:none;font-size:1em;">Accueil</a></td>
			</tr>
		</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_Menu_accueiln1"><table cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
				<td style="white-space:nowrap;"><a class="ctl00_Menu_accueil_1" href="javascript:__doPostBack('ctl00$Menu_accueil','2')">Espace bureau</a></td>
			</tr>
		</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_Menu_accueiln2"><table cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
				<td style="white-space:nowrap;"><a class="ctl00_Menu_accueil_1" href="javascript:__doPostBack('ctl00$Menu_accueil','10')">@DONIS</a></td>
			</tr>
		</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_Menu_accueiln3"><table cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
				<td style="white-space:nowrap;"><a class="ctl00_Menu_accueil_1" href="javascript:__doPostBack('ctl00$Menu_accueil','11')">OngletMetier 4</a></td>
			</tr>
		</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_Menu_accueiln4"><table cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
				<td style="white-space:nowrap;"><a class="ctl00_Menu_accueil_1" href="javascript:__doPostBack('ctl00$Menu_accueil','13')">OngletMetier 5</a></td>
			</tr>
		</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_Menu_accueiln5"><table cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
				<td style="white-space:nowrap;"><a class="ctl00_Menu_accueil_1" href="javascript:__doPostBack('ctl00$Menu_accueil','16')">OngletMetier 514</a></td>
			</tr>
		</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_Menu_accueiln6"><table cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
				<td style="white-space:nowrap;"><a class="ctl00_Menu_accueil_1" href="javascript:__doPostBack('ctl00$Menu_accueil','17')">OngletMetier 51</a></td>
			</tr>
		</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_Menu_accueiln7"><table cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
				<td style="white-space:nowrap;"><a class="ctl00_Menu_accueil_1" href="javascript:__doPostBack('ctl00$Menu_accueil','18')">OngletMetier 6</a></td>
			</tr>
		</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_Menu_accueiln8"><table cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
				<td style="white-space:nowrap;"><a class="ctl00_Menu_accueil_1" href="javascript:__doPostBack('ctl00$Menu_accueil','19')">TestOnglet1</a></td>
			</tr>
		</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_Menu_accueiln9"><table cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
				<td style="white-space:nowrap;"><a class="ctl00_Menu_accueil_1" href="javascript:__doPostBack('ctl00$Menu_accueil','20')">TestOnglet45</a></td>
			</tr>
		</table></td>
	</tr>
</table><a id="ctl00_Menu_accueil_SkipLink"></a>

Quand aux balises <ul> et <li>, je n'en créer pas.
Le menu en entier est généré automatiquement avec le code que j'ai mis auparavant. :s

[ornitho13]

Si tu passes par un tableau cela ne fonctionnera pas

[MrSlave]

Le problème c'est que je n'ai pas choisi d'ajouter un tableau.

J'ai simplement ajouté un objet "menu" de la boite à outil, et je rajoute des items à ce menu.
C'est l'objet en lui-même qui gère ses items.