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

Faire un menu via des images

HTML

Vue hybride

Discussions similaires

Partager

Partager