18041 sujets

Questions générales et questions de débutants

Menu déroulant horizontal - Affichage problèmatique sous firefox

bonjour à tous,

tout d'abords je tiens à préciser que j'ai chercher dans les sujets déjà existants, mais que ma réponse n'y figure pas.

Mon problème est assez simple à expliquer :

J'ai mis un menu déroulant horizontal sur mon site. Le menu se trouve dans un .class qui lui même se trouve dans un #id. Sur IE, le menu s'affiche parfaitement sur le reste du site, par contre sur Firefox et autres, c'est un autre histoire. En effet, le menu "pousse" mon #id sur le bas du site au lieu de s'afficher par dessus le site.

J'ai bien essayer de donner des valeurs z-index, mais sans succès (surement placé faux).

Je me permets de vous donner mes codes, si quelqu'un a le courage de le zieuter pour me donner une solution Smiley rolleyes

Haaaa, le site peut être vu ici

mon CSS
body{
	margin-top: 0px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	background-color:#CCCCCC;
}

/* Structure de base */

#site{
	margin-left:auto;
	margin-right:auto;
	width: 1000px;
	height: 600px;
	min-height:600px;
	background-color:#666666;
}
#top{
	width:100%;
	height:14px;
	background:url(img/top.jpg) top no-repeat;
	color:#FFFFFF;
	font-weight:bold;
	font-size:9px;
	border:1px solid #FFFFFF;
}

#header{
	width:100%;
	height:200px;
	background-color:#999999;
	border:1px solid #FFFFFF;
	border-bottom:none;
}

#menu1{
	width: 100%;
	height:20px;
	background-color:#330066;
}

#content{
	width:100%;
	min-height:330px;
	background-color:#ffffff;
	border: 1px solid #FFFFFF;
	float:left;
}

#footer{
	width:100%;
	height:70px;
	background:url(img/footer.jpg) bottom no-repeat;
	border:1px solid #FFFFFF;
	float:left;
	clear:both;
}

/* Contenu */
	
	/* Haut du site */
	
.top_d{
	width:40%;
	height:14px;
	float:right;
	padding-right:10px;
	text-align:right;
}

.top_g{
	width:50%;
	height:14px;
	float:left;
	text-align:left;
	padding-left: 10px;
}

#position{
	width:200px;
	height: 180px;
	float:left;
	margin-left:20px;
	margin-top:10px;
	background-color:#418DCB;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	opacity: 0.5
}

.menu1{
	width:75%;
	margin-left: auto;
	margin-right: auto;
	height:20px;
	background-color:#339999;
	z-index:6;
}

	/* Contenu du site */
	
.contenu{
	margin-left: 25px;
	margin-top: 15px;
	padding-bottom: 10px;
	width:70%;
	float:left;
	text-align:justify;
	z-index::6;
}
	
	/* Bas du site */
	
.footer{
	width:75%;
	text-align:center;
	padding-top:30px;
	height:70px;
	margin-left: auto;
	margin-right: auto;
	color: #FFFFFF;
	font-weight:bold;
	font-size:10px;
}



mon HTML
<!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=iso-8859-1" />
<title>Carnet d'Amérique Latine - SEBI-CHE ideas</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

		<div id="site">
			
			<div id="top"> 
				<div class="top_d">| SEBI-CHE ideas | Galerie photos | Les films |</div>
			
				<div class="top_g">Carnet d'Amérique Latine - Le voyage de Sebastian Michellod </div>
			</div>
			
			<div id="header">
				<div id="position">Dans cet élément viendra la position de Sebastian</div>
			</div>
			
			<div id="menu1">
				<div class="menu1"><?php include("menu.php"); ?></div> 
			</div>
			
			<div id="content">
			  <div class="contenu"></div>
			</div>
			
			<div id="footer">
			  <div class="footer">Contact - Sponsors - Site &lt; | &gt; Home - Galerie photo - Les films<br />
			    <br />
			  Ici du blabla habituel pour le copyright et tout et tou  <br /><br /><br /><!-- phpmyvisites -->
<a href="http://www.phpmyvisites.net/" title="phpMyVisites | Open source web analytics"
onclick="window.open(this.href);return(false);"><script type="text/javascript">
<!--
var a_vars = Array();
var pagename='cal/dev.php';

var phpmyvisitesSite = 1;
var phpmyvisitesURL = "http://www.sebi-che.com/phpmv2/phpmyvisites.php";
//-->
</script>
<script language="javascript" src="http://www.sebi-che.com/phpmv2/phpmyvisites.js" type="text/javascript"></script>
<noscript><p>phpMyVisites | Open source web analytics
<img src="http://www.sebi-che.com/phpmv2/phpmyvisites.php" alt="Statistics" style="border:0" />
</p></noscript></a>
<!-- /phpmyvisites --></div>
			</div>
			
		</div>	  
		


</body>
</html>



mon menu (appellé via un include)
<head>

<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>
<style type="text/css" media="screen">
<!-- 
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position:relative; /* placement du menu, à modifier selon vos besoins */
left:40px;
z-index:100;
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}

-->
</style>
</head>

<body>
<div id="conteneur">
<div id="menu">
	<dl>

		<dt onMouseOver="javascript:montre();"><a href="" title="Retour &agrave; l'accueil">Accueil</a></dt>
	</dl>
	
	<div align="center">
	  <dl>			
	    <dt onMouseOver="javascript:montre('smenu1');">Voyage</dt>
	    <dd id="smenu1" onMouseOver="javascript:montre('smenu1');" onMouseOut="javascript:montre('');">
	      <ul>
	        <li><strong>Projet</strong></li>
	        <li><a href="#" title="Qu'est-ce que ce voyage ?">Introduction</a></li>
	        <li><a href="#" title="Quels sont les endroits que je vais traverser ?">Itin&eacute;raire</a></li>
	        <li><a href="#" title="Suivez mon parcours sur la carte !">Carte</a></li>
	        <li><a href="#" title="La doc compl&egrave;te se trouve ici">Documentation</a></li>
	        <li><a href="#" title="Les personnes que je remercies">Remerciements</a></li>
	        <li><strong>Participants</strong></li>
	        <li><a href="#" title="Les personnes qui vont faire un peu de chemin avec moi">Membres</a></li>
	        <li><a href="#" title="Si l'aventure vous tente, rejoignez-moi [cligne]">Inscriptions</a></li>
          </ul>
        </dd>
      </dl>
  </div>
	<dl>	
		<dt onMouseOver="javascript:montre('smenu2');">Vid&eacute;os</dt>

			<dd id="smenu2" onMouseOver="javascript:montre('smenu2');" onMouseOut="javascript:montre('');">
			<ul>
				<li><a href="#">s-menu</a></li>

			</ul>

			</dd>
	</dl>
	
	<dl>	
		<dt onMouseOver="javascript:montre('smenu3');">Photos</dt>
			<dd id="smenu3" onMouseOver="javascript:montre('smenu3');" onMouseOut="javascript:montre('');">
			<ul>

				<li><a href="#">Sous-Menu 3.1</a></li>
				<li><a href="#">Sous-Menu 3.2</a></li>
				<li><a href="#">Sous-Menu 3.3</a></li>
				<li><a href="#">Sous-Menu 3.4</a></li>
				<li><a href="#">Sous-Menu 3.5</a></li>
			</ul>

			</dd>
	</dl>
	
	<dl>	
		<dt onMouseOver="javascript:montre('smenu4');">Carnet</dt>
			<dd id="smenu4" onMouseOver="javascript:montre('smenu4');" onMouseOut="javascript:montre('');">
			<ul>

				<li><a href="#">Sous-Menu 4.1</a></li>
				<li><a href="#">Sous-Menu 4.2</a></li>
				<li><a href="#">Sous-Menu 4.3</a></li>

			</ul>
			</dd>
	</dl>
	

</div>
</div>



</body>


Merci d'avance pour l'aide apportée. Je sèche depuis cette nuit et là je fais appelles à vous.
Modifié par Tzieber (27 Apr 2007 - 14:16)
C'est bon, j'ai enfin trouvé après être allé prendre un peu l'air dehors.

Il fallait simplement que j'ajoute un simple "float:left" à mon conteneur "#menu1" et c'est bon sur IE et sur FF.

Merci si il y'en a parmis vous qui ont quand même cherché Smiley langue
Sujet clos
Aller à