problème affichage menu dans pages asp.net (côté code HTML et CSS)

**Sardonics** · 08/12/2016, 14h38

Bonjour, je suis entrain de programmer une application web asp.net (c#) (sous VS2010 et pc en win7).

j'ai plusieurs soucis avec l'affichage de mes menus. (mon application web doit ressembler à une application android ou pc avec un menu à gauche 3 barres horizontales et un menu à droite 3 points alignés verticales)

1) pas de pb pour le menu de gauche il se déploie bien à gauche de la page, par contre le menu droit qui devrait s'afficher à droite reste à gauche de la page

2) lorsque que je fais apparaître ces menus, il n'apparait pas au dessus du corps de la page mais au contraire fais descendre celle-ci de la hauteur du menu.

je vous mets ici mon code HTML et 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
 
<body>
    <form id="form1" runat="server">
    <div data-role="page" data-theme="a">
        <div id="header" class="right">
            <a id="icon_info_gauche">
                <img src="images/SIMAT.png" style="height: 35px; width: 80px">
            </a>
            <a id="icon_menu_gauche" style="color: #FFFFFF">
                <img src="images/icon_menu.jpg">MENU 
           </a>
           <a id="icon_info_droit">
                    <asp:Label ID="Label" runat="server" Font-Bold="True" Font-Underline="False" ForeColor="White"></asp:Label>
                    <asp:ImageButton ID="Panier" runat="server" Height="28px" ImageUrl="~/images/panier.png" Width="28px" OnClick="Panier_Click" />
           </a>
           <a id="icon_menu_droit">
                    <img src="images/icon_info.jpg">
           </a>
            <h1>
                &nbsp;
            </h1>
            <div class="bandeau_simat">
                <img src="images/marianne.gif">
            </div>
        </div>
 
        <div id="menu_gauche" class="menu_panel">
            <ul>
                <li><a href="Accueil.aspx"><img src="images/taguer.png" /> TAGUER</a></li>
                <li><a href="Identifier.aspx"><img src="images/goute.png" /> IDENTIFIER</a></li>
                <li><a href="Enregistrer.aspx"><img src="images/crayon.png" /> ENREGISTRER COMPTEURS</a></li>
                <li><a href="Inventorier.aspx"><img src="images/inventorier.png" /> INVENTORIER</a></li>
                <li><a href="Documenter.aspx"><img src="images/livre.png" /> SE DOCUMENTER</a></li>
                <li><a href="Accueil.aspx"> <img src="images/importer.png" /> IMPORTER</a></li>
                <li><a href="Accueil.aspx"> <img src="images/exporter.png" /> EXPORTER</a></li>
            </ul>
        </div>
 
        <div id="menu_droit" class="menu_panel">
            <ul>
                <li><a href="A Propos.aspx"><img src="images/a%20propos.png" /> A PROPOS</a></li>
                <li><a href="Connexion.aspx"><img src="images/deconnexion.png" /> SE DECONNECTER</a></li>
            </ul>
        </div>
    </div>
 
reste du code dans le boby
 
et pour finir
 
  </form>
</body>
</html>

le script pour le deploiement des menus

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<script type="text/javascript">
    $(function () {
        $('#menu_gauche').css('display', 'none');
        $("#icon_menu_gauche").click(function () {
            $('#menu_gauche').css('display', 'block');
        });
        $('#menu_droit').css('display', 'none');
        $("#icon_menu_droit").click(function () {
            $('#menu_droit').css('display', 'block');
        });
 
    });
</script>

et la partie du code css qui gére le 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
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
 
.menu_gauche
{
    width: 250px;
    padding: 0px;
    margin: 0px;
    display: none;
    position: absolute;
    left: 0px;
    top: 50px;
    z-index: auto;
}
 
.menu_droite{
	width:250px;
	padding:0px;
	margin:0px;
	display:none;
	position:absolute;
	right:0px;
	top:50px;	
}
 
.menu_panel
{
    width: 250px;
    padding: 0px;
    margin: 0px;
}
 
.menu_panel ul
{
    padding: 0;
    margin: 0;
    list-style-type: none;
    width: auto;    
}
 
.menu_panel li{
	width:250px;
	height:100%;
	border: solid 1px #555555;
	background-color: #cccc99;
	padding:0px;
	margin:0px;
}
.menu_panel li a{
	width:250px;
	height:100%;
	padding:0px;
	margin:0px;
	text-decoration: none;
	color: #222222;
}
.menu_panel li :hover{
	width:250px;
	height:100%;
	padding:0px;
	margin:0px;
	background-color: #eeeeee;
}
 
#header{
	background-color: #cccc99;
	height:70px;
	text-align:center;
	padding-top:10px;
	padding-bottom:0px;
}
 
#icon_menu_gauche{
	position:absolute;
	left:90px;
	top:10px;	
}
 
#icon_menu_droit{
	position:absolute;
	right:10px;
	top:10px;
}
 
#icon_info_gauche{
    position:absolute;
	left:5px;
	top:5px;   
}
 
#icon_info_droit{
    position:absolute;
	right:40px;
	top:10px;
}

**Sardonics** · 12/12/2016, 19h07

Personne pour m'éclairer ....

problème affichage menu dans pages asp.net (côté code HTML et CSS) [Débutant]

Développement Web avec .NET

Discussions similaires

Partager

Partager