5568 sujets

Sémantique web et HTML

Pb avec un menu déroulant...

Salut !

Et je profite de ce premier post pour remercier Raphaël de tout ce travail ! Je développe mon premier site avec un positionnement CSS (je suis en stage)... et Alsacréations m'aide beaucoup ma foi Smiley smile

J'ai donc un pti probleme avec un menu déroulant, dont la base est celui proposé ici (menu déroulant horizontal)...

Il marche très bien sous FireFox, mais pas sous IE...
Le site est encore en développement, voici http://240plan.ovh.net/~monsite/temp/l'adresse temporaire :
[/url]

Le script javascript se trouve dans le head de la page, le fichier CSS est à cette adresse


Merci de votre aide Smiley help

Fu'
Modifié le 05 Dec 2004 - 12:35
peut être que mettre les sources directement dans le message serait plus simple...

#menuPrincipal dl, #menuPrincipal dt, #menuPrincipal dd, #menuPrincipal ul, #menuPrincipal li {
margin: 0;
padding: 0;
list-style-type: none;
}


#menuPrincipal {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 446px;
left: 27px;
/*z-index:100;*/
/*width: 100%;*/ /* correction pour Opera */
width: 817px;
}


#menuPrincipal dl {
float: left;
width: 190px;
}
#menuPrincipal dt {
cursor: pointer;
/*border: 1px solid gray;*/
}
#menuPrincipal dd {
display: none;
border: 1px solid #CCE100;
position:absolute;
bottom: 25px;

}
#menuPrincipal li {
	text-align: left;
	font-weight: bold;
	text-decoration: none;
	color: #FFFFFF;
	background-color: #CCE100;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt;
	line-height: 1.5em;

}
#menuPrincipal li a, #menu dt a {
	color: #BF1360;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
	background-color: #FFFFFF;
	padding-left: 5px;
}
.imgMenu {
	border: 0px;
}


le code html :
<div id="menuPrincipal">
	<dl>
		<dt onmouseover="javascript:montre();"></dt>
	</dl>
	
	<dl>			
		
	 	<dt onmouseover="javascript:montre('smenu1');">
			<a href="http://localhost/monsite/index.php" title="Retour à l'accueil"><img src="http://localhost/monsite/images/menuBas/paysagez-votre-balcon.gif" class="imgMenu"></a>
		</dt>
			<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
				<ul>
					<li>&quot;Pr&ecirc;t &agrave; se poser&quot;</li>
					<li><a href="http://localhost/monsite/paysages/offre-libellule.php">Offre Libellule&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="http://localhost/monsite/images/motifs/libellule-menu.gif" class="imgMenu"></a></li>
					<li><a href="http://localhost/monsite/paysages/offre-coccinelle.php">Offre Coccinelle&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="http://localhost/monsite/images/motifs/coccinelle-menu.gif" class="imgMenu"></a></li>
					<li>&quot;Haute Bouture&quot;</li>
					<li><a href="http://localhost/monsite/paysages/offre-papillon.php">Offre Papillon&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="http://localhost/monsite/images/motifs/papillon-menu.gif" class="imgMenu"></a></li>
				</ul>
			</dd>
	</dl>
	
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');">
			<a href="http://localhost/monsite/services/nos-services.php"><img src="http://localhost/monsite/images/menuBas/nos-services.gif" border="0"></a>
		</dt>
			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="http://localhost/monsite/services/livraison-installation.php">Livraison - Installation</a></li>
					<li><a href="http://localhost/monsite/services/fleurissement.php">Fleurrissement personnalis&eacute;</a></li>
					<li><a href="http://localhost/monsite/services/arrosage.php">Arrosage automatique</a></li>
					<li><a href="http://localhost/monsite/services/assistance.php">Assistance</a></li>
					<li><a href="http://localhost/monsite/services/entretien.php">Entretien</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">
	  		<a href="http://localhost/monsite/accessoires/accessoires.php"><img src="http://localhost/monsite/images/menuBas/les-accessoires.gif" border="0"></a>
		</dt>
			<!--<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="http://localhost/monsite/">Sous-Menu 3.1</a></li>
					<li><a href="http://localhost/monsite/">Sous-Menu 3.2</a></li>
					<li><a href="http://localhost/monsite/">Sous-Menu 3.3</a></li>
					<li><a href="http://localhost/monsite/">Sous-Menu 3.4</a></li>
					<li><a href="http://localhost/monsite/">Sous-Menu 3.5</a></li>
				</ul>
			</dd>-->
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">
			<a href="http://localhost/monsite/offre-entreprise.php"><img src="http://localhost/monsite/images/menuBas/offre-entreprise.gif" border="0"></a>
		</dt>
			<!--<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="http://localhost/monsite/">Sous-Menu 4.1</a></li>
					<li><a href="http://localhost/monsite/">Sous-Menu 4.2</a></li>
					<li><a href="http://localhost/monsite/">Sous-Menu 4.3</a></li>
				</ul>
			</dd>-->
	</dl>

</div>


La barre s'affiche correctement sous FireFox, mais pas sous IE;
et il y a également un problème de comportement (le menu déroulant disparait si on ne survole plus un lien).
Des images parleraient peut être plus...

voici ce qui est sous FireFox et qui devrait être (lorsque q'on survole "Paysagez votre Balcon") :
upload/242-OK-FireFox.png

et maintenant, ce que j'obtiens sous IE :
upload/242-ERREUR-IExpl.png

Merci de votre aide,
Fu'
Modifié le 05 Dec 2004 - 12:36
Salut !

Excusez moi, je veux pas paraitre impatient ou quelqu'un qui considère que tout le monde doit se mettre à solutionner mon probleme, je sais que toute aide apportée sur le forum est totalement bénévole, et je vous remercie, mais je n'ai toujours pas trouvé la solution à mon probleme...

J'ai posté le premier & deuxième message sur le forum mediabox, et ce message a été supprimé... Ici, je n'ai pas eu de réponse. Je ne comprends pas Smiley confus . Quelqu'un pourrait m'expliquer ce que je n'ai pas respecté ? Le probleme qui n'est pas clairemetn posé ?

Ou bien m'aider sur le probleme ? Est ce un bug d'Internet Explorer ?
C'est peut être une erreur toute simple que je n'ai pas relevée, si vous l'avez pouvez vous me la donner, ça m'aiderait vraiment !

merci & a+,
Fu'
Modifié le 06 Nov 2004 - 12:40
Administrateur
Malheureusement, je ne peux pas te reprendre ton code.

Par contre, je peux te proposer une piste qui fonctionne :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Menu déroulant horizontal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<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">
<!-- 
/* CSS issu des tutoriels  www.alsacreations.com/articles  */
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
bottom: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
position: relative;
margin: 0 2px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;

}
#menu dd {
background-color: #ccc;
position: absolute;
bottom:1.5em;
width:100%;
}
#menu li {
text-align: center;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}

#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}

a {text-decoration: none;
color: black;
color: #222;
}
-->
</style>
</head>

<body>

<div id="menu">
	<dl>
		<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
			<dd id="smenu1">
				<ul>
					<li><a href="#">Sous-Menu 1.1</a></li>

					<li><a href="#">Sous-Menu 1.2</a></li>
					<li><a href="#">Sous-Menu 1.3</a></li>
					<li><a href="#">Sous-Menu 1.4</a></li>
					<li><a href="#">Sous-Menu 1.5</a></li>
					<li><a href="#">Sous-Menu 1.6</a></li>
				</ul>

			</dd>
	</dl>
	
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>

					<li><a href="#">Sous-Menu 2.3</a></li>
					<li><a href="#">Sous-Menu 2.4</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
			<dd id="smenu3">

				<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');">Menu 4</dt>
			<dd id="smenu4">
				<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 id="site">

	<h1>Menu horizontal déroulant en CSS</h1>
	<p>Testé sous (tested under) Internet Explorer, Netscape, Mozilla, Opera et Firebird</p>
  <p>Il vous suffit d'adapter le code source de cette page &agrave; vos besoins. </p>
<p>Raphaël GOETTER<br />
  <a href="http://www.alsacreations.com">Alsacréations</a><br />
  <a href="http://www.alsacreations.com/articles/deroulant/">Explications / Explanations</a></p>

</div>

</body>
</html>
Salut j'ai essayer de faire le menu déroulant que tu voulai faire en me basan sur le tutoriel de raphael , étant débutant en CSS cela permis de m'entrainer un peu...

Pour le code voici:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<title>Menu déroulant</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	
<script type="text/javascript">

window.onload=montre;

function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=4; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}

function cache() {
   for (var i = 1; i<=4; i++) {
     document.getElementById('smenu'+i).style.display='none';
   }
}
</script>
<style type="text/css">
      
     html , body  {
           margin : 0;
           padding : 0px;
           height : 100%;
           background : white;
           font : 80% verdana, arial, sans-serif;
      }
     dl , dt , dd , ul , li {
           margin : 0;
           padding : 0;
           list-style-type : none;
           font-weight : bold;
      }
     #menu {
           width : 780px;
           height : 25px;
           line-height : 25px;
           padding-left : 20px;
           border-top : 1px solid #cce100;
           border-bottom : 1px solid #cce100;
           margin-top:500px;
           margin-left : 20px;
      }
     #menu dl {
           float : left;
           width : 175px;
           position : relative;
           margin : 0 0 0 10px;
      }
     #menu dt {
           cursor : pointer;
           text-align : center;
           background-color : #fff;
      }
     #menu dd {
           border : 1px solid #cce100;
           display:none;
           line-height : 20px;
           border-bottom : 0 none ;
           color : #bf1360;
           position : absolute;           
           bottom : 22px;
           width : 100%;
      }
     #menu li {
           text-align : left;
           width : 175px;
           font-size : 10px;
           background-color : #cce100;
           color : #fff;
      }      
     #menu li h5 {
           margin:0 0 0 2px; 
           padding:0;
           font-size : 10px;		   
      }
     #menu li a , #menu dt a {
           text-decoration : none;
           padding-left : 5px;
           display : block;
           height : 100%;
           border : 0 none;
      }   
     #menu li a {
           color : #bf1360;
           background-color : #fff;
           text-decoration : none;
      }    
     #menu li a:visited {
           color : #bf1360;
           text-decoration : none;
      }
     #menu li a:hover , #menu dt a:hover {
           color : #cce100;
      }
     #paysagerVotreBalcon {
           height : 21px;
           width : 161px;
           background : url(images/menuBas/paysagez-votre-balcon.gif) no-repeat;
      }
     #services {
           height : 21px;
           width : 102px;
           background : url(images/menuBas/nos-services.gif) no-repeat;
      }
     #accessoires {
           height : 21px;
           width : 116px;
           background : url(images/menuBas/les-accessoires.gif) no-repeat;
      }
     #offreEntreprise {
           height : 21px;
           width : 126px;
           background : url(images/menuBas/offre-entreprise.gif) no-repeat;
      }
     #paysagerVotreBalcon span  , #services span  , #accessoires span  , #offreEntreprise span  {
           display : none;
      }
     #libellule a {
           background : #fff url(images/motifs/libellule-menu.gif) no-repeat 90% 50%;
      }
     #coccinelle a {
           background : #fff url(images/motifs/coccinelle-menu.gif) no-repeat 90% 50%;
      }
     #papillon a {
           background : #fff url(images/motifs/papillon-menu.gif) no-repeat 90% 50%;
      }

</style>
</head>
<body onclick="javascript:cache();">

<div id="menu">	
	<dl>			
	  <dt id="paysagerVotreBalcon" onmouseover="javascript:montre('smenu1');" >
	   <a href="#"><span>Paysagez votre balcon</span></a>
	  </dt>
		 <dd id="smenu1" >
			 <ul>
				<li><h5>&quot;Pr&ecirc;t &agrave; se poser&quot;</h5></li>
				<li id="libellule"><a href="#">Offre Libellule</a></li>
				<li id="coccinelle"><a href="#">Offre Coccinelle</a></li>
  				<li><h5>&quot;Haute Bouture&quot;</h5></li>
				<li id="papillon"><a href="#">Offre Papillon</a></li>					
			 </ul>
		 </dd>
	</dl>
	<dl >	
	  <dt id="services" onmouseover="javascript:montre('smenu2');" >
	   <a href="#"><span>Nos services</span></a>
	  </dt>
		 <dd id="smenu2">
  			 <ul>
				<li><a href="#">Livraison - Installation</a></li>
				<li><a href="#">Fleurrissement personnalis&eacute;</a></li>
				<li><a href="#">Assistance</a></li>
				<li><a href="#">Entretien</a></li>
 			 </ul>
		 </dd>
	</dl>
	<dl>	
	  <dt id="accessoires" onmouseover="javascript:montre('smenu3');" >
	   <a href="#"><span>Les accessoires</span></a>
	  </dt>
		 <dd id="smenu3">
 			 <ul>
 			    <li><a href="#">Arrosage automatique</a></li>
				<li><a href="#">Occultation &amp; protection</a></li>
				<li><a href="#">Éclairage</a></li>
				<li><a href="#">Mobilier</a></li>
				<li><a href="#">Entretien</a></li>
 			 </ul>
		 </dd>
	</dl>
	<dl>	
	  <dt id="offreEntreprise" onmouseover="javascript:montre('smenu4');">
	   <a href="#"><span>Offre Entreprise</span></a>
	  </dt>
		 <dd id="smenu4">
			 <ul>
				<li><a href="#">Offre Entreprise 1</a></li>
				<li><a href="#">Offre Entreprise 2</a></li>
				<li><a href="#">Offre Entreprise 3</a></li>
			 </ul>
		 </dd>
	</dl>
</div>



</body>
</html>




sinon si tu veut un aperçu je l'ai mis sur mon ftp

http://eman73.free.fr/menu/

sinon je voulai dire un merci à raphael car ses tutos aides de nombreuses personnes à se guérir de l'horrible et répandue maladie de la Tablotite qui consiste à n'utiliser que des tableaux pour la mise en page de sites... Smiley smile
Modifié le 17 Dec 2004 - 21:15
Administrateur
eman73 a écrit :

sinon si tu veut un aperçu je l'ai mis sur mon ftp

http://eman73.free.fr/menu/

sinon je voulai dire un merci à raphael car ses tutos aides de nombreuses personnes à se guérir de l'horrible et répandue maladie de la Tablotite qui consiste à n'utiliser que des tableaux pour la mise en page de sites... Smiley smile

Bravo pour la solution !

Et merci pour les compliments Smiley nuts
"Tablotite", je ne connais pas, par contre je connaissais la "Cellulite" qui doit être une variante Smiley biggrin
Modifié par Raphael (25 Jul 2005 - 12:14)
Merci beaucoup ! Smiley jap

Je ne voulais pas le recommencer depuis le début pensant que quelqu'un connaitrait peut être la solution... et toi t'arrives, et tu recrées le menu exactement comme je le voulais !
Chapeau ! Smiley clapclap

Ne me reste plus qu'à comparer les 2 codes pour comprendre ce qui n'allait pas :-/

Encore Merci ^^
Fu'
Sujet clos
Aller à