Menu

Menu CSS - Plusieurs Images [Fermé]

- - Dernière réponse : RAD ZONE
Messages postés
5250
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
20 février 2019
- 26 mars 2009 à 15:26
Bonjour,

Je souhaites faire un menu horizontale en CSS.

Ce menu serait faire d'image aligner horizontalement et chaque image contiendrais un texte insérer par moi même. Exemple : Contact, Nos produits etc...

Je ne sais pas comment mettre cela en forme en CSS, pouvez-vous m'aider svp?

Merci.
Afficher la suite 

5 réponses

Messages postés
5250
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
20 février 2019
1768
0
Merci
Bonjour,

Merci beaucoup de ta réponse rapide, mais par contre, mon menu comporte 6 liens, mais le première image du premier lien n'est pas la même que les 5 autres saurait tu connais je pourrais faire?

Voici mon code

HTML :

<div id="navigation">
<ul class="font_menu">
<li><a href="#">TEST</a></li>
<li><a href="#">Accueil</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
</div>

CSS :

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

#navigation li{
float: left;
margin: 0;
padding: 0;
}

#navigation li a
{
background: url(../Images/menu_2.gif);
height:63px;
width: 125px;
float: left;
display: block;
text-decoration: none;
color:#FFFFFF;
text-align:center;
}
#navigation li a:hover{
color:#FFFFFF;
text-decoration:underline;
}
.font_menu{
font-family:Arial, Helvetica, sans-serif;

}
Messages postés
5250
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
20 février 2019
1768
0
Merci
ESSAYE avec ca et tu adapte !!

<div id="navigation">
<ul class="font_menu">
 <li><a id="lien1" href="#">lien1</a></li> 
   <li><a id="lien2" href="#">lien2</a></li> 
   <li><a id="lien3" href="#">lien3</a></li> 
   <li><a id="lien4" href="#">lien4</a></li> 
   <li><a id="lien5" href="#">lien5</a></li> 
  <li><a id="lien6" href="#">lien6</a></li> 
</ul>
</div> 


CSS

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

#navigation li{
float: left;
margin: 0;
padding: 0;
}

#navigation li a
{
height:63px;
width: 125px;
float: left;
display: block;
text-decoration: none;
color:#FFFFFF;
text-align:center;
}
#navigation li a:hover{
color:#FFFFFF;
text-decoration:underline;
}
.font_menu{
font-family:Arial, Helvetica, sans-serif;

}

a#lien1{
background-image: url(c1.jpg);

}
a#lien1:hover{
background-image: url(c2.jpg); 
}

a#lien2{
background-image: url(h1.jpg); 

}
a#lien2:hover{
background-image: url(h2.jpg);
}
a#lien3{
background-image: url(m1.jpg); 
height: 32px;
}
a#lien3:hover{
background-image: url(m2.jpg);
}
a#lien4{
background-image: url(b1.jpg); 

}
a#lien4:hover{
background-image: url(b2.jpg);
}
a#lien5{
background-image: url(j1.jpg); 

}
a#lien5:hover{
background-image: url(j2.jpg);
}

a#lien6{
background-image: url(p1.jpg); 

}
a#lien6:hover{
background-image: url(p2.jpg);
}

0
Merci
Bonjour,

merci^^

par contre j'ai essayer un autre truc vu que c'est des images différentes, ça fonctionne, mais je sais pas ce que tu en pensses, si sa fait propre ou un peu sale ...

HTML :

<div id="navigation" >
<ul class="font_menu">
<li class="menu_1"><a href="#">Accueil</a></li>
<li class="menu_2"><a href="#">Nos marchés</a></li>
<li class="menu_3"><a href="#">Programme</a></li>
<li class="menu_4"><a href="#">Nos partenaires</a></li>
<li class="menu_5"><a href="#">Qui sommes nous?</a></li>
<li class="menu_6"><a href="#">Nous contacter</a></li>
</ul>
</div>

CSS :

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

#navigation li{
float: left;
margin: 0;
padding: 0;
}

.menu_1{
background-image:url(../Images/menu_1.gif);
height:63px;
width:142px;
}
.menu_2{
background-image:url(../Images/menu_2.gif);
height:63px;
width:125px;
}
.menu_3{
background-image:url(../Images/menu_3.gif);
height:63px;
width:125px;
}

ETC jusqu'a .menu_6

merci ^^
Messages postés
5250
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
20 février 2019
1768
0
Merci
c est pareil sauf que tu as donne des class au des id , et que tu donne une taille differente a chaque lien !

mais c est bon !

et n oublis pas les hover si tu veux changer les image au passage de la sourie