Aller au menu - Aller au contenu

Un menu horizontal

Pour accéder à cette section
Connectez-vous !
connexion_rpx
Page Précédente  1  2 
Pseudo Commentaire
Page Précédente  1  2 
Hors ligne Zinpolou # Posté le 16/02/2009 à 11:27:23

Il y a un léger souci avec le float quand on veut positionnée un element en desou mais tres bon tuto Merci
Hors ligne Zinpolou # Posté le 16/02/2009 à 11:31:18

:-° Non J'ai trouvé l'erreur c'etais moi :o avec un margin-bottom Désole alors oui ceux tuto est tres bon Merci
Hors ligne plusl'infini # Posté le 16/03/2009 à 20:55:32

SALUT je suis zéro en php ceci explique peut-etre cela mais pourquoi utilise t'on des pages comme accueil.php?
sinon bon tuto bravo
Mon site
 
Hors ligne anonyme # Posté le 16/05/2009 à 13:46:33

Pas mal. Je mets 16/20, ce genre de mini-tuto est toujours sympa à connaître.
Hors ligne kyoko2 # Posté le 25/07/2009 à 16:17:18
Avatar

 merci neoxx78 pour le tuto, il est bien expliquer 20/20
Hors ligne Lou-gy # Posté le 02/08/2009 à 00:42:49

nice
Hors ligne Thom4 # Posté le 08/12/2009 à 19:33:51
Avatar

Ville : Pertuis
Pays : France métropolitaine

 Bon tutoriel
Image utilisateur


Faire tout son possible c'est bien mais faire l'impossible c'est mieux
 
Hors ligne simo8621 # Posté le 22/01/2010 à 02:20:09
Avatar

 bon tuto merci. 18/20
Hors ligne sanoc # Posté le 21/05/2010 à 16:50:54
Alias, Pinguï le conquérant
Avatar

 Ce tutoriel ma était grandement utile, il serait bon de le joindre par un système d'annexe au cours de Xhtml de M@téo21, car on peine a trouver sur le web un tuto aussi clair.
Microsoft : « Vous avez des questions ? Nous avons des trombones qui dansent. »
 
Hors ligne N@than # Posté le 29/06/2010 à 00:06:05
Riviere-web.fr
Avatar
Flux RSS
close

Merci, pour ce tuto, il m'a bien aidé :)
#LGDF: N@than vaincra !
Riviere-Web.fr ;)
Hébergez vos images(rapide!)
 
Hors ligne quenti77 # Posté le 12/07/2010 à 07:16:16
|Pr77|
Avatar
Flux RSS
close

Ville : Roissy en brie
Pays : France métropolitaine
Études : ESGI-ICAN

 Merci beaucoup pour ce tuto qui m'a aidé.
Par contre j'ai du faire quelque modification pour l'accorder au design et au bloc du site, car il s'agit d'un design extensible.

Je te propose 15/20 :lol:
Image utilisateur

Image utilisateur
 
Hors ligne tib92 # Posté le 02/11/2010 à 09:36:12
I <3 apple !!
Avatar

 Super ton tuto !!!!
Merci beaucoup ! :p :p
ma bio, mon site

Vous souhaitez apprendre à programmer, mais vous ne savez pas comment vous y prendre ?
"Il y a 10 sortes de gens au monde : ceux qui connaissent le binaire et les autres"

les Shadoks :
"Si il n'y a pas de solution c'est qu'il n'y a pas de problème"
"Pourquoi faire simple quand on peut faire compliqué ?"
"C'est en forgeant que l'on devient musicien"
"C'est en essayant continuellement que l'on finit par réussir, en d'autre termes : plus ça rate plus on a de chance de réussir"
 
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;}
Pour accéder à cette section
Connectez-vous !
connexion_rpx