A voir également:
- Menu horizontal CSS avec 2 images
- Menu déroulant excel - Guide
- 2 comptes whatsapp - Guide
- Menu démarrer windows 11 - Guide
- Canon quick menu - Télécharger - Utilitaires
- 2 ecran pc - Guide
2 réponses
Sans voir le code je voit pas comment t'aider.
Il faut un bloc(div par exemple) avec une image d'arrière plan qui contient les menus(liens) et faire pour chaque menu(lien <a>) une classe différente vu qu'il y a une image différente. Euh quand tu dit "over" j'imagine que tu parles de la pseudo classe :hover (déjà si c'est mal écrit ça marcheras pas) qui indiques que l'image change au survol.
Bon je suit sympa en voilà un morceau à adapter à ta sauce pour l'alignement et les positionnements:
Les déclarations de styles dans le <head>
Puis dans le <body> on aplliques le css
Il faut un bloc(div par exemple) avec une image d'arrière plan qui contient les menus(liens) et faire pour chaque menu(lien <a>) une classe différente vu qu'il y a une image différente. Euh quand tu dit "over" j'imagine que tu parles de la pseudo classe :hover (déjà si c'est mal écrit ça marcheras pas) qui indiques que l'image change au survol.
Bon je suit sympa en voilà un morceau à adapter à ta sauce pour l'alignement et les positionnements:
Les déclarations de styles dans le <head>
<style type="text/css" rel="stylesheet">
div#container_menus{
background-image:url(image_fond_menus.jpg);
background-repeat-repeat-x; <!--// va répéter l'image horizontalement seulement si besoin, sinon il faut indiquer no-repeat) //-->
background-position:0% 80%; <!-- indiques à quel endroit va se placer l'image la premiére valeur (0%) indique la position à gauche et la 2nd valeur indiques la position en hauteur à partir du haut donc 80% pour a peu près en bas du div container //-->
}
a.menu1{
background-image:url(image1inactif.png);
}
<!-- le fameux survol hover //-->
a.menu1:hover{
background-image:url(image1survol.png);
}
a.menu2{
background-image:url(image1inactif.png);
}
a.menu2:hover{
background-image:url(image2survol.png);
}
a.etc{
background-image:url(image_etc.png);
}
a.menu2:hover{
background-image:url(image_etc_survol.png);
}
</style>
Puis dans le <body> on aplliques le css
<div id="container_menus"> <a href="#" class="menu1">Lien 1 </a> <a href="#" class="menu2">Lien 2 </a> <a href="#" class="etc">et cetera </a> </div>
Tout d'abord, merci de ta réponse !
une fois le code mofidier j'ai ça :
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css" rel="stylesheet">
div#container_menus{
background-image:url(image_fond_menus.jpg);
background-repeat-repeat-x; <!--// va répéter l'image horizontalement seulement si besoin, sinon il faut indiquer no-repeat) //-->
background-position:0% 80%; <!-- indiques à quel endroit va se placer l'image la premiére valeur (0%) indique la position à gauche et la 2nd valeur indiques la position en hauteur à partir du haut donc 80% pour a peu près en bas du div container //-->
}
a.menu1{
background-image:url(css/images/nav.jpg);
}
<!-- le fameux survol hover //-->
a.menu1:hover{
background-image:url(css/images/home-over.png);
}
a.menu2{
background-image:url(css/images/nav.pg);
}
a.menu2:hover{
background-image:url(css/images/portfolio-over.png);
}
a.etc{
background-image:url(css/images/nav.pg);
}
a.menu2:hover{
background-image:url(css/images/contact-over.png);
}
</style>
</head>
<body>
<div id="container_menus">
<a href="#" class="menu1">Lien 1
</a>
<a href="#" class="menu2">Lien 2
</a>
<a href="#" class="etc">et cetera
</a>
</div>
</body>
</html>
Mais ça ne marche toujours pas j'ai en effet un bout de l'image en fond et le texte devient noir au passage de la souris (mon image over est noir mais il y a un motif dessus). Je pense aller vers quelque chose de plus simple merci de ton aide.
une fois le code mofidier j'ai ça :
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css" rel="stylesheet">
div#container_menus{
background-image:url(image_fond_menus.jpg);
background-repeat-repeat-x; <!--// va répéter l'image horizontalement seulement si besoin, sinon il faut indiquer no-repeat) //-->
background-position:0% 80%; <!-- indiques à quel endroit va se placer l'image la premiére valeur (0%) indique la position à gauche et la 2nd valeur indiques la position en hauteur à partir du haut donc 80% pour a peu près en bas du div container //-->
}
a.menu1{
background-image:url(css/images/nav.jpg);
}
<!-- le fameux survol hover //-->
a.menu1:hover{
background-image:url(css/images/home-over.png);
}
a.menu2{
background-image:url(css/images/nav.pg);
}
a.menu2:hover{
background-image:url(css/images/portfolio-over.png);
}
a.etc{
background-image:url(css/images/nav.pg);
}
a.menu2:hover{
background-image:url(css/images/contact-over.png);
}
</style>
</head>
<body>
<div id="container_menus">
<a href="#" class="menu1">Lien 1
</a>
<a href="#" class="menu2">Lien 2
</a>
<a href="#" class="etc">et cetera
</a>
</div>
</body>
</html>
Mais ça ne marche toujours pas j'ai en effet un bout de l'image en fond et le texte devient noir au passage de la souris (mon image over est noir mais il y a un motif dessus). Je pense aller vers quelque chose de plus simple merci de ton aide.
