Menu CSS avec images différentes

Fermé
Behmai Messages postés 10 Date d'inscription lundi 21 janvier 2008 Statut Membre Dernière intervention 11 mars 2010 - 28 févr. 2010 à 18:39
Behmai Messages postés 10 Date d'inscription lundi 21 janvier 2008 Statut Membre Dernière intervention 11 mars 2010 - 1 mars 2010 à 13:28
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
A voir également:

5 réponses

arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
28 févr. 2010 à 18:49
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.
0
Behmai Messages postés 10 Date d'inscription lundi 21 janvier 2008 Statut Membre Dernière intervention 11 mars 2010
28 févr. 2010 à 18:51
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 ; 
    } 
0
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
28 févr. 2010 à 18:53
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 {
0
Behmai Messages postés 10 Date d'inscription lundi 21 janvier 2008 Statut Membre Dernière intervention 11 mars 2010
28 févr. 2010 à 20:10
Oups pour l'extension (rougis)

Je vais faire ce que vous m'avez dis merci beaucoup

je vous re contacterai pour la suite
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Behmai Messages postés 10 Date d'inscription lundi 21 janvier 2008 Statut Membre Dernière intervention 11 mars 2010
1 mars 2010 à 13:28
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
0