A voir également:
- Menu CSS - Plusieurs Images
- Menu déroulant excel - Guide
- Des images - Guide
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu contextuel classique - Guide
- Windows 11 menu démarrer classique - Guide
5 réponses
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;
}
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;
}
ESSAYE avec ca et tu adapte !!
CSS
<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);
}
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 ^^
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 ^^
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question