Balise ul alignée incorrectement en dynamique

**Mrezechiel** · 13/12/2011, 16h42

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 :

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

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

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