28172 sujets

CSS et mise en forme, CSS3

Erreur de code pour un menu déroulant

Bonjour
voila je me suis renseigné sur le net pour un menu déroulant en css. J'ai trouvé et essayé de l'appliquer à mon site. J'ai du faire une erreur quelque part car ca ne marche pas.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Jour J</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_emeline4.css" /> 
<script type="text/javascript" src="menu.js"></script>
<script language="JavaScript" src="mm_menu.js"></script>

	   
	   </head>
 
   <body>
       <!-- fond -->
 
       <div id="rubrique">        
           <div>
		   
           <img src="image/emeline_rub.jpg" style="float: left">
		<ul id="menuderoulant">
		<li>		   
		   <a href="emelinepresentation.html"><img src="image/presentation_rub_off.jpg" style="float: left" alt="image/presentation_rub_on.jpg" class="rollOver" /></a>
			<ul class="sousmenu">
			<li><a href="lesmariees.html">Les mariées</a></li>
			<li><a href="lesparents.html">Les parents des mariées</a></li>
			<li><a href="lesfrangins.html">les frangins et frangines</a></li>
			<li><a href="lestemoins.html">Les témoins</a></li>
			</ul>
			
			<ul><img src="image/oiseau1_rub.jpg" style="float: left"></ul>
		   <li>
		   <a href="emelinejourj.html"><img src="image/jourj_rub_off.jpg" alt="image/jourj_rub_on.jpg" style="float: left" class="rollOver" /></a>
		   <ul class="sousmenu">
			<li><a href="lesmariees.html">Les mariées</a></li>
			<li><a href="lesparents.html">Les parents des mariées</a></li>
			<li><a href="lesfrangins.html">les frangins et frangines</a></li>
			<li><a href="lestemoins.html">Les témoins</a></li>
			</ul>
			</li>
		   <ul><img src="image/oiseau2_rub.jpg" style="float: left"></ul>
		   <li>
		   <a href="infospratiques.html"><img src="image/infospratiques_rub_off.jpg" alt="image/infospratiques_rub_on.jpg" style="float: left" class="rollOver" /></a>
		   <ul class="sousmenu">
			<li><a href="lesmariees.html">Les mariées</a></li>
			<li><a href="lesparents.html">Les parents des mariées</a></li>
			<li><a href="lesfrangins.html">les frangins et frangines</a></li>
			<li><a href="lestemoins.html">Les témoins</a></li>
			</ul>
			</li>
		   <ul><img src="image/oiseau3_rub.jpg" style="float: left"></ul>
		   <a href="contact.html"><img src="image/contact_rub_off.jpg" alt="image/contact_rub_on.jpg" class="rollOver" style="float: left" /></a>
			<ul><img src="image/oiseau4_rub.jpg" style="float: left"></ul>	
			</ul>
				</li>
           </div>
		   </div>
		 
		   
		   
		   
		   	<script type="text/javascript">
			var imgs = document.getElementsByTagName('img');
			
			for (var i = 0; i < imgs.length; i++)
			{
				if (imgs[i].className == 'rollOver')
				{
					imgs[i].onmouseover = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
					imgs[i].onmouseout = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
					imgs[i].className = '';
				}
			}
			
			</script>
   </body>
</html>




body
{
background-color: #FBE3DE;
}
img {
border:0;
}

#unite
{
width: 980px;
height: 542px;
margin: auto;
background-image : url("image/fond_emeline.jpg");
background-repeat: no-repeat;
border :2px solid black;
}

#rubrique
{
width: 980px;
height: 542px;
margin: auto;
background-image : url("image/fond_rubrique.jpg");
background-repeat: no-repeat;
border :2px solid black;
}

.menu
{
width: 980px;
height: 126px;
}
.en_tete
{
width: 980px;
height: 173px;
}
.bas_page
{
width: 980px;
height: 243px;
}

/* pour le menu deroulant */


#menuderoulant
{
width: 644px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}

#menuderoulant li
{
float: left;
margin: 0;
padding: 0;
border: 0;
}

#menuderoulant .sousmenu
{
list-style-type: none;
margin: 0;
padding: 0;
border: 0;background: yellow;
}

#menuderoulant .sousmenu li
{
margin: 0;
padding: 0;
border: 0;
}

#menuDeroulant li a:link, #menuDeroulant li a:visited
{
 display: block;
 height: 1%;
 color: #FFF;
 background: #3B4E77;
 margin: 0;
 padding: 4px 8px;
 border-right: 1px solid #fff;
 text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }

#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
 display: block;
 color: #FFF;
 margin: 0;
 border: 0;
 text-decoration: none;
}
#menuDeroulant .sousMenu li a:hover
{
 background-image: none;
 background-color: #F2462E;
}


J'ai vraiment besoin de votre aide car ca me bloque et je ne peux plus avancer sur mon site
J'espère avoir bien posté le mssage cette fois. Excuser moi Smiley lol [/i][/i][/i][/i]
Modifié par gaya_102 (02 Mar 2009 - 20:49)
Hello,

pour conserver une bonne lisibilité des messages sur le forum, il est demandé d'utiliser les balises code pour présenter le code source des exemples.
Pourrais-tu éditer ton message pour te conformer à cette règle de mise en forme ?
Merci d'avance. Smiley cligne

D'autre part un titre comme "Urgent erreur de code en css" a toutes les chances de se perdre dans la masse. Comme indiqué dans les règles du forum il est demandé d'avoir un titre évocateur. Puisque tu seras déjà en train d'éditer ton message ce sera l'occasion de le changer. Smiley langue
Sujet clos
Aller à