menu l'un en dessous de l'autre

15 août 2007, 02:07

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

21 août 2007, 10:35

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 */
}

menu l'un en dessous de l'autre

Qui est en ligne