Faire un menu via des images

**Soundboy39** · 08/05/2012, 10h02

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

Invité · 08/05/2012, 10h12

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">

Invité · 08/05/2012, 10h42

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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; }

**Soundboy39** · 10/05/2012, 23h04

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...

Invité · 11/05/2012, 09h01

Bonjour,
=> peux-tu montrer TON CODE ?

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

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

**Soundboy39** · 12/05/2012, 09h39

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

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
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...

Invité · 12/05/2012, 10h29

Envoyé par Soundboy39

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

J'ai envie de dire : "lol".

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.

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é...

Invité · 12/05/2012, 11h06

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

Code css :

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
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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

**Soundboy39** · 25/05/2012, 21h40

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 !!

**hannibal813** · 01/06/2012, 15h18

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

Faire un menu via des images

HTML

Discussions similaires

Partager

Partager