Faire un menu via des images

Version imprimable

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:

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:

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

08/05/2012, 10h12
Invité

Bonjour,
- où sont les balises <head>? <body> ?
- ton CSS est bien appelé dans la page ?
- les chemins des images sont-ils les bons ? (dans le CSS = chemin entre le fichier CSS et le dossier des images)
- ... ?

PS : mettre la même class sur <ul> et sur <li> n'est pas une bonne idée.
<ul class="hmenu">
<li class="hmenu">

1/ Quelques modification du code html :
- mets les identifiants sur les <li> (et pas sur les <a>)

- une seule image transparente est suffisante : vide.png (1px x 1px)

- mets des alt="..." sur les images (texte alternatif, si l'image vide n'est pas trouvée
Code:

1 2 3 4 5 <ul id="ulhmenu"> <li class="hmenu" id="hmenu-accueil"><a href="#" title="Accueil"><img src="hmenu/image-vide.png" alt="Accueil"/></a></li> <li class="hmenu" id="hmenu-presentation"><a href="#" title="Presentation"><img src="hmenu/image-vide.png" alt="Presentation" /></a></li> <li class="hmenu" id="hmenu-contact"><a href="#" title="Contact"><img src="hmenu/image-vide.png" alt="Contact" /></a></li> </ul>
2/ code CSS :
- li.hmenu : display:inline-block; + définir les dimensions

- les id étant sur les <li>, enlever les a#hmenu-accueil -> #hmenu-accueil (ou li#hmenu-accueil si tu préfères, mais c'est la même chose)

- indiquer les dimensions pour chaque image
(image-vide.png, qui ne fait que 1x1 px, doit être dimensionné pour faire la taille des images en background) :
#hmenu-accueil a img { width:...px; height:...px; }

10/05/2012, 23h04
Soundboy39

Merci pour ta réponse Jerome,

J'ai attribué les ID au <li> en appliquant tes corrections et j'ai attribué une classe "hmenu" au image, avec un paramètre "max-height" et "max-width",
grâce à ces manipulations je peux désormais voir les images d'arrière-plan.

Malheureusement ceci n’arrange pas mon affaire car les arrières plan sont attribués au <li> et donc il ne varie pas lorsque l'ont survole avec la sourie ou que le lien est actif...

Alors comment faire pour faire la même chose avec les liens ??
Sachant que j'ai réessayer en attribuant les ID les images transparentes continu de superposer les arrières-plans, malgré que la taille de celle-ci soit bien paramétrée...

Bonjour,
=> peux-tu montrer TON CODE ?

Pour changer l'image au survol, c'est (plus ou moins) comme tu avais fait :
Code:

1 2 3 4 5 6 7 8 li#hmenu-accueil { background:url('hmenu/hmenu_accueil.png') 0 0 no-repeat; } li#hmenu-accueil:hover { background:url('hmenu/hmenuhover_accueil.png') 0 0 no-repeat; }

re,

Bon c'est bon j'ai pu faire ce que je voulais, en fait j'ai pu attribué mes images de fond à mes liens en leurs mettant un inline-block à eux aussi, ce qui me permis de leurs donner une hauteur minimum afin que l'image de fond soit visible (a priori le problème venait de là...)

Je vous donne le code :

HTML

Code:

1
2
3
4
5
6
7
8
9
10
 
<div id="hmenu">
 
<ul class="hmenu">
<li  class="hmenu" id="hmenu-accueil"><a class="hmenu" id="hmenu-accueil"  href="index.php" title="Accueil"><img class="hmenu" id="hmenu_transparent_accueil" alt="accueil" src="hmenu/hmenu_transparent_accueil.png" /></a></li>
<li  class="hmenu"  id="hmenu-presentation" ><a class="hmenu" id="hmenu-presentation" href="presentation.php" title="Presentation"><img class="hmenu" id="hmenu_transparent_presentation" alt="presentation" src="hmenu/hmenu_transparent_presentation.png" /></a></li>
<li  class="hmenu" id="hmenu-contact" ><a  class="hmenu" id="hmenu-contact" href="contact.php" title="Contact"><img class="hmenu" alt="contact" id="hmenu_transparent_contact" src="hmenu/hmenu_transparent_contact.png" /></a></li>
</ul>
 
</div>

CSS

Code:

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
 
/* # Gestion de la Liste # */
ul.hmenu
{
	display:inline-block;
}
li.hmenu
{
	list-style:none;
	padding:0;
	margin:0;
	display:inline-block;
}
 
ul.hmenu
{
	display:inline;
}
li.hmenu
{
	list-style:none;
	padding:0;
	margin:0;
	display:inline-block;
	min-height:52px;
}
 
 
/* # Gestion des Liens # */
a.hmenu
{
	display:inline-block;
	height:52px;
}
 
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 
{
	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;
}
 
/* # Gestion des Images # */
img.hmenu
{
	min-height:52px;
}
 
img#hmenu_transparent_accueil
{
	width: 120px;
}
img#hmenu_transparent_presentation
{
	width: 200px;
}
img#hmenu_transparent_contact
{
	width: 130px;
}

Voilà il me reste juste un problème, l'état "actif" des liens n'est pas pris en compte... je vais essayer de trouver mon erreur, si vous la voyez merci de me le dire...

12/05/2012, 10h29
Invité

Citation:

Envoyé par Soundboy39

...(a priori le problème venait de là...)

J'ai envie de dire : "lol".

Citation:

Envoyé par Soundboy39

...je vais essayer de trouver mon erreur,...

Et là je dis : "re-lol".

Si je comprends bien, tu n'as tenu AUCUN compte des conseils donnés ici ?!

Ton code est un bidouillage immonde, avec des class="hmenu" partout (les <li>, a> et <img>) !
[Edit] Oups ! Et les id ! Un id doit être UNIQUE.
Ça tient du miracle si tu arrives à un résultat... satisfaisant. :mouarf:

Dans la vie, il faut savoir faire demi-tour ou prendre un autre chemin quand on se rend compte qu'on fait fausse route...
Comme aurait dû le faire David Vincent, quand il cherchait un raccourci qu'il n'a jamais trouvé...

4 pièce(s) jointe(s)

Comme j'avais du temps à perdre (en réalité, j'aime bien aider les autres !),
voici à quoi devrait ressembler ton code :

Code:

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<style type="text/css">
/* MENU horizontal */
#hmenu
{
	/* menu : dimensions ? position ? ... */
}
#hmenu ul
{
	padding:0;
	margin:0;
}
#hmenu ul li
{
	display:inline-block;
	list-style:none;
	padding:0;
	margin:0;
	text-align:center; /* centrage horizontal des textes */
}
#hmenu ul li a
{
	display:block; /* block : pour pouvoir les dimensionner correctement */
	padding-top:3px; /* centrage vertical des textes, en fonction de la hauteur de l'image de fond et de la taille du texte */
}
 
/* dimensions des <li>, <a> et <img> (vide) : A ADAPTER à chaque image de fond (si différentes) */
#hmenu ul li#hmenu-accueil, #hmenu ul li#hmenu-accueil a, #hmenu ul li#hmenu-accueil a img
{
	width:130px; 	/* A ADAPTER à l'image de fond */
	height:30px;	/* A ADAPTER à l'image de fond */
}
#hmenu ul li#hmenu-presentation, #hmenu ul li#hmenu-presentation a, #hmenu ul li#hmenu-presentation a img
{
	width:130px; 	/* A ADAPTER à l'image de fond */
	height:30px;	/* A ADAPTER à l'image de fond */
}
#hmenu ul li#hmenu-contact, #hmenu ul li#hmenu-contact a, #hmenu ul li#hmenu-contact a img
{
	width:130px; 	/* A ADAPTER à l'image de fond */
	height:30px;	/* A ADAPTER à l'image de fond */
}
 
/* images de fond : sur les <a> */
#hmenu ul li#hmenu-accueil a
{
	background:url('img/image-130x30.png') top center no-repeat;
}
#hmenu ul li#hmenu-presentation a
{
	background:url('img/image-130x30.png') top center no-repeat;
}
#hmenu ul li#hmenu-contact a
{
	background:url('img/image-130x30.png') top center no-repeat;
}
 
/* images de fond : sur les li:hover */
#hmenu ul li#hmenu-accueil:hover a
{
	background:url('img/image-130x30-hover.png') top center no-repeat;
}
#hmenu ul li#hmenu-presentation:hover a
{
	background:url('img/image-130x30-hover.png') top center no-repeat;
}
#hmenu ul li#hmenu-contact:hover a
{
	background:url('img/image-130x30-hover.png') top center no-repeat;
}
 
/* images de fond : sur les li a:active */
#hmenu ul li#hmenu-accueil a:active
{
	background:url('img/image-130x30-active.png') top center no-repeat;
}
#hmenu ul li#hmenu-presentation a:active
{
	background:url('img/image-130x30-active.png') top center no-repeat;
}
#hmenu ul li#hmenu-contact a:active
{
	background:url('img/image-130x30-active.png') top center no-repeat;
}
 
/* textes des liens */
#hmenu ul li a
{
	font-size:1em; /* taille des textes */
	color:green;
	text-decoration:none;
}
#hmenu ul li:hover a
{
	color:red;
	text-decoration:none;
}
</style>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="hmenu">
<ul>
	<li id="hmenu-accueil">
		<a href="" title="Accueil"><img alt="Accueil" src="img/image-vide-1x1.png" /></a>
	</li>
	<li id="hmenu-presentation">
		<a href="" title="Présentation"><img alt="Présentation" src="img/image-vide-1x1.png" /></a>
	</li>
	<li id="hmenu-contact">
		<a href="" title="Contact"><img alt="Contact" src="img/image-vide-1x1.png" /></a>
	</li>
</ul>
</div>

J'ai utilisé des images "perso". A toi de mettre les tiennes.
Merci d'y jeter au moins un oeil.

Citation:

Envoyé par Soundboy39

Voilà il me reste juste un problème, l'état "actif" des liens n'est pas pris en compte...

Je pense que tu confonds "page en cours" (différencier la page en cours par une image différente) avec ":active" (lien "actif" au clic).

Dans mon code ci-dessus, l'image bleu s'affiche au clic sur le lien.
Mais ne reste pas bleu APRES changement de page.

Pour ça, il faut :
1/ rajouter un bout de code (PHP) pour tester sur quelle page on est,
2/ ajouter (via PHP = dynamiquement dans le code) un id (car unique) sur le "menu en cours" :

Code:

1
2
3
	<li id="hmenu-presentation">
		<a id="menuencours" href="" title="Présentation"><img alt="Présentation" src="img/image-vide-1x1.png" /></a>
	</li>

3/ ajouter le CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
/* images de fond : sur le MENU EN COURS */
#hmenu ul li#hmenu-accueil a#menuencours
{
	background:url('img/image-130x30-active.png') top center no-repeat;
}
#hmenu ul li#hmenu-presentation a#menuencours
{
	background:url('img/image-130x30-active.png') top center no-repeat;
}
#hmenu ul li#hmenu-contact a#menuencours
{
	background:url('img/image-130x30-active.png') top center no-repeat;
}

25/05/2012, 21h40
Soundboy39

Désolé pour ce retour très tardif,

Bien j'ai analyser le code, et je l'ai adapté à mon menu,... je l'ai même compris... tout fonctionne bien désormais !!

Par contre je dois dire, et là on va encore me faire un LOL, que cette manière de faire et assez nouvelle pour moi... je ne crois même pas l'avoir déjà vu quelques part... et pourtant j''en ai déjà vu des feuilles de style, puisqu'il m'arrive souvent de retravailler des templates de CMS...
et en générale la méthode et similaire à la mienne... avec des "classes" partout, mais bon c'est claire que c'est beaucoup plus propre comme ça.

Pour ce qui est du lien "actif", j'ai effectivement confondu avec autre chose... je vais donc utiliser du PHP pour générer cet effet !!

Merci beaucoup pour ton aide jreaux62 !!
01/06/2012, 15h18
hannibal813

Le javascript aurait-il pu faire l'affaire grâce à une fonction mousehover ?