Problème complexité menu

**jbidou88** · 27/10/2010, 23h43

Bonjour, j'ai créé un menu pour mon site internet et je pense qu'il y a une moyen plus simple de le faire. Il me semble qu'il y a beaucoup de code superflu et peut-être que je m'y prend mal. Est-ce que quelqu'un aurait une autre solution ? Merci d'avance

Fichier HTML :

Code :

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

1
2
3
4
5
6
7
<div id="menu">
	<div id="bout_menu"><a class="accueil" href="#"></a></div>
    <div id="bout_menu"><a class="tshirts" href="#"></a></div>
    <div id="bout_menu"><a class="photos" href="#"></a></div>
    <div id="bout_menu"><a class="videos" href="#"></a></div>
    <div id="bout_menu"><a class="contact" href="#"></a></div>
</div>

Fichier 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
#menu {
	position:absolute;
	height:25px;
	width:500px;
	top:100px;
	left:40px;
	z-index:200;
}
 
#bout_menu {
	width:100px;
	float:left;
	z-index:205;
}
 
a.accueil {
	display:block;
	background-image:url(../menu/accueil_1.png);
	width:100px;
	height:25px;
}
 
a.accueil:hover {
	background-image:url(../menu/accueil_2.png);
}
 
a.accueil:visited {
	background-image:url(../menu/accueil_1.png);
}
 
a.tshirts {
	display:block;
	background-image:url(../menu/tshirts_1.png);
	width:100px;
	height:25px;
}
 
a.tshirts:hover {
	background-image:url(../menu/tshirts_2.png);
}
 
a.tshirts:visited {
	background-image:url(../menu/tshirts_1.png);
}
 
a.photos {
	display:block;
	background-image:url(../menu/photos_1.png);
	width:100px;
	height:25px;
}
 
a.photos:hover {
	background-image:url(../menu/photos_2.png);
}
 
a.photos:visited {
	background-image:url(../menu/photos_1.png);
}
 
a.videos {
	display:block;
	background-image:url(../menu/videos_1.png);
	width:100px;
	height:25px;
}
 
a.videos:hover {
	background-image:url(../menu/videos_2.png);
}
 
a.videos:visited {
	background-image:url(../menu/videos_1.png);
}
 
a.contact {
	display:block;
	background-image:url(../menu/contact_1.png);
	width:100px;
	height:25px;
}
 
a.contactl:hover {
	background-image:url(../menu/contact_2.png);
}
 
a.contact:visited {
	background-image:url(../menu/contact_1.png);
}

Merci encore !

**gotteserbin** · 28/10/2010, 08h58

Bonjour,

Effectivement qu'il y a plusieurs façons plus simple de le faire. Je suppose que c'est un menu horizontal. Moi j'utilise généralement les tableaux pour faire mes menus horizontaux. Pas trop de css à faire (dépendant du résultat recherché).

Fais des recherches sur google et tu trouveras pleins de types de menu ainsi que des codes !

Bonne suite.