Menu CSS avec images différentes
Behmai
Messages postés
10
Date d'inscription
Statut
Membre
Dernière intervention
-
Behmai Messages postés 10 Date d'inscription Statut Membre Dernière intervention -
Behmai Messages postés 10 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Voila je souhaiterai faire un menu horizontale, je vais essayez de vous expliquez mon idée accrochez vous ...
menu 1 (1er image sépia) passage de la souris (même image mais en couleur)
menu 2 (2eme image sépia) passage de la souris (même image mais en couleur)
...
Jusqu'à 5 menus
J'ai suivi plusieurs tutos, malheureusement ça ne fonctionne pas :x et le pire c'est que je ne comprends pas pourquoi.
Mes images font 199 px (L) sur 147 px (H) c'est pour une page d'index.
Merci de votre coup de main
Voila je souhaiterai faire un menu horizontale, je vais essayez de vous expliquez mon idée accrochez vous ...
menu 1 (1er image sépia) passage de la souris (même image mais en couleur)
menu 2 (2eme image sépia) passage de la souris (même image mais en couleur)
...
Jusqu'à 5 menus
J'ai suivi plusieurs tutos, malheureusement ça ne fonctionne pas :x et le pire c'est que je ne comprends pas pourquoi.
Mes images font 199 px (L) sur 147 px (H) c'est pour une page d'index.
Merci de votre coup de main
A voir également:
- Menu CSS avec images différentes
- 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
Pourrai tu nous mettre le code de ton menu ?
Pour faire une image qui change au passage de la souris, il y a plusieurs manière de procéder.
En javascript ou en CSS.
Pour faire une image qui change au passage de la souris, il y a plusieurs manière de procéder.
En javascript ou en CSS.
Voila
#conteneur{
width:1O10 px;
height:150 px;
margin-left: 10 px;
margin-right: 10 px;
margin-top: 10px;
margin-bottom:10px;
}
#navigation {
margin: 20 px ;
padding: 150px ;
list-style: none ;
text-align: center ;
}
#navigation li {
display:inline;
margin-right: 1px ;
}
#navigation li a {
background:url(images/webdesign_01) left top no-repeat ;
font: 1em "Trebuchet MS",Arial,sans-serif ;
line-height: 1em ;
text-align: center ;
text-decoration: none ;
padding: 4px 0 ;
}
#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
background: url(images/webdesign_02.jpg) left top no-repeat ;
}
background:url(images/webdesign_01) left top no-repeat ;
Il manque l'extension à ton fichier image.
Tu devrai aussi remplacer:
#navigation li a {
par
#navigation li a:link {
Oups pour l'extension (rougis)
Je vais faire ce que vous m'avez dis merci beaucoup
je vous re contacterai pour la suite
Je vais faire ce que vous m'avez dis merci beaucoup
je vous re contacterai pour la suite
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Re bonjour,
Rien ne fonctionne je m'arrache les cheveux lol. Même avec ce que vous m'avez suggérer plus haut.
J'ai suivi plusieurs tuto dont celui ci :
https://www.alsacreations.com/tuto/lire/574-Creer-des-menus-simples-en-CSS.html
Je ne sais même pas si ce que je souhaite faire est possible, ma prof de css m'a dis que oui, soit en pure css soit avec du javascript.
Je vous ai néanmoins fait une petite maquette avec explications en espérant trouver une solution.
http://img198.imageshack.us/img198/6715/maquetteu.jpg
Merci d'avance
Rien ne fonctionne je m'arrache les cheveux lol. Même avec ce que vous m'avez suggérer plus haut.
J'ai suivi plusieurs tuto dont celui ci :
https://www.alsacreations.com/tuto/lire/574-Creer-des-menus-simples-en-CSS.html
Je ne sais même pas si ce que je souhaite faire est possible, ma prof de css m'a dis que oui, soit en pure css soit avec du javascript.
Je vous ai néanmoins fait une petite maquette avec explications en espérant trouver une solution.
http://img198.imageshack.us/img198/6715/maquetteu.jpg
Merci d'avance