problème affichage menu dans pages asp.net (côté code HTML et CSS)
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:
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>
</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:
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:
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;
} |
