Aller au menu - Aller au contenu

Icône Un menu horizontal

Par Avatar neoxx78
Mise à jour : 22/08/2008
Difficulté : Facile Facile Creative Commons BY-NC-SA
1 116 visites depuis 7 jours, classé 109/786
Bienvenue dans ce petit tutoriel portant sur la création d'un menu horizontal de base.

Vous avez sûrement suivi les cours sur le XHTML/CSS de M@teo21, et surtout son TP : Créons le design de votre site Web. Non ? o_O Allez les lire, alors. Si c'est déjà le cas, prenez le tutoriel qui suit comme un petit supplément à ce TP : nous n'irons donc pas jusqu'au top niveau de la programmation web, je ne vous donnerai que l'essentiel. À vous après de laisser libre cours à votre imagination.

Nous allons donc par la suite étudier différents procédés pour coder votre menu horizontal. Un menu horizontal permet une navigation plus simple et intuitive sur votre site. Je trouve aussi que ça donne un aspect plus « pro » au site mais ça, c'est un avis personnel.
En d'autres termes, un menu horizontal est souvent très apprécié des visiteurs. Mais qu'attendons-nous pour démarrer !
Retour en haut
Sommaire du tutoriel :
Icône du chapitre
Retour en haut

La structure XHTML

Nous commencerons par coder notre structure XHTML : c'est le plus facile.

En XHTML, un menu se déclare avec une liste non ordonnée <ul> et <li>. C'est plus propre dans le code et cela respecte mieux la sémantique qu'une flopée de <p> alignés. :-° Si l'envie vous prend, vous pouvez aussi le faire avec une liste ordonnée <ol> : chacun ses goûts.

Donc : une liste <ul> avec une puce <li> pour chaque bouton du menu... Qu'est-ce qu'il manque ? La balise <a> pour le lien du bouton, bien sûr. Tout y est !

Ce qui nous donne au final :

Code : HTML
1
2
3
4
5
6
7
<ul id="menu_horizontal">
<li><a href="accueil.php">Accueil</a></li>
<li><a href="news.php">News</a></li>
<li><a href="livreor.php">Livre d'or</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="admin.php">Admin</a></li>
</ul>


Voilà un menu basique, c'est-à-dire avec cinq boutons — ce qui n'est ni trop ni trop peu. Comme nous le voyons, un menu horizontal vous sert à vous diriger vers vos pages principales, inutile d'y mettre toutes vos pages : il faut que ça reste clair pour le visiteur, la navigation sur votre site n'en sera que simplifiée.

La navigation est primordiale sur un site, autant que son aspect ! Gardez toujours en tête que votre site doit pouvoir être visité facilement et intuitivement par tous les utilisateurs.


Mais ça y est, c'est déjà terminé ! Heureusement, il reste encore la partie en CSS qui mettra en forme notre menu (car pour l'instant il est encore à la verticale).
Retour en haut

Avec display : inline

Le codage XHTML fini, la question que nous devons nous poser maintenant est :

Comment mettre notre menu à l'horizontale grâce au CSS ?

En CSS, il existe deux propriétés qui nous intéressent pour mettre un menu à l'horizontale ; la première que nous allons étudier est display : inline. Cela vous fait penser à display : block, non ? En réalité, display : inline fait exactement le contraire de display : block. Vous commencez à voir l'utilité de cette propriété ?

Une balise block, par définition, va toujours à la ligne ; or, si on lui demande de se comporter comme une balise en-ligne, elle restera sur la même ligne.

Il nous suffit donc d'appliquer cette propriété aux puces <li> pour qu'elles se placent sur une même ligne. Et voilà le travail :

Code : CSS
1
2
3
4
5
6
7
8
/* Je sélectionne les <li> du menu horizontal */
ul#menu_horizontal li { 
display : inline;
padding : 0 0.5em; /* Pour espacer les boutons entre eux */
}
ul#menu_horizontal {
list-style-type : none; /* Car sinon les puces se placent n'importe où */
}


Voici ce que ça nous donne :
Image utilisateur


À vous d'adapter ensuite ce menu à votre design : en quelques coups de CSS, ce n'est plus qu'un jeu d'enfants.

Cependant, cette propriété limite quand même nos possibilités pour le design.


Par exemple, il sera impossible d'aligner une partie des boutons à gauche et l'autre à droite — comme c'était le cas sur le Site du Zéro à une certaine époque. Cette disposition peut sûrement vous intéresser, elle n'est pourtant pas réalisable avec le code montré ci-dessus. Heureusement, il existe une autre technique un petit peu plus longue. Ouvrez grand vos oreilles, heu... les yeux en l'occurrence.
Retour en haut

Avec float : left ou right

La technique du float est moins claire que la précédente, mais elle permet un affichage des boutons à gauche et à droite grâce à float : left et right.

Cette technique offre donc une possibilité de plus que la précédente : c'est peut-être pour cela que vous la préférerez à l'autre (c'est mon cas). Mais, tout d'abord, il faudra changer un petit peu notre code XHTML. Ce changement consiste à rajouter une class "bouton_gauche" pour les liens qui seront à gauche, et une autre "bouton_droite" pour les boutons qui seront à droite. (Ouf, je reste logique.) ;)

Code : HTML
1
2
3
4
5
6
7
<ul id="menu_horizontal">
<li class="bouton_gauche"><a href="accueil.php">Accueil</a></li>
<li class="bouton_gauche"><a href="news.php">News</a></li>
<li class="bouton_gauche"><a href="livreor.php">Livre d'or</a></li>
<li class="bouton_droite"><a href="admin.php">Admin</a></li>
<li class="bouton_droite"><a href="contact.php">Contact</a></li>
</ul>


Hé ! attends ! Pourquoi as-tu inversé les puces « Admin » et « Contact » ?


Elles étaient dans l'ordre inverse avec la technique display : inline ; or, je veux que mes boutons soient dans le même ordre qu'avant.

Je m'explique. Dans notre CSS, nous allons appliquer la propriété float à nos puces <li>. La class "bouton_gauche" se verra attribuer un float : left et l'autre class "bouton_droite", un float : right. Par définition, un flottant est un élément qu'on veut faire « entourer », « flotter », « immerger » dans l'élément qui le suit. Retenez l'exemple de la lettrine qui flotte au début d'un paragraphe. ;)

Dans notre cas, cela nous donne :
  • la puce « Accueil » flotte à gauche de « News » ;
  • « News » flotte lui-même à gauche de « Livre d'or » ;
  • « Livre d'or » flotte aussi à gauche, il prend donc place à coté des autres.


Ce qui n'est valable que dans le cas d'un flottant à gauche, si vous regardez bien. Si on applique la même chose pour les flottants à droite :

  • la puce « Admin » flotte à droite de « Contact » ;
  • « Contact », lui-même flottant, prend place à la suite, c'est-à-dire à gauche d' « Admin ».


Si nous avions gardé le code XHTML d'avant, la puce « Contact » se serait donc retrouvée tout à droite ! Ce n'est pas catastrophique, mais il faut au moins connaître cette petite subtilité.

Rappelez-moi ce que nous allons mettre ensuite dans notre CSS ? Oui, très bien : la class "bouton_gauche" avec float : left, et exactement le contraire pour l'autre class.

Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
ul#menu_horizontal {  /*Ici , c'est ma configuration, à vous de la changer */
width : 600px;
height : 25px;
list-style-type : none; /* Car sinon les puces se placent n'importe où */
}
ul#menu_horizontal li {
padding : 0 0.5em; /* Pour espacer les boutons entre eux */
}
li.bouton_gauche {
float : left;
}
li.bouton_droite {
float : right;
}


Ce qui nous donne :

Image utilisateur


Il ne vous manque plus qu'à l'adapter via le CSS au design de votre site. Votre imagination sera votre seule aide pour la suite. Vous pouvez aussi vous inspirer des sites que vous voyez tous les jours, et regarder leurs codes : vous allez sûrement apprendre beaucoup.

Pourquoi vous me regardez comme ça ? :euh: J'ai compris ! Vous voulez un exemple, c'est ça ?

OUAIS !

On ne dit pas ouais mais oui, c'est plus poli, bande de voyous. D'accord, nous allons voir un exemple uniquement pour vous donner des idées. Mais je le dirai toujours : c'est en s'inspirant des autres et en utilisant son imagination qu'on progresse le mieux.
Retour en haut

Un exemple de menu

Ici, nous allons voir un exemple qui va sûrement vous permettre d'éclairer votre imagination. Il sera très basique, rien de bien compliqué donc, mais ce sont souvent les choses simples qui font le plus d'effet. Je vous donne d'abord les codes que j'ai utilisés, et ensuite les explications point par point.

Un menu style Bluzaz



Autrefois, à l'époque de la création de ce tutoriel, le Site du Zéro était habillé par le thème Bluzaz qui possédait un beau petit menu horizontal. C'est ce même menu que je vais vous montrer ici. J'espère que cela plaira aux nostalgiques.

Premièrement, nous allons utiliser la technique du float — c'est-à-dire que nous allons prendre la même structure XHTML que précédemment et définir des liens à gauche et à droite. De plus, nous ajouterons une image pour illustrer chaque bouton.

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<html>
<head><title>FLOAT</title><link rel="stylesheet" media="screen" type="text/css" title="index" href="tuto_menu_float.css" /></head>
 
<body>
 
<ul id="menu_horizontal">
<li class="bouton_gauche"><a href="#"><img src="accueil.png" alt="accueil" />Accueil</a></li>
<li class="bouton_gauche"><a href="#"><img src="news.png" alt="news" />News</a></li>
<li class="bouton_gauche"><a href="#"><img src="livredor.png" alt="livre d'or" />Livre d'or</a></li>
<li class="bouton_droite"><a href="#"><img src="team.png" alt="admin" />Admin</a></li>
<li class="bouton_droite"><a href="#"><img src="mp.png" alt="contact"/>Contact</a></li>
</ul>
 
</body>
</html>


Ensuite, le CSS. Essayez d'abord de décrypter le code vous-même et, si l'utilisation de certaines propriétés vous paraît étrange, vous pourrez toujours vous autoriser à lire les explications écrites plus bas.

Code : CSS
 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
ul#menu_horizontal { 
width : 600px; 
height : 30px;
margin : 2em 0 0 0;
padding : 0;
background-color : #f4f9fd;
border : 1px dashed black;
list-style-type : none; 
}
 
ul#menu_horizontal li {
padding : 0 0.5em;  
line-height : 30px;
}
 
ul#menu_horizontal li.bouton_gauche {
float : left;
border-right : 1px dashed black; 
}
 
ul#menu_horizontal li.bouton_droite {
float : right;
border-left : 1px dashed black;
}
 
ul#menu_horizontal a {
color : black;
text-decoration : none;
padding : 0 0.5em; 
font :  0.8em "Trebuchet MS";
}
 
ul#menu_horizontal a:hover { text-decoration : underline; }
 
ul#menu_horizontal a img { 
border : none;
padding :  0 0.3em;
}

  • Premièrement, pour le code de ul#menu_horizontal, il ne devrait pas y avoir de problème. Nous définissons la taille du bloc, sa hauteur (c'est toujours mieux), sa couleur de fond, une bordure grise en pointillé de 1 px de largeur tout autour et une marge en haut pour éviter que le menu ne colle au haut de la fenêtre. Si nous nous arrêtions là, nous obtiendrions un simple bloc avec des bordures en pointillé et un fond.
    Deuxièmement, nous définissons le ul#menu_horizontal, c'est-à-dire que nous sélectionnons toutes les listes qui ont l'id #menu horizontal. Nous utilisons les propriétés list-style-type avec comme valeur none pour enlever les puces noires qui se mettent automatiquement. Puis margin et padding, avec comme valeur 0 pour éviter l'indentation de la liste (automatique en XHTML) et les marges qui ne seraient pas souhaitées. (Histoire d'éviter que le menu soit carrément décalé.) :-°


  • Ensuite, nous définissons chaque bouton de la liste grâce à ul#menu_horizontal li. Nous leur ajoutons des marges intérieures pour qu'ils ne soient pas trop collés au bord, et enfin nous utilisons line-height, avec comme valeur la hauteur totale du menu. Cette technique nous permet de centrer verticalement le texte dans sa case. C'est une astuce à retenir, bien qu'elle ne marche pas avec tout malheureusement.


  • Pour les codes suivants avec li.droite et li.gauche, vous savez exactement ce qu'il faut mettre : un float avec left ou right, suivant que le bouton flotte à gauche ou à droite.


Mais pourquoi mets-tu des bordures uniquement à gauche ou à droite ?


En réalité, c'est la même subtilité que nous avons vue plus haut avec l'histoire de l'ordre des boutons ; je ne vais donc pas m'y attarder. Si je fais ça, c'est pour éviter les doubles bordures, car, par exemple, un flottant à gauche n'aura besoin que d'une bordure à droite, puisque à gauche il y aura déjà la bordure du menu. Chaque bouton flotte donc à côté de la bordure du bouton précédent.

  • Après, nous définissons le style des liens : leur police, leur taille, leur décoration. Nous rajoutons aussi une marge intérieure pour augmenter la « surface » de contact du lien et aérer le menu.
  • Enfin, les deux dernières parties de CSS sont banales : nous rajoutons un petit effet au survol du lien et nous enlevons les bordures des images-liens.

Tout ce boulot nous donne le joli menu que vous voyez ci-dessous.

Image utilisateur
Retour en haut
C'était facile, hein ? ;) (Voire même tout bête.) Les menus horizontaux n'ont maintenant plus de secret pour vous. Cependant, vous pouvez toujours continuer à enrichir vos connaissances sur les menus par l'étude des menus dits graphiques (menus découpés sur une image de fond) et des menus déroulants. C'est encore une autre histoire qui n'a malheureusement pas sa place ici. Ces derniers sont certes plus ardus à concevoir, mais je suis sûr qu'avec du temps vous en viendrez à bout.

Sur ce, bon codage !
Retour en haut

Partager

Retour en haut
47 commentaires pour "Un menu horizontal"
Note moyenne : 3.47 / 4 (36 votes)
Pseudo Commentaire
Hors ligne jalalnet # Posté le 09/11/2010 à 23:59:41

pour supprimer l'espace vide entre les bottons gauches est droit essayé ça

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<html>
<head><title>FLOAT</title>
<link rel="stylesheet" media="screen" type="text/css" title="index" 
href="tuto_menu_float.css" />
</head>
 
<body>
 
<ul id="menu_horizontal">
<li class="bouton_gauche"><a href="#">Accueil</a></li>
<li class="bouton_droite"><a href="#">News</a></li>
<li class="bouton_droite"><a href="#">Livre d'or</a></li>
<li class="bouton_droite"><a href="#">Admin</a></li>
<li class="bouton_droite"><a href="#">Contact</a></li>
</ul>
 
</body>
</html>

Code : CSS
 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
ul#menu_horizontal { 
width : 474px; 
height : 25px;
margin : 20px;
padding : 0;
background-color : #f4f9fd;
border-top : 1px dashed black;
border-bottom:1px dashed black;
list-style-type : none; 
}
 
ul#menu_horizontal li 
{
padding-top: 3px;
padding-bottom:3px;
padding-right:20px;
padding-left:20px;
line-height : 30px;

}
 ul#menu_horizontal li.bouton_gauche 
{
float : left;
border-left : 1px dashed black; 
border-right : 1px dashed black;
}
 
ul#menu_horizontal li.bouton_droite {
float : left;
border-right : 1px dashed black;

}
 
ul#menu_horizontal a {
color : black;
text-decoration : none;
padding : 0 0.5em; 
font :  0.8em "Trebuchet MS";
}
 
ul#menu_horizontal a:hover { text-decoration : underline; }
La théorie, c'est quand on sait tout mais que rien ne fonctionne.
La pratique, c'est quand tout fonctionne et que personne ne sais pourquoi.
Ici nous avons réuni théorie et pratique: rien ne fonctionne .... et personne ne sais pourquoi (A.Einstein).
 
Hors ligne Tao's-Gamer # Posté le 15/11/2010 à 17:19:39
Avatar

 Bonjour, j'ai un problème avec mon menu, voici ce que ça affiche : Voici ce que ça affiche

Voici mes codes :
Code : PHP
  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
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > 
<head> 
<title>Gamer-Actu</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design_du_site.css" /> 
</head> 
<body> 
<div id="en_tete" ><a href="http://taosgamer.free-h.net"><img class="logo" src="images/logo_gamer_actu2.jpg" alt="Logo Gamer-Actu"/></a></div><div><ul id="menu_horizontal"> 
<li class="bouton_gauche"><a href="index.php">Accueil du site</a></li> 
<li class="bouton_gauche"><a href="news.php">News du site</a></li> 
<li class="bouton_droite"><a href="forum.php">Forum Gamer-Actu</a></li> 
<li class="bouton_gauche"><a href="articles.php">Articles</a></li> 
<li class="bouton_gauche"><a href="espace_wii.php">Espace Wii</a></li> 
<li class="bouton_gauche"><a href="espace_ds.php">Espace DS</a></li> 
<li class="bouton_droite"><a href="contacts.php">Contacts</a></li> 
<li class="bouton_droite"><a href="espace_e3.php">Espace E3</a></li></ul></div><div class="pub1"><script type="text/javascript"><!--
google_ad_client = "pub-6143812734093465";
/* Pub pour l?accueil HTML */
google_ad_slot = "6097371738";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script></div><div id="news_haut_de_page"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="fr"> 
<head> 
<title>Gamer-Actu - Menu</title> 
<link rel="stylesheet" type="text/css" href="design_menu.css"> 
<script type="text/javascript" src="http://download.gameblog.fr/scripts/prototype.js"></script> 
<script type="text/javascript" src="http://download.gameblog.fr/scripts/scriptaculous.js?load=effects"></script> 
<script type="text/javascript"><!--
var sas_pageid="4104/26118"; var tfz_pageid="hp"; var gb_in_ipb=false;//--></script> 
<script type="text/javascript" src="http://download.gameblog.fr/scripts/gameblog.pk.js?2.10.101102"></script> 
</head> 
<body> 
 
<div class="unes scrollbar"> 
<div class="sprite flecheg hoverable" style="float: left; margin: 34px 35px;" onclick="gb.scrollVignettes('gbDeuzScrollbarContent','left')"></div> 
<div class="vignettes" style="float: left; height: 90px; width: 840px;"> 
<div id="gbDeuzScrollbarContent" class="content" style="width: 2500px; height: 90px;" onmouseover="gb.stopScroll('gbDeuzScrollbarContent')" onmouseout="gb.startScroll('gbDeuzScrollbarContent')"> 
 
<div style="float: left;"> 
 
<div id="gb_news19044_627" class="w160 bgbleu" style="float: left; margin-right: 10px;"> 
<a class="blanc" href="gamer-actu_2.0.php" title="<span style=color:black&gt;Le site&lt;/span&gt;"> 
<img src="images/menu_small1.jpg" alt="" style="float: left;" /> 
<span class="overlay"> 
<span class="bg bgbleu"></span> 
<span class="main" style="padding-top: 2px;"> 
<span class="upper small">Bienvenue sur Gamer-Actu 2.0!</span> 
<span class="more small">Vous voici sur la nouvelle version du site !</span></span></span></a></div> 
<script type="text/javascript"> 
Event.observe($('gb_news19044_627'),'mouseenter',function() { gb.toggleSousTitre('gb_news19044_627') }.bindAsEventListener(gb));
Event.observe($('gb_news19044_627'),'mouseleave',function() { gb.toggleSousTitre('gb_news19044_627') }.bindAsEventListener(gb));
</script>			
 
<div id="gb_news19046_488" class="w160 bgbleu" style="float: left; margin-right: 10px;"> 
<a class="blanc" href="articles_wii.php?article=1" title="<span style=color:black&gt;Wii&lt;/span&gt;"> 
<img class="w160 bggris" src="images/menu_small2.jpg" alt="" style="float: left;" /> 
<span class="overlay"> 
<span class="bg bgbleu"></span> 
<span class="main" style="padding-top: 2px;"> 
<span class="upper small">de Blob</span> 
<span class="more small">Le test haut en couleurs débarque !</span></span></span></a></div> 
<script type="text/javascript"> 
Event.observe($('gb_news19046_488'),'mouseenter',function() { gb.toggleSousTitre('gb_news19046_488') }.bindAsEventListener(gb));
Event.observe($('gb_news19046_488'),'mouseleave',function() { gb.toggleSousTitre('gb_news19046_488') }.bindAsEventListener(gb));
</script> 
 
<div id="gb_news19021_366" class="w160 bgorange" style="float: left; margin-right: 10px;"> 
<a class="blanc" href="articles_wii.php?article=2" title="<span style=color:black&gt;Wii&lt;/span&gt;"> 
<img class="w160 bggris" src="images/menu_small3.jpg" alt="" style="float: left;" /> 
<span class="overlay"> 
<span class="bg bgbleu"></span> 
<span class="main" style="padding-top: 2px;"> 
<span class="upper small">Wii Party</span> 
<span class="more small">Le jeu le plus fun de l'année à droit à son test !</span></span></span></a></div> 
<script type="text/javascript"> 
Event.observe($('gb_news19021_366'),'mouseenter',function() { gb.toggleSousTitre('gb_news19021_366') }.bindAsEventListener(gb));
Event.observe($('gb_news19021_366'),'mouseleave',function() { gb.toggleSousTitre('gb_news19021_366') }.bindAsEventListener(gb));
</script> 
 
<div id="gb_test756_682" class="w160 bgbleu" style="float: left; margin-right: 10px;"> 
<a class="blanc" href="articles_ds.php?article=1" title="<span style=color:black&gt;DS&lt;/span&gt;"> 
<img class="w160 bggris" src="images/menu_small4.jpg" alt="" style="float: left;" /> 
<span class="overlay"> 
<span class="bg bgbleu"></span> 
<span class="main" style="padding-top: 2px;"> 
<span class="upper small">Zoo Tycoon 2 DS</span> 
<span class="more small">Les animaux ne sont pas épargnés sur Gamer-Actu !</span></span></span></a></div> 
<script type="text/javascript"> 
Event.observe($('gb_test756_682'),'mouseenter',function() { gb.toggleSousTitre('gb_test756_682') }.bindAsEventListener(gb));
Event.observe($('gb_test756_682'),'mouseleave',function() { gb.toggleSousTitre('gb_test756_682') }.bindAsEventListener(gb));
</script> 
 
<div id="gb_test765_830" class="w160 bgbleu" style="float: left; margin-right: 10px;"> 
<a class="blanc" href="articles_wii.php?article=3" title="<span style=color:black&gt;Wii&lt;/span&gt;"> 
<img class="w160 bggris" src="images/menu_small5.jpg" alt="" style="float: left;" /> 
<span class="overlay"> 
<span class="bg bgbleu"></span> 
<span class="main" style="padding-top: 2px;"> 
<span class="upper small">Wii Play</span> 
<span class="more small">Les premiers jeux Wii ont aussi droits à leurs tests sur Gamer-Actu !</span></span></span></a></div> 
<script type="text/javascript"> 
Event.observe($('gb_test765_830'),'mouseenter',function() { gb.toggleSousTitre('gb_test765_830') }.bindAsEventListener(gb));
Event.observe($('gb_test765_830'),'mouseleave',function() { gb.toggleSousTitre('gb_test765_830') }.bindAsEventListener(gb));
</script> 
 
 
</div> 
 
<div style="float: left;"> 
 
<div id="gb_news18834_666" class="w160 bgbleu" style="float: left; margin-right: 10px;"> 
<a class="blanc" href="articles_ds.php?article=2" title="<span style=color:black&gt;DS&lt;/span&gt;"> 
<img class="w160 bggris" src="images/menu_small6.jpg" alt="" style="float: left;" /> 
<span class="overlay"> 
<span class="bg bgbleu"></span> 
<span class="main" style="padding-top: 2px;"> 
<span class="upper small">Pokemon Heart Gold</span> 
<span class="more small">L'une des meilleurs aventure Pokémon.</span></span></span></a></div> 
<script type="text/javascript"> 
Event.observe($('gb_news18834_666'),'mouseenter',function() { gb.toggleSousTitre('gb_news18834_666') }.bindAsEventListener(gb));
Event.observe($('gb_news18834_666'),'mouseleave',function() { gb.toggleSousTitre('gb_news18834_666') }.bindAsEventListener(gb));
</script> 
 
<div id="gb_test756_683" class="w160 bgbleu" style="float: left; margin-right: 10px;"> 
<a class="blanc" href="articles_ds.php?article=3" title="<span style=color:black&gt;DS&lt;/span&gt;"> 
<img class="w160 bggris" src="images/menu_small7.jpg" alt="" style="float: left;" /> 
<span class="overlay"> 
<span class="bg bgbleu"></span> 
<span class="main" style="padding-top: 2px;"> 
<span class="upper small">Professeur Layton et la boîte de Pandore</span> 
<span class="more small">Le test de la suite du cultissime jeu DS !</span></span></span></a></div> 
<script type="text/javascript"> 
Event.observe($('gb_test756_683'),'mouseenter',function() { gb.toggleSousTitre('gb_test756_683') }.bindAsEventListener(gb));
Event.observe($('gb_test756_683'),'mouseleave',function() { gb.toggleSousTitre('gb_test756_683') }.bindAsEventListener(gb));
</script> 
 
<div id="gb_test756_684" class="w160 bgbleu" style="float: left; margin-right: 10px;"> 
<a class="blanc" href="articles_ds.php?article=4" title="<span style=color:black&gt;DS&lt;/span&gt;"> 
<img class="w160 bggris" src="images/menu_small8.jpg" alt="" style="float: left;" /> 
<span class="overlay"> 
<span class="bg bgbleu"></span> 
<span class="main" style="padding-top: 2px;"> 
<span class="upper small">Professeur Layton et l'étrange village</span> 
<span class="more small">LE cultissime jeu DS vous livre son test !</span></span></span></a></div> 
<script type="text/javascript"> 
Event.observe($('gb_test756_684'),'mouseenter',function() { gb.toggleSousTitre('gb_test756_684') }.bindAsEventListener(gb));
Event.observe($('gb_test756_684'),'mouseleave',function() { gb.toggleSousTitre('gb_test756_684') }.bindAsEventListener(gb));
</script> 
 
</div></div></div> <div class="sprite fleched hoverable" style="float: right; margin: 34px 25px;" onclick="gb.scrollVignettes('gbDeuzScrollbarContent','right')"></div> 
</div><div id="gb_menu_hovers"></div> 
<script type="text/javascript"> 
gb.currentForMenu = '';
</script></body></html></div><br /><br /><br /><br /><br /> 
<div id="corps"><h1>Accueil</h1><br /> 
<p>Bienvenue sur Gamer-Actu, le site de toute l'actualité des jeux et consoles Nintendo !<br /><br /> 
Cliquez sur l'un des boutons ci dessous pour accéder aux dernières actualités du site:<br /></p> 
<p class="news_wii_ds">Toutes les news Wii et DS :<br />C'est un test. <br />C'est encore un test. <br />Ok ça va j'arrête.</p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="fr"> 
<head> 
<title>Gamer-Actu - Menu</title> 
<link rel="stylesheet" type="text/css" href="design_menu.css"> 
<script type="text/javascript" src="http://download.gameblog.fr/scripts/prototype.js"></script> 
<script type="text/javascript" src="http://download.gameblog.fr/scripts/scriptaculous.js?load=effects"></script> 
<script type="text/javascript"><!--
var sas_pageid="4104/26118"; var tfz_pageid="hp"; var gb_in_ipb=false;//--></script> 
<script type="text/javascript" src="http://download.gameblog.fr/scripts/gameblog.pk.js?2.10.101102"></script> 
</head><body><div id="gb_colheightfix"><div id="gb_maincontent" ><div class="col660"><div id="gb_home_une"> 
 
<div class="alaune" id="alaune1"> 
<a href="articles_wii.php?article=9"> 
<img src="images/menu1.jpg" alt=""></a> 
<h3><a href="articles_wii.php?article=9"><span class="bg"></span><span class="main"> 
<span class="titre">Test : Mario Kart Wii</span> 
<span class="more"><span class="plat"><span style="color:#848484">Wii</span></span> 
<!-- Note attribuée au jeu --><span class="sprite note n4" ></span><br> 
L'un des meilleurs jeu de courses !</span></span></a></h3> </div> 
 
 
<div class="alaune" id="alaune2"> 
<a href="la_wii.php"> 
<img src="images/menu2.jpg" alt=""></a> 
<h3><a href="la_wii.php"> <span class="bg"></span><span class="main"> 
<span class="titre">La Wii</span> 
<span class="more"><span class="plat"><span >Articles</span></span> Tao's Gamer</span></span></a></h3></div> 
 
 
<div class="alaune" id="alaune3"> 
<a href="le_japon.php"><img src="images/menu3.jpg" alt=""></a> 
<h3><a href="le_japon.php"> <span class="bg"></span> <span class="main"> 
<span class="titre">Le Japon</span> 
<span class="more"><span class="plat"><span >Articles</span></span> Tao's Gamer</span></span></a></h3></div> 
 
 
<div class="alaune" id="alaune4"> 
<a href="espace_e3.php"><img src="images/menu4.jpg" alt=""></a> 
<h3><a href="espace_e3.php"><span class="bg"></span><span class="main"> 
<span class="titre">Espace E3</span> 
<span class="more"><span class="plat"></span>Découvrez l'espace dédié à l'E3 !</span></span></a></h3></div> 
 
 
<div class="alaune" id="alaune5"> 
<a href="/news_18969_interview-benoit-fouillet-kinect-enjeux-strategie-et-jeux"><img src="http://download.gameblog.fr/images/alaune/UneKinect_ITV_Fouillet.jpg" alt=""></a> 
<h3><a href="/news_18969_interview-benoit-fouillet-kinect-enjeux-strategie-et-jeux"> <span class="bg"></span><span class="main"> 
<span class="titre">Interview Benoit Fouillet / Kinect : enjeux, stratégie et jeux</span> 
<span class="more"><span class="plat"><span >Divers</span></span> Le responsable Kinect France nous dit tout</span> 
</span></a></h3></div> 
 
 
<div class="alaune" id="alaune6"> 
<a href="/news_18941_kinect-recapitulatif-de-toutes-nos-videos-sondage"><img src="http://download.gameblog.fr/images/alaune/UneKinect_Recapv4.jpg" alt=""></a> 
<h3><a href="/news_18941_kinect-recapitulatif-de-toutes-nos-videos-sondage"> <span class="bg"></span><span class="main"> 
<span class="titre">Kinect : récapitulatif de toutes nos vidéos + sondage</span> 
<span class="more"><span class="plat"><span style="color:#31bc55">360</span></span> Tout ce qu'il faut voir sur Kinect</span> 
</span></a></h3></div> 
 
 
<div class="alaune" id="alaune7"> 
<a href="/news_18936_chat-live-avec-le-producteur-de-little-king-story-no-more-he"><img src="http://download.gameblog.fr/images/alaune/Une_Yoshiro_Kimura.jpg" alt=""></a> 
<h3><a href="/news_18936_chat-live-avec-le-producteur-de-little-king-story-no-more-he"><span class="bg"></span> <span class="main"> 
<span class="titre">Chat Live avec le producteur de Little King Story / No More Heroes</span> 
<span class="more"><span class="plat"><span style="color:orange">Multi</span></span> Yoshirô Kimura (Grasshopper) répond à vos questions !</span> 
</span></a></h3></div> 
 
 
<div class="alaune" id="alaune8"> 
<a href="/news_18903_kinect-est-arrive-a-la-redaction-la-video-de-deballage"><img src="http://download.gameblog.fr/images/alaune/Kinect_Gameblog_UNE.jpg" alt=""></a> 
<h3><a href="/news_18903_kinect-est-arrive-a-la-redaction-la-video-de-deballage"> <span class="bg"></span> <span class="main"> 
<span class="titre">Kinect est arrivé à la rédaction : la vidéo de déballage</span> 
<span class="more"><span class="plat"><span >Divers</span></span> La caméra vient de sortir aux Etats-Unis</span> 
</span></a></h3></div> 
 
<div class="scrollbar"> 
<div class="sprite flecheh hoverable" onclick="gb.scrollVignettes('gbUneScrollbarContent','up')"></div> 
<div class="vignettes"> 
<div id="gbUneScrollbarContent" class="content"> 
<div style="width: 160px; height: 228px;"> 
<div class="sprite w135"><a href="articles_wii.php?article=9">Test : Mario Kart Wii</a></div> 
<div class="sprite w135"><a href="la_wii.php"><br />La Wii</a></div> 
<div class="sprite w135"><a href="le_japon"><br />Le Japon</a></div> 
<div class="sprite w135"><a href="espace_e3"><br />Espace E3</a></div></div> 
<div style="width: 160px; height: 228px;"> 
<div class="sprite w135"><a href="news_18969_interview-benoit-fouillet-kinect-enjeux-strategie-et-jeux">Interview Benoit Fouillet / Kinect&nbsp;: enjeux, stratégie et jeux</a></div> 
<div class="sprite w135"><a href="news_18941_kinect-recapitulatif-de-toutes-nos-videos-sondage">Kinect : récapitulatif de toutes nos vidéos + sondage</a></div> 
<div class="sprite w135"><a href="news_18936_chat-live-avec-le-producteur-de-little-king-story-no-more-he">Chat Live avec le producteur de Little King Story</a></div> 
<div class="sprite w135"><a href="news_18903_kinect-est-arrive-a-la-redaction-la-video-de-deballage">Kinect est arrivé à la rédaction : la vidéo de déballage</a></div></div></div></div> 
<div class="sprite flecheb hoverable" onclick="gb.scrollVignettes('gbUneScrollbarContent','down')"></div></div></div><script type="text/javascript">addMethods({alaune: new Alaune() });</script></div></div></div></div></body></html></div> 
<div id="pied_de_page"><p>2010 Gamer-Actu, tous droits réservés. <a href="admin/admin.php">Administration.</a><br />Un site de <a href="http://sites.google.com/site/taosgamer">Tao's Gamer</a>.<div id="xiti-logo"> 
<script type="text/javascript"> 
<!--
document.write('<a href="http://www.xiti.com/xiti.asp?s=467518" title="WebAnalytics">');
Xt_param = 's=467518&p=site_entier';
try {Xt_r = top.document.referrer;}
catch(e) {Xt_r = document.referrer; }
Xt_h = new Date();
Xt_i = '<img width="80" height="15" border="0" ';
Xt_i += 'src="http://logv11.xiti.com/bcg.xiti?'+Xt_param;
Xt_i += '&hl='+Xt_h.getHours()+'x'+Xt_h.getMinutes()+'x'+Xt_h.getSeconds();
if(parseFloat(navigator.appVersion)>=4)
{Xt_s=screen;Xt_i+='&r='+Xt_s.width+'x'+Xt_s.height+'x'+Xt_s.pixelDepth+'x'+Xt_s.colorDepth;}
document.write(Xt_i+'&ref='+Xt_r.replace(/[<>"]/g, '').replace(/&/g, '$')+'"></a>');
//-->
</script> 
</div> 
<noscript> 
<div id="xiti-logo-noscript">
<a href="http://www.xiti.com/xiti.asp?s=467518" title="WebAnalytics" >WebAnalytics solution by <img width="80" height="15" src="http://logv11.xiti.com/bcg.xiti?s=467518&amp;p=&amp;" alt="WebAnalytics - AT Internet" /></a>
</div>
</noscript></p> 
</div></body> 
</html>


Code : CSS
  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
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
body
{
   width: 1000px;
   margin: auto;
   margin-top: 10px;
   margin-bottom: 20px;    
   background-color: #353535;
}
#en_tete
{
   width: 958px;
   height: 136px;
   background-repeat: no-repeat;
   margin-bottom: 3px;
   float: left;
   border: 2px outset #008ccd;
   margin-left: 125px;
   margin: 3px;
}
.news_haut_de_page
{
   float: center;
   font-family: "Bisttream Vera Sans", Arialp);
}
ul#menu_horizontal { 
width : 600px; 
height : 30px;
margin : 2em 0 0 0;
padding : 0;
background-color : #f4f9fd;
border : 1px dashed black;
list-style-type : none; 
}
 
ul#menu_horizontal li {
padding : 0 0.5em;  
line-height : 30px;
}
 
ul#menu_horizontal li.bouton_gauche {
float : left;
border-right : 1px dashed black; 
}
 
ul#menu_horizontal li.bouton_droite {
float : right;
border-left : 1px dashed black;
}
 
ul#menu_horizontal a {
color : black;
text-decoration : none;
padding : 0 0.5em; 
font :  0.8em "Trebuchet MS";
}
 
ul#menu_horizontal a:hover { text-decoration : underline; }
 
ul#menu_horizontal a img { 
border : none;
padding :  0 0.3em;
}

#corps
{
   padding: 5px;
   margin : 5px;
   margin-right: 0px;
   margin-left: 0px;
   color: black;
   background-color: white;
   background-repeat: repeat-x;
   font-family: "Bitstream Vera Sans", Arial;
   border: 4px solid #008ccd;
   font-size: 0.9em;
}

#corps h1
{
   height: 20px;
   color: #008ccd;
   text-align: center;
   font-family: "Bitstream Vera Sans", Arial;
}

#corps h2
{
   height: 10px;
   color: #008ccd;
   text-align: left;
   font-family: "Bitstream Vera Sans", Arial
}
#pied_de_page
{
   text-align: center;
   color: #ff5b00;
   background-color: #111111;
   border: 2px solid black;
   height: 87px
}
.pub1
{
   margin: 10px;
   text-align: center;
   border: 4px solid black;
   background-color: black;
   margin-left: 123px;
   margin-right: 123px;
}
.news_wii_ds
{
   float: right;
   color: black;
   height: 0px;
   width: 200px;
}
.nouveautedroite
{
   padding-left: 50px;
}
.nouveautegauche
{
   padding-left: 25px;
}
.nouveaute_texte
{
   padding-left: 135px;
}
.images_japon
{
   padding-left: 150px;
}
.textes_japon
{
   padding-left: 148px;
   color: #ff5b00;
}
.textes_japon2
{
   padding-left: 30px;
   color: #ff5b00;
}
.mailto
{
   font-variant: small-caps;
   color: #ff5b00;
   text-decoration: none
}
.interdit
{
   text-indent: 15px;
   color: red;
   font-family: "Times News Roman";
   padding-left: 250px;
   text-decoration: underline;
}
.pub2
{
   border: 4px solid black;
   width: 160px;
}
.beta_test
{
   padding-left: 0px;
   color: #ff5b00;
}
.news p
{
    background-color:#CCCCCC;
    margin-top:0px;
}
.news
{
    width:70%;
    margin:auto;
}

a
{
    text-decoration: none;
    color: blue;
}
ul#touts_les_tests_wii
{
   border: 5px ridge blue;
   width: 350px;
   list-style-type: none;
   padding: 5px;
   padding-left: 10px;
}
ul#touts_les_tests_gamecube
{
   border: 5px ridge blue;
   width: 350px;
   list-style-type: none;
   padding: 5px;
   padding-left: 10px;
}
ul#l_e3_point_d_interrogation
{
   border: 5px ridge #fff300;
   width: 350px;
   list-style-type: none;
   padding: 5px;
   padding-left: 10px;
}
ul#touts_les_tests_ds
{
   border: 5px ridge red;
   width: 350px;
   list-style-type: none;
   padding: 5px;
   padding-left: 10px;
}
.no_dispo
{
   font-family: "Times News Roman";
   color: #ff5b00;
}
.bientot
{
   color: black;
   border: 4px outset black;
   background-color: #008ccd;
   padding: 3px;
}
.pubsite0
{
   margin: 10px;
   text-align: center;
   border: 4px solid black;
   background-color: black;
   margin-left: 123px;
   margin-right: 123px;
}
#xiti-logo-noscript
{
   padding-left: 915px;
}
#xiti-logo
{
   padding-left: 915px;
}
.souligne
{
   text-decoration: underline;
   color: black;
}
.mailto
{
   text-decoration: underline;
   color: #008ccd;
}
.image_wii_1
{
   float: left;
   height: 130px;
   margin-right: 5px;
}
.image_wii_2
{
   float: right;
   margin-right: 8px;
   margin-left: 4px;
}
.image_wii_3
{
   float: left;
   height: 145px;
   margin-right: 5px;
}
.wii_nimporte_quoi
{
   font-size: 11px;
   color: black;
}
.image_wii_4
{
   float: right;
   margin-right: 8px;
   margin-left: 4px;
   height: 125px;
}
.image_wii_5
{
   float: left;
   height: 70px;
   margin-right: 5px;
}
.image_wii_6
{
  float: right;
  height: 125px;
  margin-left: 5px;
}
.image_wii_7
{
  float: left;
  margin-right: 3px;
  height: 125px;
}
.image_wii_8
{
   float: right;
   height: 145px;
   margin: 2px;
}
.image_wii_9
{
   float: left;
}
.image_wii_10
{
   float: right;
}
a img 
{
   border: none;
}


Quelqu'un pourrait m'aider :(
Hors ligne Tao's-Gamer # Posté le 15/11/2010 à 21:36:32
Avatar

 Désolé d'avoir mis tout ce texte mais j'ai trouvé la solution ! ^^
Excellent test 20/20
Hors ligne mlaniew123 # Posté le 09/02/2012 à 23:20:57

Ok,

Je suis toute nouvelle et débute sur la programmation web.

Sur mon site, j'aimerais faire un menu horizontal. J'ai réussi à placer mon menu.
Malheureusement, je suis incapable de le justifier. J'aimerais qu'il s'étende sur la largeur de mon site.

que dois-je faire?

:) Merci!
Hors ligne Millosse # Posté le 05/03/2012 à 16:10:08

Bonjour , moi j'ai un problème au niveau du placement du texte dans les border ; mon image .png ce met correctement contrairement au texte.
J'ai pourtant lu et relu plusieurs fois le tutoriel , mais je suis partie d'un exemple d'une autre pas web sur lequel une partie du menu a l'air de m'intéresser . mais lorsque que j'essaye le menu le texte ce trouve en-dessous des border .
Code : HTML
 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
<div id="sites"><div style="width: 1000px;margin:auto">



	<li class=" firstSite listeSite" id="siteActif">	

	<a href="/"><img src="images/layout/home.png" alt="Accueil"  /></a></h3>

	</li>

	<div class="separation"></div>		<li class=" listeSite" >	

	<h3><a href="/lol/" >LoL</a></h3>

	</li>

	<div class="separation"></div>		<li class=" listeSite" >	

	<h3><a href="/swtor/" >SWTOR</a></h3>

	</li>

	<div class="separation"></div>		<li class=" listeSite" >	

	<h3><a href="/wow/" >WoW</a></h3>

	</li>

	<div class="separation"></div>		<li class=" listeSite" >	

	<h3><a href="/starcraft-2/" >SC 2</a></h3>

	</li>

	<div class="separation"></div>		<li class=" listeSite" >	

	<h3><a href="/guild-wars-2/" >Guild Wars 2</a></h3>

	</li>

	<div class="separation"></div>		<li class=" listeSite" >	

	<h3><a href="/diablo-3/" >Diablo 3</a></h3>

	</li>

	<div class="separation"></div>		<li class=" listeSite" >	

	<h3><a href="/minecraft/" >Minecraft</a></h3>

	</li>

	<div class="separation"></div>		<li class=" listeSite" >	

	<h3><a href="/jeux-video/" >Jeux Vidéo</a></h3>

	</li>

	<div class="separation"></div>		<li class=" lastSite listeSite" >	

	<h3><a href="/poker/" >Poker</a></h3>

	</li>


Code : CSS
1
2
3
4
5
6
#sites .listeSite{padding: 0px 9px; height: 25px; line-height: 25px; float: left; display : inline; border : 1px dashed black;}
#sites .separation{height: 25px; line-height: 25px; width: 1px; float: left;}
#sites img{vertical-align: -4px;}
#sites .lastSite{margin-right: 0;}
#sites .firstSite img{vertical-align: -3px;}
#sites{left: 0; position: fixed; top: 0; width: 100%; z-index: 10000; height: 25px;}

Voir tous les commentaires
Ce tutoriel a été corrigé par les zCorrecteurs.