Discussion :

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

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

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 :

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

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

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 :

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

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

tu peux rajouter un

Code :

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

float:left

sur les

Code :

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

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

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