18041 sujets

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

Menu deroulant horizontal (encore)

Bonjour,

encore un problème (enfin 2) avec le menu horizontal css+javascript qui a decidément beaucoup de succès.

problème n°1 :

Sous IE (testé avec version 6) les sous-menus ont tendance à se fermer rapidement lorsque la souris les survole. Pourquoi ? Est-ce les pseudos-balises qui posent problème ? Comment résoudre le problème?

problème n°2 :

Pour afficher les items des sous-menus sur une seul ligne j'ai rajouté une largeur de 200px au style de la balise dd. Problème sous IE encore lorsque le sous menu se déroule les items du menu se décalent. Comment éviter le décalage ? Peut-on adapter automatiquement la largeur du sous-menu à la largeur de la plus grande ligne ?

Il n'y a aucun problème avec FF et netscape.


Adresse de l'ébauche du site :

http://seb.petit21.free.fr/OT2/

Code de la page :


<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Office de tourisme de Mirebeau-sur-B&egrave;ze</title>
	<link rel="stylesheet" type="text/css" href="css/stylesheet.css" media="screen" /> 
	<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>
</head>
<body>
	<div id="conteneur">		
		
		<div id="menu">
			<dl>
		
				<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">ACTUALITES</a></dt>
			</dl>
			
			<dl>			
				<dt onmouseover="javascript:montre('smenu1');"><a href="#">HEBERGEMENT</a></dt>
		
				<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
					<ul>
						<li><a href="#">Les h&ocirc;tels</a></li>
						<li><a href="#">Les chambres d'h&ocirc;te</a></li>
						<li><a href="#">Les meubl&eacute;s class&eacute;s tourisme</a></li>
						<li><a href="#">Les campings</a></li>
					</ul>
				</dd>
			</dl>
			
			
			<dl>	
				<dt onmouseover="javascript:montre('smenu2');"><a href="#">ACTIVITES MANIFESTATIONS</a></dt>
		
					<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
					<ul>
						<li><a href="#">Des id&eacute;es de sortie</a></li>
						<li><a href="#">Le f&ecirc;tes et manifestations</a></li>
						<li><a href="#">Les activit&eacute;s de loisir</a></li>
						<li><a href="#">Les randonn&eacute;es p&eacute;destres</a></li>
					</ul>
					</dd>
			</dl>
			
			<dl>	
				<dt onmouseover="javascript:montre('smenu3');"><a href="#">VISITES <br/> PATRIMOINE</a></dt>
				<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
				  <ul>
		
					  <li><a href="#">Les sites et monuments historiques</a></li>
					  <li><a href="#">Mus&eacute;es</a></li>
					  <li><a href="#">Les parcs et jardins</a></li>
					  <li><a href="#">Les artisans</a></li>
					  <li><a href="#">Les visites pour jeunes et scolaires</a></li>
				  </ul>
			  </dd>
			</dl>
			
			<dl>	
				<dt onmouseover="javascript:montre('smenu4');"><a href="#">DECOUVRIR LE CANTON</a></dt>
					<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
					<ul>
		
						<li><a href="#">G&eacute;ographie</a></li>
						<li><a href="#">Histoire</a></li>
						<li><a href="#">Chiffres cl&eacute;s</a></li>
					</ul>
					</dd>
			</dl>
			
			<dl>	
				<dt onmouseover="javascript:montre('smenu5');"><a href="#">QUI <br/>SOMMES NOUS ?</a></dt>
			</dl>
			
			<dl>	
				<dt onmouseover="javascript:montre('smenu6');"><a href="#">LIENS</a></dt>
			</dl>
		</div>
		<!-- <ul id="menu">
			<li><a href="etape1.html">Actualites</a></li>
			<li><a href="etape2.html">Hebergement</a></li>
			<li><a href="etape3.html">Activites Manifestations</a></li>
			<li><a href="etape4.html">Visites Patrimoine</a></li>
			<li><a href="etape5.html">Decouvrir le canton</a></li>
			<li><a href="etape5.html">Qui sommes nous ?</a></li>
			<li><a href="etape5.html">Liens</a></li>
		</ul> -->
		
		<h1 id="header"><!--<a href="OT.html" title="Canton de Mirebeau sur Bèze"> --><span>Canton de Mirebeau sur B&egrave;ze</span></h1>
	  
		<div id="option">
			<a href="#"><img src="image/acces-pro.gif" /></a>
			<a href="#"><img src="image/fr.gif" /></a>
			<a href="#"><img src="image/en.gif" /></a>
			<a href="#"><img src="image/de.gif" /></a>
			
		</div>
		
	  	<div id="contenu">
			<h2>actualit&Eacute;s</h2>
			<h3>&gt; titre actu</h3>
			<p>Un paragraphe</p>
			<h3>&gt; une autre actu</h3>
	  	 	<p>bla .bla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla bla</p>
	  	</div>
		
		<div id="footer">
			<a href="#" title="Infos légales">Infos L&eacute;gales</a> | <a href="#" title="Plan">Plan du site</a> | <a href="#" title="Plan">Contact</a>
		</div>
	</div>	
</body>
</html>


la feuille de style pour le menu :


body
{
	margin: 1px 0 ;
	padding: 0 ;
	text-align: center ;
	font-family:Arial, Helvetica, sans-serif;
	font-size:small;
	color:#808080;
	background-color:#FFF;
}

a:link
{
	color:#688CC2;
	text-decoration:none;
	font-weight:bold;
}

a:visited
{
	color:#688CC2;
	text-decoration:none;
	font-weight:bold;
}

a:hover
{
	color:#688CC2;
	text-decoration:underline;
	font-weight:bold;
}

a:active
{
color:#688CC2;
text-decoration:underline;
font-weight:bold;
}

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

/* barre de menu */

div#menu 
{
	position:absolute;
	margin: 0 auto;
}

#menu dl 
{
	float: left;
	width: 107px;
	margin: 0;
	z-index: 100;
}

#menu dt 
{
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	background: #ccc;
	border-right: 1px dotted #FFF;
	height: 30px;
	z-index: 100;
}
#menu dd 
{
	width :200px;
	z-index:100;
}

#menu ul 
{
	border-top:1px solid #FFF;
}

#menu li 
{
	text-align: left;
	padding:0;
	margin:0;
	background: #fff;
	border-top:none;
	border:1px solid #FFF;
	border-top:0;
	z-index:100;
}
#menu li a, #menu dt a 
{
	color: #FFF;
	font-size:0.8em;
	font-weight:bold;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
	z-index:100;
}

#menu li a
{
	background: #8DA113;
	padding: 0 0 0 5px;
}

#menu dt a
{
	background: #8DA113 url(../image/fondMenu.gif) repeat-x;
}

#menu li a:hover, #menu dt a:hover 
{
	background: #FFF;
	color:#8DA113;
	z-index:100;
}


P.S. : merci aux créateurs de ce site pour partager leurs connaissance. (Il fallait que je le dise pour mon premier poste Smiley smile )
Modifié par NeoNeit (14 Sep 2007 - 19:25)
Sujet clos
Aller à