Menu CSS - Plusieurs Images
Fermé
Vignoo
-
26 mars 2009 à 14:36
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 - 26 mars 2009 à 15:26
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 - 26 mars 2009 à 15:26
A voir également:
- Menu CSS - Plusieurs Images
- Menu déroulant excel - Guide
- Windows 11 menu démarrer classique - Guide
- Canon quick menu - Télécharger - Utilitaires
- Des images - Guide
- Réinitialiser menu démarrer windows 10 - Guide
5 réponses
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
26 mars 2009 à 14:38
26 mars 2009 à 14:38
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;
}
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
26 mars 2009 à 15:07
26 mars 2009 à 15:07
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
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
26 mars 2009 à 15:26
26 mars 2009 à 15:26
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
mais c est bon !
et n oublis pas les hover si tu veux changer les image au passage de la sourie