18041 sujets

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

Deux menus différent

Bonjour,

Je suis face à un problème, j'ai créer deux menus différents pour mon site (Haut de page et pied de page).
Pour les créer j'ai utilisé deux page différente, histoire de tester séparément ces menus.
Mais lorsque j'ai voulu les mettre sur la même page problème, je n'utilise pas les mêmes feuille de style. Si je met tout sur la même feuille de style les deux menu sont les même.

J'ai besoin d'aide svp, merci d'avance

Mon premier menu (header):

Code HTML:
<body>

<div id="banniere"></div>

<div class="menu">
	<ul>
 		<li><a href="#">ACCUEIL</a></li>
	 	<li><a href="#">FESTIVAL IN</a></li>
 		<li><a href="#">FESTIVAL OFF</a></li>
 		<li><a href="#">BILLETTERIE</a></li>
 		<li><a href="#">CONTACT</a></li>
	</ul>
</div>

</body>


CODE css :
.menu{
	width:1000px;
	margin:0 auto 0 auto;
	height:30px;
	clear:both;
	}

ul {
	padding:0;
	margin:0;
	list-style-type:none;
	}

li {
 	float:left; 
	border-left:#;
 	}
	
ul li a {
 	display:block;
 	float:left;   
 	width:200px;
 	font-family:Arial, Helvetica, sans-serif;
 	font-size:larger;
 	line-height:30px; 
 	background:black url(header_footer/bouton_all.png) ;
 	color:#343436;
 	text-decoration:none;
 	text-align:center;
 	}
	
ul li a:hover, a:focus, a:active {
	background:black url(header_footer/bouton_hover.png) ;
 	color:#BFBFC4;
 	}


Deuxieme menu (footer) :
HTML:
<div class="menu">
	<ul>
 		<li><a href="#">Tremplin</a></li>
	 	<li><a href="#">Presse</a></li>
 		<li><a href="#">Eco Festival</a></li>
 		<li><a href="#">Partenaire</a></li>
 		<li><a href="#">Mention Légale</a></li>
	</ul>
    </div>


CSS: 
.menu{
	width:1000px;
	margin:0 auto 0 auto;

	}

ul {
	padding:0;
	margin:0;
	list-style-type:none;
	}

li {
 	float:left; 
	border-left:#;
 	}
	
ul li a {
	border-radius: 0px 0px 10px 10px;
 	display:block;
 	float:left;   
 	width:200px;
 	font-family:Arial, Helvetica, sans-serif;
 	font-size:75%;
 	line-height:15px; 
 	background:#D2D3D5 ;
 	color:black;
 	text-decoration:none;
 	text-align:center;
 	}
	
ul li a:hover {
	background:#707070;
 	color:white;
 	}

Modifié par art_tom (29 Apr 2011 - 13:29)
Bonjour, pour que chacun de tes menus ait ses propres styles css, ,tu n'as qu'à leur attribuer leur propre identifiant.

<ul class="menu"></ul>

<ul class="menu-pied"></ul>

Tu peux appliquer la classe directement sur la balise ul.
Merci,

Je vais essayer.
J'ai vu qu'on pouvait inclure carrément les menu, comme ça on à juste un document à modifier à chaque fois. Mais je ne me souvient plus comment ça fonctionne.

Merci
Sujet clos
Aller à