Menu CSS - Plusieurs Images
Fermé
Vignoo
-
26 mars 2009 à 14:36
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 - 26 mars 2009 à 15:26
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 - 26 mars 2009 à 15:26
A voir également:
- Menu CSS - Plusieurs Images
- Menu déroulant excel - Guide
- Menu démarrer windows 11 - Guide
- Canon quick menu - Télécharger - Utilitaires
- Menu demarrer - Guide
- Images gratuites - Guide
5 réponses
RAD ZONE
Messages postés
5224
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
22 mars 2024
1 353
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
5224
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
22 mars 2024
1 353
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
5224
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
22 mars 2024
1 353
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
