Bonjour à tous !!

Voilà j'ai un problème qui concerne à la fois le HTML et le CSS, je me suis lancé dans un truc que je pensais être tout con mais qui me donne du fil à retordre...

J'ai fait les textes des liens de mon menu principal sous photoshop pour qu'ils ait de beaux effets...
il faut donc que je créer mon menu en mettant les images exportées en tant que liens...

Jusque là tout va bien mais j'aimerai que l'image change au survol, j'ai donc décidé de passer par le CSS est la propriété "background", j'ai créer 3 type d'images : les images transparentes (en PNG) qui serviront pour la partie HTML, les images pour les liens inactif, et les images pour les liens actifs et survolés... que j'utilise dans le CSS pour la partie background.

Voici mon code HTML :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
 
<html>
<div id="hmenu">
 
<ul class="hmenu">
<li class="hmenu"><a id="hmenu-accueil" href="#" title="Accueil"><img src="hmenu/hmenu-transparent_accueil.png" /></a></li>
<li class="hmenu"><a id="hmenu-presentation" href="#" title="Presentation"><img src="hmenu/hmenu-transparent_presentation.png" /></a></li>
<li class="hmenu"><a id="hmenu-contact" href="#" title="Contact"><img src="hmenu/hmenu-transparent_contact.png" /></a></li>
</ul>
</div>
</html>
et mon code CSS :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
<style type="text/css">
ul.hmenu
{
        display:inline;
}
li.hmenu
{
        display:inline;
        list-style:none;
        padding:0;
        margin:0;
}
 
a#hmenu-accueil:link, a#hmenu-accueil:visited
{
        background:url('hmenu/hmenu_accueil.png') no-repeat scroll 0 0 transparent;
        padding:0;
        margin:0;
}
a#hmenu-accueil:hover, a#hmenu-accueil:active
{
        background:url('hmenu/hmenu-activehover_accueil.png') no-repeat scroll 0 0 transparent;
        padding:0;
        margin:0;
}
 
a#hmenu-presentation:link, a#hmenu-presentation:visited
{
        background:url('hmenu/hmenu_presentation.png') no-repeat scroll 0 0 transparent;
        padding:0;
        margin:0;
}
a#hmenu-presentation:hover, a#hmenu-presentation:active
{
        background:url('hmenu/hmenu-activehover_presentation.png') no-repeat scroll 0 0 transparent;
        padding:0;
        margin:0;
}
 
a#hmenu-contact:link, a#hmenu-contact:visited
{
        background:url('hmenu/hmenu_contact.png') no-repeat scroll 0 0 transparent;
        padding:0;
        margin:0;
}
a#hmenu-contact:hover, a#hmenu-contact:active
{
        background:url('hmenu/hmenu-activehover_contact.png') no-repeat scroll 0 0 transparent;
        padding:0;
        margin:0;
}
</style>
Le problème que j'ai c'est qu'aucun background ne s'affiche... ni à l'état inactif du lien ... ni à l'état actif. Les images de background sont pourtant bien chargées par le navigateur.

Je ne vois pas de solution...

merci pour votre aide,

MICKAEL