Forum d'entraide PHPFrance

Bonjour,
j'ai deux menu en colonne, dont je voudrai qu'il s'affiche l'un en dessous de l'autre, sous ie sa fonctionne très bien, mais sous ff je bloque et ne comprend la raison ?
http://voxmundi.fr/
je vous donne le code css pour ff un peu long

css

Code : Tout sélectionner

				/*---------------------- MENU----------------------*/
	
/* positionnement des deux menus */
div#position_menu
	{position:absolute; left:15px; top:190px; heignt:100%; font-size:0.99em;width:13em; text-align:left;  padding:0;}

div#menu
	{ padding:0}

ul#menu_colonne
	{/*filter:alpha(opacity=60); -moz-opacity: .6;*/}

	/*deuxième menu*/
ul#lien_fixe
	{margin:10px 10px 0 30px; width: 150px; background:#E6F6FF; /*filter:alpha(opacity=60); -moz-opacity: .6;*/ font-size:1.2em; display:block;}
	
#lien_fixe a
	{/*filter:alpha(opacity=60); -moz-opacity: .6;*/ font-size:1em; display:block;}	

#titre_menu
	{font-size:1.2em; color:#276F14; font-weight:bold; padding:0;text-align:center;}

/********************** début du cadre 1 et de sont contenu...********************/
#cadre {}

#topRight, #bottomRight {float: right;}

#topRight {background: transparent url(http://voxmundi.fr/img_menu_test5/3.jpg) no-repeat;}

#bottomRight {background: transparent url(http://voxmundi.fr/img_menu_test5/5.jpg) no-repeat;}

#topLeft, #topRight, #bottomLeft, #bottomRight {width: 14px; height: 16px;}

#topLeft {background: transparent url(http://voxmundi.fr/img_menu_test5/1.jpg) no-repeat;}

#bottomLeft {background: transparent url(http://voxmundi.fr/img_menu_test5/7.jpg) no-repeat;}

#sideLeft {background: transparent url(http://voxmundi.fr/img_menu_test5/8.jpg) top left repeat-y;}

#sideRight {background: transparent url(http://voxmundi.fr/img_menu_test5/4.jpg) top right repeat-y #E6F6FF;}

#sideTop {background: transparent url(http://voxmundi.fr/img_menu_test5/2.jpg) repeat-x;}

.sideTop, .sideBottom {width: auto;height: 16px;}

#sideBottom {background: transparent url(http://voxmundi.fr/img_menu_test5/6.jpg) bottom repeat-x;}

/* contenu du calque */
.contenu {padding: 1em 1em;}

.contenu p {margin-bottom: 0.5em; line-height: 1.3em;}

/* FIN contenu du calque */
/**********************  FIN DU CADRE 1 ********************/
/********************** DEBUT DU CADRE 2 ...********************/

#cadre2 {}

#topRight2, #bottomRight2 {float: right;}
<!-- le meilleur est img_menu_test3 -->
#topRight2 {background: transparent url(http://voxmundi.fr/img_menu_test5/3.jpg) no-repeat;}

#bottomRight2 {background: transparent url(http://voxmundi.fr/img_menu_test5/5.jpg) no-repeat;}

#topLeft2, #topRight2, #bottomLeft2, #bottomRight2 {width: 14px; height: 16px;}

#topLeft2 {background: transparent url(http://voxmundi.fr/img_menu_test5/1.jpg) no-repeat;}

#bottomLeft2 {background: transparent url(http://voxmundi.fr/img_menu_test5/7.jpg) no-repeat;}

#sideLeft2 {background: transparent url(http://voxmundi.fr/img_menu_test5/8.jpg) top left repeat-y;}

#sideRight2 {background: transparent url(http://voxmundi.fr/img_menu_test5/4.jpg) top right repeat-y;}

#sideTop2 {background: transparent url(http://voxmundi.fr/img_menu_test5/2.jpg) repeat-x;}

.sideTop2, .sideBottom2 {width: auto;height: 16px;}

#sideBottom2 {background: transparent url(http://voxmundi.fr/img_menu_test5/6.jpg) bottom repeat-x;}
/* contenu du calque */
.contenu2 {padding: 1em 1em;}

.contenu2 p {margin-bottom: 0.5em; line-height: 1.3em;}

/* FIN contenu du calque */
/********************** FIN DU CADRE 2 ...**********************/
/********************** FIN DU MENU ************************/

xhtml

Code : Tout sélectionner

	<div id="position_menu">
	<!-- FIN POSITIONNEMENT DES MENUS -->	
		<!-- PREMIER MENU -->
		<div id="cadre" style="display:none;">
			<div id="sideTop">
				<div id="topRight"></div>
				<div id="topLeft"></div>
			</div>
			<div id="sideRight">
				<div id="sideLeft" class="contenu">
					<div id="menu" style="display:none;">
			<!-- CONTENU PREMIER MENU -->
					</div>
				</div>
			</div>
			<div id="sideBottom">
				<div id="bottomRight"></div>
				<div id="bottomLeft"></div>
			</div>
		</div>
		<!-- FIN PREMIER MENU -->

		<!-- DEUXIEME MENU -->
		<div id="cadre2" style="display:none;">
			<div id="sideTop2">
				<div id="topRight2"></div>
				<div id="topLeft2"></div>
			</div>
			<div id="sideRight2">
				<div id="sideLeft2" class="contenu2">			
					<div id="lien_statiques">
					<!-- CONTENU DEUXIEME MENU -->
					</div>
				</div>
			</div>
			<div id="sideBottom2">
				<div id="bottomRight2"></div>
				<div id="bottomLeft"></div>
			</div>
		</div>
	</div>
	<!-- FIN DEUXIEME MENU -->

Merci d'avance

tiens c'etai simple a trouver

html:

Code : Tout sélectionner

<div id="menu">
			<div class="element_menu"> <!-- Cadre correspondant à un sous-menu -->
				<h3>Menu</h3> <!-- Titre du sous-menu -->
				<ul>
					<?include ("./includes/boutons.php");?>
				</ul>
			</div>
			<div class="chat"> <!-- Cadre correspondant à un sous-menu -->
				<h3>chat</h3> <!-- Titre du sous-menu -->
				<ul>
					test pour mettre un chat ici. <!-- en guise de deuxieme menu -->
				</ul>
			</div>
		</div>

css:

Code : Tout sélectionner

#menu
{
   float: left; /* Le menu flottera à gauche */
   width: 130px; /* Très important : donner une taille au menu */
}

.bouton
{
	text-align:center; background:#000000 url("./images/b1.jpg");
}

.element_menu
{
   background-color: #626262;
   background-image: url("./images/motif.png");
   background-repeat: repeat-x;
   
   border: 2px solid black;
   
   margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}

.chat
{
   background-color: #626262;
   background-image: url("./images/motif.png");
   background-repeat: repeat-x;
   
   border: 2px solid black;
   
   margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}

Forum d'entraide PHPFrance

menu l'un en dessous de l'autre

menu l'un en dessous de l'autre