Balise ul alignée incorrectement en dynamique
Bonjour,
Je voulais faire un menu horizontal et que lorsque l'on clique sur un des boutons celui ci affiche un menu vertical dans une div (content menu) placé dessous.
Or la div (content menu) va aligner la derniére balise li avec le bottom de ma div body oO.. et cela que lorsque j'ai une autre div en inline-block placé a coté de la div (content menu).
Je ne vois pas d'ou ça vient peut être du css puisque j'ai mis inline_block mais ça ne reste pas logique aussi si quelqu-un pouvait m'aider....
voila le html
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
|
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.16.min.js"></script>
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript">
function afficherMenu(){
$('body').append('<img id="imge" src="menuA.png"/>');
$('#imge').show('clip'); }
</script>
<link rel="stylesheet" type="text/css" media="screen" href="index.css"/>
</head>
<body>
<div id="box-menu">
<ul>
<li><a href="javascript:Menu.ajouteHTML();">Menu</a></li>
<li>Maki</li>
<li>Sushi</li>
<li>Desserts</li>
</ul>
</div>
<div id="list-content" class="alignement">
</div>
</body> |
le 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
|
body{
margin-top : 150px;
width : 800px;
height : 500px;
margin-right : auto;
margin-left : auto;
margin-bottom : 0px;
border :solid black;}
ul { height : 100px;}
#box-menu li { display : inline-block; }
#list-content{
width : 100px;
height : 390px;
border : solid pink;}
#img-content{
width : 570px;
height : 390px;
border : solid blue;}
#listMenu{
top : 0;
left : 0;
display : none;
width : 100px;
height : 400px;}
#listMenu li{
padding : 20px;}
#imge{
display : none;
width : 600px;
height : 400px;}
.alignement{
display : inline-block !important;} |
et enfin le js
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
var Menu = {
"ajouteHTML" : function(){
var html = [];
var i = 0;
html[i++]= '<div id="listMenu" class="alignement">';
html[i++]= '<ul>';
html[i++]= '<li><a href="javascript:afficherMenu();"> Decouverte</a></li>';
html[i++]= '<li>California</li>';
html[i++]= '<li>Green</li>';
html[i++]= '</ul>';
html[i++]= '</div>';
$('#list-content').append( html.join(''));
$('#listMenu').show('clip');
afficherMenu();
}
} |
Merci
