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

Torgar · 13/12/2011, 16h51

Bonjour,

Peut-être que nous montrer ton code nous aiderais à résoudre ou t’aiguiller pour ton problème ?

Mrezechiel · 13/12/2011, 17h02

Voila j'ai edité mon premier message !

Je rajoute l'image du site pour qu'on comprenne mieux.

Et voila on voit que la baseline du dernier li s'aligne avec le bottom de l'image

13/12/2011, 16h51	#2
Torgar Membre expérimenté Jérémy Développeur Web Inscription : août 2007 Messages : 326 Détails du profil Informations personnelles : Nom : Jérémy Âge : 26 Localisation : France, Gard (Languedoc Roussillon) Informations professionnelles : Activité : Développeur Web Secteur : Industrie Informations forums : Inscription : août 2007 Messages : 326 Points : 535 Points : 535	Bonjour, Peut-être que nous montrer ton code nous aiderais à résoudre ou t’aiguiller pour ton problème ? __________________ Vivez vos rêves !!! Si vous voulez que l'on vous aide, postez votre code avec la balise [ CODE ] [ /CODE ] (bouton # de l'éditeur)
	00

13/12/2011, 17h02	#3
Mrezechiel Invité régulier Inscription : mars 2010 Messages : 22 Détails du profil Informations forums : Inscription : mars 2010 Messages : 22 Points : 5 Points : 5	Voila j'ai edité mon premier message ! Je rajoute l'image du site pour qu'on comprenne mieux. Et voila on voit que la baseline du dernier li s'aligne avec le bottom de l'image
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email