Remettre en ordre mon menu déroulant

Question

gaya_102

29 Aug 2009 à 09:56

Bonjour,
http://www.lemondedegaya.fr/mariage2.php

mon menu a des soucis.
Je voudrais que mes images se suivent et que mes rollover fonctionnent mais je n'y arrivent pas

css de mon menu déroulant

/**********************************************************
				STYLES GENERAUX
**********************************************************/
 
img { 
	border: 0; 
	display: block; 
}
 
#logo { 
	float: left;
}
 
 
/***********************************************************
					MENU HORIZONTAL
**********************************************************/
 
#menuHorizon {
	margin-left: 90px;
	padding: 0;
	margin: 0;

}
 
#menuHorizon li {
	position: relative;
	float: left; /* mes les boutons sur la gauche*/
	list-style: none;

	font-family:Comic Sans MS, Times New Roman, Times, serif;
	text-decoration: none;
}
 
 
#menuHorizon li a { /* sous menu of*/
	display: block;
	line-height: 22px;/* hauteur de chaques boutons des sous menus*/
	text-decoration: none;
font-size: 17px;
	color: #b04cbf;/* couleur de la police*/
	width:100%;
}
 
#menuHorizon li a:hover{ /* sous menu on*/
	background-color: #f8d8fc;/* couleur du fond du sous menu en on*/
	color: purple; /* couleur de la police sous menu en on*/
	font-size: 17px;
} 
 
#menuHorizon li ul {
	position: absolute;
	top: 28px;
	display: none;
	left: 0; /* deplace les sous menu vers la droite*/
	padding: 0;/* marge a l'interieur des sous menus vers les bord*/
	margin: 0;
	border: 1px solid #000;
	background: #fff; /* indiqueras une couleur de fond blanche */
font-size: 15px;
}
 
#menuHorizon li:hover > ul {
	display: block;
}
 
#menuHorizon li ul li {
	float: none;
	width: 170;/* largeur des sous menu*/
	border:0px solid #000; /* créeras une bordure noir de 1 px tout autour de chaque lien */

}
 

 
#menuHorizon li ul li a {
width:158px;
	padding: 0 5px; /* hauteur et largeur de l'ensemble de sous menu*/
	border:1px solid #000; /* créeras une bordure noir de 1 px tout autour de chaque lien */

}

<div id="second">
   
    <ul id="menuHorizon">
          <li class="deroulant" style="width:156px"><a href="accueil.php"><img src="images/accueil_off.jpg" alt="images/accueil_on.jpg" class="rollOver" /></a>            
           
            </li>
 
<li><img src="images/fleur_menu_page.jpg" alt="images/fleur_menu_page.jpg"/></li>
     
            <li class="deroulant" style="width:78px"><a href="mariage.php"><img src="images/mariage_off.jpg" alt="images/mariage_on.jpg" class="rollOver" /></a>
              <ul>
            	 <li><a href="prestataires.php">La collection</a></li>
				 <li><a href="deroulement.php">Les différents formats</a></li>
				 <li><a href="voyage.php">Les différents papier</a></li>

</ul>
</li>

<li><img src="images/fleur_menu_page.jpg" alt="images/fleur_menu_page.jpg"/></li>
     
     
            <li class="deroulant" style="width:160px"><a href="naissance.php"><img src="images/naissance_off.jpg" alt="images/naissance_on.jpg" class="rollOver" /></a>
                <ul>
              	  <li><a href="prestataires.php">La collection</a></li>
				 <li><a href="deroulement.php">Les différents formats</a></li>
				 <li><a href="voyage.php">Les différents papier</a></li>
        	  
               </ul>
            </li>
<li><img src="images/fleur_menu_page.jpg" alt="images/fleur_menu_page.jpg"/></li>
			  
			<li class="deroulant" style="width:160px"><a href="divers.php"><img src="images/divers_off.jpg" alt="images/divers_on.jpg" class="rollOver" /></a>
                <ul>
              	  <li><a href="commentvenir.php">Comment venir</a></li>
              	  <li><a href="hebergement.php">Hébergement</a></li>
        	  
               </ul>
            </li>
<li><img src="images/fleur_menu_page.jpg" alt="images/fleur_menu_page.jpg"/></li>
          <li class="deroulant" style="width:89px"><a href="contact.php"><img src="images/contact_off.jpg" alt="images/contact_on.jpg" class="rollOver" /></a>
            
          </li>
<li><img src="images/fleur_menu_page.jpg" alt="images/fleur_menu_page.jpg"/></li>
     
    </div>

merci d'avance de votre aide

gaya_102

29 Aug 2009 à 15:20

j'ai reussi a le remettre un peu comme je voulais pas les rollover ne marche plus

quelqu'un peut m'aider?

/**********************************************************
				STYLES GENERAUX
**********************************************************/
 
img { 
	border: 0; 
	display: block; 
}
 
#logo { 
	float: left;
}
 
 
/***********************************************************
					MENU HORIZONTAL
**********************************************************/
 
#menuHorizon {
	margin-left: 90px;
	padding: 0;
	margin: 0;

}
 
#menuHorizon li {
	position: relative;
	float: left; /* mes les boutons sur la gauche*/
	list-style: none;
	font-family: times, Helvetica, sans-serif;
	text-decoration: none;
}
 
 
#menuHorizon li a { /* sous menu of*/
	display: block;
	line-height: 25px;/* hauteur de chaques boutons des sous menus*/
	text-decoration: none;
	color: green;/* couleur de la police*/
	width:100%;
}
 
#menuHorizon li a:hover{ /* sous menu on*/
	background-color: black;/* couleur du fond du sous menu en on*/
	color: pink; /* couleur de la police sous menu en on*/
} 
 
#menuHorizon li ul {
	position: absolute;
	display: none;
	left: 0; /* deplace les sous menu vers la droite*/
	padding: 0;/* marge a l'interieur des sous menus vers les bord*/
	margin: 0;
	border: 1px solid #000;
	background: #fff; /* indiqueras une couleur de fond blanche */

}
 
#menuHorizon li:hover > ul {
	display: block;
}
 
#menuHorizon li ul li {
	float: none;
	width: 170px;/* largeur des sous menu*/
	border:0px solid #000; /* créeras une bordure noir de 1 px tout autour de chaque lien */

}
 

 
#menuHorizon li ul li a {
width:158px;
	padding: 0 5px; /* hauteur et largeur de l'ensemble de sous menu*/
	border:1px solid #000; /* créeras une bordure noir de 1 px tout autour de chaque lien */

<div id="second">
   
    <ul id="menuHorizon">
	<li><img src="images/separation.jpg" alt="images/separation.jpg"/></li>

          <li class="deroulant"><a href="accueil.php"><img src="images/accueil_off.jpg" alt="images/accueil_on.jpg" class="rollOver" /></a>            
           
            </li>
	<li><img src="images/separation.jpg" alt="images/separation.jpg"/></li>
<li><img src="images/fleur_menu_page.jpg" alt="images/fleur_menu_page.jpg"/></li>
	<li><img src="images/separation.jpg" alt="images/separation.jpg"/></li>
            <li class="deroulant" ><a href="mariage.php"><img src="images/mariage_off.jpg" alt="images/mariage_on.jpg" class="rollOver" /></a>
              <ul>
            	 <li><a href="prestataires.php">La collection</a></li>
				 <li><a href="deroulement.php">Les différents formats</a></li>
				 <li><a href="voyage.php">Les différents papier</a></li>

</ul>
</li>
	<li><img src="images/separation.jpg" alt="images/separation.jpg"/></li>
<li><img src="images/fleur_menu_page.jpg" alt="images/fleur_menu_page.jpg"/></li>
	<li><img src="images/separation.jpg" alt="images/separation.jpg"/></li>
     
            <li class="deroulant"><a href="naissance.php"><img src="images/naissance_off.jpg" alt="images/naissance_on.jpg" class="rollOver" /></a>
                <ul>
              	  <li><a href="prestataires.php">La collection</a></li>
				 <li><a href="deroulement.php">Les différents formats</a></li>
				 <li><a href="voyage.php">Les différents papier</a></li>
        	  
               </ul>
            </li>
	<li><img src="images/separation.jpg" alt="images/separation.jpg"/></li>

<li><img src="images/fleur_menu_page.jpg" alt="images/fleur_menu_page.jpg"/></li>
	<li><img src="images/separation.jpg" alt="images/separation.jpg"/></li>

			  
			<li class="deroulant"><a href="divers.php"><img src="images/divers_off.jpg" alt="images/divers_on.jpg" class="rollOver" /></a>
                <ul>
              	  <li><a href="commentvenir.php">Comment venir</a></li>
              	  <li><a href="hebergement.php">Hébergement</a></li>
        	  
               </ul>
            </li>
	<li><img src="images/separation.jpg" alt="images/separation.jpg"/></li>
<li><img src="images/fleur_menu_page.jpg" alt="images/fleur_menu_page.jpg"/></li>
	<li><img src="images/separation.jpg" alt="images/separation.jpg"/></li>

          <li class="deroulant"><a href="contact.php"><img src="images/contact_off.jpg" alt="images/contact_on.jpg" class="rollOver" /></a>
            
          </li>
	<li><img src="images/separation.jpg" alt="images/separation.jpg"/></li>

     
    </div>

<!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>le monde de gaya et ses faire part</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <meta name="Description" content="Vos faire-part de naissance, mariage, remerciements, stickers et tableaux personnalisés qui vous correspondent le mieux ... Aide pour vos événements : mariage/pacs, communion, anniversaire ...">
	<meta name="keywords" content="faire, part, parts, faire-parts, faireparts, faire part, fairepart, mariage, deuil, deces, remerciement, union, naissance, fete, bebe, marie, ligne, en-ligne, online, original, artisanal, bapteme, papier, rare, unique, maries, creation, main, qualite, travail, soigne, soin, passion, invite, invitation, jubile, menu, remerciement, livre d'or" /><meta name="Robots" content="All">
<meta name="author" content="Thaon Sandrine">
<meta name="revisit-after" content="5 days">

<base href="http://www.lemondedegaya.fr">
		<link rel="stylesheet" href="menu2.css" type="text/css" media="screen"/>
	    <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="page.css" />
		
		</script>
		   
		   	<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>

</head>
 
   <body>

 
       <div id="unite">      

<div id="titre">   
 
 Le monde de Gaya
 
 </div>  
 <div id="texte">   
 
 Faire-part de mariage originaux et  personnalisés.   <br>
 
 </div>  
	   
           <div id="menubas">
          <?php
include("menu2.php");
?> 
          
           </div>
           
       </div>        
   </body>
</html>

[/i][/i][/i][/i]

Laurie-Anne

30 Aug 2009 à 06:42

Bonjour

Serait-il possible d'arrêter de créer des nouveaux sujets pour le même problème (le menu) ?

gaya_102

30 Aug 2009 à 09:24

c'est pas le même problème à chaques fois. la dernière fois j'avais utiliser une autre méthode voyant que j'étais dans une impasse j'ai essayer autres choses. le problème n'est pas le même. Désolé de vous avoir embêté avec des mes problèmes. Dorénavant je ne vous embêterai plus avec mes questions

Sujet clos

CSS et mise en forme, CSS3

Remettre en ordre mon menu déroulant