[Resolu] Probleme menu déroulant avec firefox.

Question

gregory_nord

30 Aug 2008 à 18:07

Bonjour,

je suis en train de creer un site internet et j ai des petits soucis avec mon menu deroulant horizontal sous firefox.

Le contenu de ma page dispose de 3 colonnes et dés que je clique sur le menu déroulant automatiquement mes trois colonnes se deplace pour laisser apparaitre le menu alors que sur IE les colonnes restent fixe (sous le menu).

Auriez vous une solution a mon probleme ?

Merci d avance !

ci-joint : le code css :


@charset "utf-8";
/* CSS Document */

/*reset-------------------------------------------*/
* {
	margin: 0;
	padding: 0;
	border: 0;
}

body {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 1em;
	color:#000000;
	background-image: url(../img/fond.jpg);
	background-repeat:repeat-x;
	background-position:top;
		}
		
#page {
	position:relative;
	width: 848px;
	background-color:#FFFFFF;
	margin:  0 auto;
	}
/*entete-------------------------------------------------------------*/

#entete {
	width:848px;
	margin: 0 auto;
	height: 170px;
	background-color:#FFFF00;
	}
	
/*--fin entete--------------------------------------------------------*/
		
/*menu----------------------------------------------------------------*/
	

#menu {
position:relative;
z-index:100;
margin: 0 auto;
top:0;
left:0;
width: 848px;
font-size:14px;
height:25px;
line-height:25px;
text-align:center;
}

dl, dt, dd, ul, li {
margin: 0;
list-style-type: none;
text-align:center;
}

#menu dl {
float: left;
width: 141px;
}

#menu dt {
font-weight: bold;
background: #FFFFFF;
}

#menu li {
background: #FF0000;
}

#menu li a, #menu dt a {
color: #3366FF;
text-decoration: none;
display: block;
}

#menu li a:hover, #menu dt a:hover {
background: #FF0000;
color:#FFFFFF;
}

a {
text-decoration: none;
color: blue;
}
/*fin de menu-----------------------------------------------------------*/


/*Contenu de la page-----------------------------------------------------*/	

div#contenu {
z-index:15;
background-color:#FFFFFF;
}		
	
div#col1 {
	float: left;
	width: 200px;
	margin-left: 15px;
	background: lightblue;
}
div#col3 {
	float: left;
	width: 200px;
	margin-right: 10px;
	background: burlywood;
}
div#col2 {
	float:left;
	width:400px;
	margin-right:10px;
	margin-left: 10px;
	/*margin-left: 200px;
	margin-right: 210px;*/
	background: khaki;
}


/*fin de contenu----------------------------------------------------------*/	

/*Pied de page------------------------------------------------------------*/	
#pied {
    clear:both;
	width:848px;
	margin: 0 auto;
	height: 35px;
	background-color:#999999;
		}
/*fin pied de page---------------------------------------------------------*/


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

<title>sommaire</title>

<!--<link href="#CHEMIN{css/stylefsgt.css}"  rel="stylesheet" type="text/css" media="all" />-->
<link href="css/stylefsgt.css"  rel="stylesheet" type="text/css" media="all" />
<!-- Ou copier le code ci-dessus dans les balises : -->

</head>

<body>

<!--contenu page general-->
<div id="page">

<!--contenu entete-->
<div id="entete">entete</div>
<!--fin de contenu entete-->

<!--contenu menu-->
<div id="menu">
<dl>
		<dt onmouseover="javascript:montre();"><a href="" title="Accueil">Accueil</a></dt>
</dl>
		
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');"><a href="">Activités sportives</a></dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Athlétisme</a></li>
					<li><a href="#">Cyclisme</a></li>
					<li><a href="#">Escalade / Rando</a></li>
					<li><a href="#">Football</a></li>
                    <li><a href="#">Gymnastique</a></li>
                    <li><a href="#">Judo Ju-Jistu</a></li>
                    <li><a href="#">Natation</a></li>
                    <li><a href="#">Pétanque</a></li>
                    <li><a href="#">Plongée</a></li>
                    <li><a href="#">Tir</a></li>
                    <li><a href="#">Petite Enfance</a></li>
                    <li><a href="#">Autres</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');"><a href="#">Nous rejoindre</a></dt>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');"><a href="#">International</a></dt>
	</dl>
    <dl>	
		<dt onmouseover="javascript:montre('smenu5');"><a href="#">Formation</a></dt>
	</dl>
    <dl>	
		<dt id="reduit" onmouseover="javascript:montre('smenu6');"><a href="#">Nous contacter</a></dt>
	</dl>
    </div>
<!--fin de contenu menu-->


<!--contenu page-->
<div id="contenu">

<div id="col1">colonne
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.</p>
 </div>

<div id="col2">colonne centrale
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.</p>
</div>

<div id="col3">colonne 3
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.</p>
</div>

<!--contenu pied -->
<div id="pied">pied</div>

<!--fin de contenu pied-->
</div>
<!--fin de contenu page-->
</div>
<!--fin de contenu page general-->

-->

</body>
</html>

Modifié par gregory_nord (31 Aug 2008 - 19:07)

6l20

30 Aug 2008 à 18:29

Bonjour gregory_nord,

Pourrais-tu mettre en forme ton code html, comme tu l'as fait pour tes styles, s'il te plait Smiley cligne

Tu as, en fin de tutoriel, une probable réponse à ta problèmatique :

a écrit :
Attention aux décalages ! Les menus déroulants utilisent la propriété "display : block" et "display : none". Au départ et lorsqu'ils sont masqués, les sous-menus ont la valeur "none", cela signifie qu'ils n'occupent aucun espace dans la page.
En s'affichant, ils occupent alors un espace qui n'existait pas avant et peuvent "pousser" le reste de votre site !
C'est pourquoi, dans ces cas là, il faudra toujours positionner le menu et le site à part (chacun en position absolue) et leur donner un z-index (profondeur) différent, comme vous le voyez sur l'exemple de résultat. Dans ce cas, le menu sera placé au-dessus du reste du site et s'affichera sans le gêner.

As-tu regarder du coté du menu accordeon avec jquery ?

Cdt,
Sylvain

gregory_nord

30 Aug 2008 à 19:04

Bonjour,

Effectivement le probleme etait du à un probleme de positionnement "absolute".

Merci pour votre reponse rapide et efficace ! Smiley biggrin

6l20

31 Aug 2008 à 09:26

Considères-tu que ce sujet est [résolu] ? Smiley smile

Sujet clos

CSS et mise en forme, CSS3

[Resolu] Probleme menu déroulant avec firefox.