Menu à partir d'un fichier .css : possible ?

Version imprimable

08/09/2005, 20h57
Link14

Menu à partir d'un fichier .css : possible ?

Bonjour à tous

Je viens de mettre à jour un menu de mon site et faire ca à toutes les pages je trouve ca vraiment long! Je me suis donc dit que comme il existe un code HTML avec un fichier .css pour l'écriture et les couleurs de fond tout ca... je me suis dit que y'a peut-etre moyen de faire ca mais pour les menus.

Je fait donc appel à vous pour me dire si cela est possible et si oui comment fait-on?
Merci beaucoup pour ceux qui me répondront!
08/09/2005, 23h07
spirou

Salut !!

Tu peux utiliser le css pour tes menus, comme pour toutes les balises html ce qui allégera considérablement tes pages, mais tu ne pourras jamais le faire sans balises html.

Un très bon site avec divers exemple de menu :
http://www.cssplay.co.uk/menus/index.html

Bon courage :wink:
09/09/2005, 15h43
Sub0

Il faut utiliser PHP (un langage serveur). PHP permet de générer du code HTML/Javascript et CSS.
Ainsi, tu as juste à ajouter dans le script PHP :

Code:

include_once('menu.php');

Le code du menu se trouvant dans le script "menu.php".
Je suis justement en train de mettre au point un menu compatible avec tous les navigateurs, fonctionnant sans Javascript, avec pleins d'options... Je te le montrerai une fois terminé, à+

http://sub0.developpez.com/tag.png
Lien tout en bas à gauche de cette fenêtre
09/09/2005, 17h00
Link14

ok, mais sans PHP c'est possible? et il fonctionne avec tout les navigateurs ?

J'ai essayé le code que tu as mis mais ca marche pas, j'ai du me planter quelque part... :?
09/09/2005, 17h14
MasterOfChakhaL

php ne fonctionne pas avec les naviguateurs.

C'est ce qu'on peut appeler un langage côté serveur.
C'est a dire que ca mouline là ou le site est hébergé, puis ca renvoie une page html (a priori) et c'est seulement la qu'on se pose la question du navigateur...

Si tu veux simplement développer sur ton poste en php, il te faut installer un serveur qui pourra interpréter le php.
Je peux te conseiller de te renseigner sur EasyPHP ou alors Wamp (j'en connais pas d'autre)
09/09/2005, 17h29
Link14

moi je veut juste mettre mon menu sur un fichier .css mais en html!
un truc tout con parce que j'y connais pas grand chose :?
Merci ! :D
09/09/2005, 17h56
Sub0
Tu mets ton code du menu dans un fichier à part (peu importe l'extension en fait).
Pour t'expliquer, voici un exemple incomplet, le contenu du fichier "menu.htm" :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <style type="text/css">  </style> <ul class=menu> <li> <a href="Accueil.htm"><div>Accueil</div> ect... </ul>
Puis tu l'intègres dans tes pages en ajoutant cette ligne par exemple :

Code:

<iframe src="menu.htm" width="100%"></iframe>
09/09/2005, 17h58
Link14
Ok merci beaucoup! ton aide me sera précieuse!

EDIT: j'ai réussi a mettre le code dans lapge, le code marche bien mais y'a un prob au niveau du fichier, en fait, j'ai modifier le code

Code:

<iframe src="menu.htm" width="100%"></iframe>

j'ai mis un fichier menu.css donc j'ai changé le code en :

Code:

<iframe src="menu.css" width="100%"></iframe>

Le prob c'est que y'a une petite fenêtre qui s'afiche dans la page avec le texte écris dans le menu.css, c'est à dire ca :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <style type="text/css">  </style> <ul class=menu> <li> <a href="Accueil.htm"><div>Accueil</div> ect... </ul>
Donc j'y suis presque! mais y'a un truc qui cloche :?
SVP aidez-moi :cry:
09/09/2005, 19h35
dasdeb

Je vois, ce que tu n'as pas compris c'est que dans l'exemple Sub0 utilise en fait 3 fichiers:
1- menu.css : ce fichier ne contient que les déclarations CSS.
2- menu.html : ce fichier contient le code HTML de ton menu.
3- xxx.html : ce fichier contient le code HTML avec les <iframe ...></iframe>

menu.css est appelé dans muni.html qui, lui-même est appelé dans xxx.html
:D
09/09/2005, 19h39
Link14

a OK ben je vais tester

merci
09/09/2005, 20h07
Sub0

Quand tu auras fini de mettre ton menu dans le cadre (iframe), tu pourras supprimer la bordure du cadre et coller ton menu dans le coin supérieur gauche pour rendre l'iframe invisible. A noter que tu devras connaitre les dimensions nécessaires pour l'affichage complet de ton menu (surtout si il est déroulant) en définissant les propriétés width et height. Pour le moment, je n'ai pas trouvé de solution pour que la hauteur et la largeur de l'iframe s'ajuste automatiquement au contenu... En fait, ça ne doit pas être bien possible (à moins d'utiliser du Javascript).

Code:

<iframe src="menu.htm" frameborder="0" marginwidth="0" marginheight="0" hspace="0" vspace="0" width="100%" height="70px"></iframe>
09/09/2005, 20h35
Sub0

Une autre solution que l'iframe existe : La balise <object>

Citation:

Envoyé par Raphael

<iframe> n'est pas accepté en HTML strict et XHTML strict, contrairement à <object>
10/09/2005, 19h25
Link14

Ouais mais je comprends plus rien la :(

quelqu'un peut me réexpliquer avec les étapes à faire et en clair SVP

Merci!
10/09/2005, 19h36
Sub0

qu'est-ce-que tu ne comprend pas exactement ?

ps: Depuis combien de temps as-tu commencé la programmation internet ?
10/09/2005, 21h52
Link14
ben en fait ca fait à pu près 1an je crois mais au début j'été avec front page

Ce code la je comprends pas :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <style type="text/css">  </style> <ul class=menu> <li> <a href="Accueil.htm"><div>Accueil</div> ect... </ul>
le truc @import url("menu.css") y'a quelque chose à changer le dedans ?

Et sinon aparament je doit mettre mon menu HTML dans un fichier .css

en fait le code au-dessus je le mets dans une page "menu.html" et dans le fichier "menu.css" je mets le vrai menu en html c'est bien ca?

Et donc, j'introduit le "menu.htm" avec ca dans ma page web :

Code:

<iframe src="menu.htm" width="100%"></iframe>

J'ai bon ou pas ?

Merci beaucoup de m'aider, ca doit vraiment etre chiant pr toi :?
10/09/2005, 22h05
Sub0
bah ce qui est chiant, c'est de répéter les choses en fait...

Je reprend du début.

• Soit le fichier nomé "styles.css" contenant le code CSS de ton menu (la police, la taille, les couleurs, etc...).
• Soit le fichier nomé "menu.htm" contenant le code HTML de ton menu (les balises html).
Ce fichier a besoin de "styles.css" pour donner le style au menu. On peut l'intégrer au menu avec ce code :
Code:

1 2 3 4 5 <style type="text/css">  </style>
• Soit le fichier nomé "page.htm" contenant le code HTML de ta page dans laquelle tu veux intégrer ton menu.
Tu intègres le menu en y ajoutant le code suivant :

Code:

<iframe src="menu.htm" frameborder="0" marginwidth="0" marginheight="0" hspace="0" vspace="0" width="100%" height="70px"></iframe>

Tu vois bien que tu as 3 fichiers :
- styles.css
- menu.htm
- page.htm

Vouloir renomer le menu avec l'extension CSS est idiot puisque ton menu est en HTML pas en CSS.
Cela ne peut que t'induire en erreur !
Maintenant, si tu ne comprend toujours pas, je te conseille de prendre des cours car le forum n'est pas là pour ça.
Bon courage, à+
11/09/2005, 12h58
Link14

OK merci, la j'ai compris, merci beaucoup!
11/09/2005, 13h11
Sub0

Parfait! N'hésite pas si tu as d'autres questions. Tu vas probablement te rendre compte que cette solution comporte quelques inconvéniants, comme par exemple le fait de ne pas pouvoir donner à l'iframe les dimensions exactes du menu (surtout si le menu est déroulant et donc sa hauteur peut varier). Ce serait bien de voir le résultat de ce que tu as réalisé, ça nous permettrait éventuellement de mieux te conseiller...

Mais je persiste à dire que l'idéal est d'utiliser PHP. D'ailleurs, je me demande comment tu as pu faire pour t'en passer car je ne connais pas beaucoups de site pouvant fonctionner sans, à moins de se contenter d'un minimum de fonctions... (pas de formulaire par exemple).
11/09/2005, 17h41
Link14

j'ai essayé et ca marche nickel, enfin presque

Le menu s'affiche vechement bien mais je comprends pas pourquoi il est complétement en haut de la page de mon site :?

http://perso.wanadoo.fr/puissancegta/test/jghfvgh.htm

Voila, tu peut aller voir

Sinon pour la police du menu j'ai pas encore fait avec le fichier .css donc c'est normal que ce n'est pas la bonne police.

Donc il faudrai me dire comment mettre le menu en dessous de ma banière et à droite puisque que c'est le menu de droite.

Désolé de t'embéter encore une fois et merci beaucoup de ton aide!

Sinon tu parle de PHP, moi je veut bien mais je sais pas du tout comment ca marche PHP.
11/09/2005, 18h23
Huntress

Le mieux pour connaître qq chose c'est de s'y mettre !

Voici deux packs, très facile d'utilisation, tu en choisis un, tu l'installes sur ton ordi et tu te lances.
WAMP, EasyPHP

Un lien indispensable :
Doc PHP officielle

Besoin d'aide pour la suite ? Penser à :
- Réfléchir
- Google
- Recherche sur le forum

Le dernier recours étant de poster :wink:

Bon courage
11/09/2005, 18h41
Sub0

En fait, vu ton niveau, je ne sais pas si c'est une bonne idée de te lancer dans le PHP. Tout dépend si tu comptes continuer à créer des sites à l'avenir ou t'arrêter à celui-ci et poursuivre dans une autre activité que le développement internet... A toi de voir. Mais saches une chose, c'est que personne ne pourra t'aider à chaque fois que tu fais un pas, au point de te donner le code source de tes projets tellement ce sera plus rapide que de tout t'expliquer en détails (le forum n'est pas là pour donner des cours désolé). Arrivera bien un moment donné où tu devras te débrouiller seul. Alors autant essayer de te dépatouiller dès maintenant, même si tu galères au début (comme tous les débutants), tu récolteras les fruits de tes efforts par la suite.

Très franchement, le PHP, c'est trop terrible !!!
Bon courage, à+

ps: J'aimerais bien voir comment ton menu était disposé avant que tu n'ajoutes l'iframe...
11/09/2005, 19h51
Link14

mon menu est comme ca sans l'iframe :
http://perso.wanadoo.fr/puissancegta...E8me/essai.htm

et avec l'iframe ben c'est le lien que je donne au dessus
11/09/2005, 19h58
dasdeb

Mais pourquoi tu ne le laisse pas comme ça ?
C'est beaucoup mieux ! 8O
11/09/2005, 20h26
Link14

j'ai pas envie de changer le menu dans toutes les pages de mon site, ca prends beaucoup de temps!

Tu as de la chance, ton menu vas très bien pour l'intégrer avec une iframe ! ;)

Citation:

Envoyé par Link14

j'ai pas envie de changer le menu dans toutes les pages de mon site, ca prends beaucoup de temps!

Quoiqu'il en soit, tu vas bien être obligé de modifier le code de chacune de tes pages pour remplacer le code de ton menu par l'iframe, en admettant que tu as déjà quelques pages avec ce menu, sinon tu as bien fais d'anticiper... Par la suite, il suffira juste de modifier le script "menu.htm" pour que le menu de toutes tes pages soit modifié.

Pour cette manip, j'ai utilisé Namo mais c'est pareil avec FrontPage je suppose...

• J'ai enregistré ta page sans l'iframe sur mon disque dur
• Je l'ai ouverte dans Namo
• J'ai récupéré tout le menu en copiant/collant la cellule dans une nouvelle page html
• J'ai également ajouté directement dans la source avec un copier/coller, le style CSS dans le header

Cela donne donc pour menu.htm :

Code:

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>menu</title>
<link href="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/content.css" type="text/css"
 rel="stylesheet">
</head>
 
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<table border="0" cellpadding="0"
             cellspacing="1" width="132" height="0" bgcolor="#9C9C9C">
                <tr>
                    <td height="23" background="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/menu.jpg"><p>&nbsp;</td>
                </tr>
                <tr>
                    <td><table border="0" cellpadding="0" cellspacing="0" width="130"
                         height="33" bgcolor="white">
                            <tr>
                                <td><div align="center"><table border="0" cellpadding="0"
                                     cellspacing="0" width="117" height="33">
                                        <tr>
                                            <td width="15"><p>&nbsp;</td>
                                            <td width="26"><p><a href="http://perso.wanadoo.fr/puissancegta/index.htm"
                                                 onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.annuaire-sites.tk');"><img src="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/home.gif"
                                                 width="26" height="26" border="0"
                                                 alt="Mettre en page de d&eacute;marrage"></a></td>
                                            <td width="37"><p align="center"><a href="javascript:window.external.addfavorite('http://www.puissance-gta.fr.tc','Annuaire blogs, sites, forums')"
                                                 title="Ajouter mon site dans vos Favoris"><img src="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/website.gif"
                                                 width="20" height="20" border="0"
                                                 alt="Ajouter aux favoris"></a></td>
                                            <td width="21"><p><a href="mailto:link14.online@gmail.com"
                                                 title="Envoyez moi un mail!"><img src="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/mail2.gif"
                                                 width="20" height="22" border="0"
                                                 alt="Contact"></a></td>
                                            <td width="18"><p>&nbsp;</td>
                                        </tr>
                                    </table></div></td>
                            </tr>
                        </table></td>
                </tr>
            </table>
            <p> 
            <table border="0" cellpadding="0" cellspacing="1" width="132" height="123"
             bgcolor="#9C9C9C">
                <tr>
                    <td width="152" height="23" background="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/menu_principal.jpg"><p>&nbsp;</td>
                </tr>
                <tr>
                    <td><table border="0" cellpadding="0" cellspacing="0" width="130"
                         height="106" bgcolor="white">
                            <tr>
                                <td width="150"><table border="0" cellpadding="0"
                                     cellspacing="1" width="130" height="90">
                                        <tr>
                                            <td width="7"><p>&nbsp;</td>
                                            <td width="15"><p><img src="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/puce.gif"
                                                 width="15" height="15"></td>
                                            <td width="12"><p>&nbsp;</td>
                                            <td width="111"><p><a href="http://perso.wanadoo.fr/puissancegta/index.htm">Accueil</a></td>
                                        </tr>
                                        <tr>
                                            <td><p>&nbsp;</td>
                                            <td><p><img src="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/puce.gif"
                                                 width="15" height="15"></td>
                                            <td><p>&nbsp;</td>
                                            <td><p><a href="http://perso.wanadoo.fr/puissancegta/wallpaper.htm">Wallpapers</a></td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td><p>&nbsp;</td>
                                            <td><p><img src="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/puce.gif"
                                                 width="15" height="15"></td>
                                            <td><p>&nbsp;</td>
                                            <td><p><a href="http://perso.wanadoo.fr/puissancegta/contact.htm">Contacts</a></td>
                                        </tr>
                                        <tr>
                                            <td><p>&nbsp;</td>
                                            <td><p><img src="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/puce.gif"
                                                 width="15" height="15"></td>
                                            <td><p>&nbsp;</td>
                                            <td></td>
                                        </tr>
                                    </table></td>
                            </tr>
                        </table></td>
                </tr>
            </table>
            <p> 
            <table border="0" cellpadding="0" cellspacing="1" width="132" height="150"
             bgcolor="#9C9C9C">
                <tr>
                    <td width="152" height="23" background="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/aides.jpg"><p>&nbsp;</td>
                </tr>
                <tr>
                    <td><table border="0" cellpadding="0" cellspacing="0" width="130"
                         height="106" bgcolor="white">
                            <tr>
                                <td width="150"><table border="0" cellpadding="0"
                                     cellspacing="1" width="130" height="97">
                                        <tr>
                                            <td width="7"><p>&nbsp;</td>
                                            <td width="15"><p><img src="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/puce.gif"
                                                 width="15" height="15"></td>
                                            <td width="12"><p>&nbsp;</td>
                                            <td width="111"><p><a href="http://perso.wanadoo.fr/puissancegta/codes-ps1.htm">Codes 
                                                PS1</a></td>
                                        </tr>
                                        <tr>
                                            <td><p>&nbsp;</td>
                                            <td><p><img src="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/puce.gif"
                                                 width="15" height="15"></td>
                                            <td><p>&nbsp;</td>
                                            <td><p><a href="http://perso.wanadoo.fr/puissancegta/theme1/codesps2-th1.htm">Codes 
                                                PS2</a></td>
                                        </tr>
                                        <tr>
                                            <td><p>&nbsp;</td>
                                            <td><p><img src="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/puce.gif"
                                                 width="15" height="15"></td>
                                            <td><p>&nbsp;</td>
                                            <td><p><a href="http://perso.wanadoo.fr/puissancegta/codesxbox.htm">Codes 
                                                X-BOX</a></td>
                                        </tr>
                                        <tr>
                                            <td><p>&nbsp;</td>
                                            <td><p><img src="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/puce.gif"
                                                 width="15" height="15"></td>
                                            <td><p>&nbsp;</td>
                                            <td><p><a href="http://perso.wanadoo.fr/puissancegta/codes-pc.htm">Codes 
                                                PC</a></td>
                                        </tr>
                                        <tr>
                                            <td><p>&nbsp;</td>
                                            <td><p><img src="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/puce.gif"
                                                 width="15" height="15"></td>
                                            <td><p>&nbsp;</td>
                                            <td><p><a href="http://perso.wanadoo.fr/puissancegta/gta-advance.htm">Codes 
                                                GBA</a></td>
                                        </tr>
                                        <tr>
                                            <td><p>&nbsp;</td>
                                            <td><p><img src="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/puce.gif"
                                                 width="15" height="15"></td>
                                            <td><p>&nbsp;</td>
                                            <td><p><a href="http://perso.wanadoo.fr/puissancegta/astuces.htm">Astuces</a></td>
                                        </tr>
                                        <tr>
                                            <td><p>&nbsp;</td>
                                            <td><p><img src="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/puce.gif"
                                                 width="15" height="15"></td>
                                            <td><p>&nbsp;</td>
                                            <td><p><a href="http://perso.wanadoo.fr/puissancegta/paquets-caches.htm">Paquets 
                                                cach&eacute;s</a></td>
                                        </tr>
                                    </table></td>
                            </tr>
                        </table></td>
                </tr>
            </table>
            <p> 
            <table border="0" cellpadding="0" cellspacing="1" width="132" height="123"
             bgcolor="#9C9C9C">
                <tr>
                    <td width="152" height="23" background="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/tutoriaux.jpg"><p>&nbsp;</td>
                </tr>
                <tr>
                    <td><table border="0" cellpadding="0" cellspacing="0" width="130"
                         height="106" bgcolor="white">
                            <tr>
                                <td width="150"><table border="0" cellpadding="0"
                                     cellspacing="1" width="130" height="97">
                                        <tr>
                                            <td width="7"><p>&nbsp;</td>
                                            <td width="15"><p><img src="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/puce.gif"
                                                 width="15" height="15"></td>
                                            <td width="12"><p>&nbsp;</td>
                                            <td width="111"><p><a href="http://perso.wanadoo.fr/puissancegta/tutoriauxgta3.htm">GTA 
                                                3</a></td>
                                        </tr>
                                        <tr>
                                            <td><p>&nbsp;</td>
                                            <td><p><img src="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/puce.gif"
                                                 width="15" height="15"></td>
                                            <td><p>&nbsp;</td>
                                            <td><p><a href="http://perso.wanadoo.fr/puissancegta/aidearmesgtapc.htm">Armes 
                                                PC</a></td>
                                        </tr>
                                        <tr>
                                            <td><p>&nbsp;</td>
                                            <td><p><img src="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/puce.gif"
                                                 width="15" height="15"></td>
                                            <td><p>&nbsp;</td>
                                            <td><p><a href="http://perso.wanadoo.fr/puissancegta/installationskin.htm">Skins 
                                                PC</a></td>
                                        </tr>
                                        <tr>
                                            <td><p>&nbsp;</td>
                                            <td><p><img src="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/puce.gif"
                                                 width="15" height="15"></td>
                                            <td><p>&nbsp;</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td><p>&nbsp;</td>
                                            <td><p><img src="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/puce.gif"
                                                 width="15" height="15"></td>
                                            <td><p>&nbsp;</td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td><p>&nbsp;</td>
                                            <td><p><img src="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/puce.gif"
                                                 width="15" height="15"></td>
                                            <td><p>&nbsp;</td>
                                            <td></td>
                                        </tr>
                                    </table></td>
                            </tr>
                        </table></td>
                </tr>
            </table>
 
</body>
 
</html>

Il est important que le menu soit completement indépendant. Il débute donc avec une <table> et non pas avec un <tr> ou un <td> puisque ton menu est à la base dans une cellule de tableau... Tu noteras que ton menu devient une nouvelle page à part entière, avec un doctype, une balise html, head et body. En bref, la page que l'on appelle avec l'iframe doit être complète. Elle doit pouvoir fonctionner seule, comme n'importe quelle autre page html de ton site (on doit pouvoir l'éxécuter sans erreur). Maintenant, si tu lances la page "menu.htm", tu verras ton menu s'afficher seul dans la fenêtre. C'est exactement ça qu'il faut. Tu comprend donc qu'il s'agit d'un fichier HTML et non CSS.

ps: J'ai été obligé de retirer les <br> de ton code ci-dessus...

Toujours avec Namo :
• J'ai repris le code de ta page de départ
• J'ai supprimé la totalité du menu en sélectionnant et en coupant sa cellule
• J'ai ajouté directement dans le code source de la page, la balise <iframe> à l'endroit exacte où débutait le menu (à la place de la cellule que je viens de couper)
• J'ai ensuite ajusté approximativement les dimensions de l'iframe avec width=132px et height=600px pour que le menu s'affiche entièrement dans l'iframe

Voici le code de page.htm :

Code:

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>.:Puissance GTA:.</title>
<link href="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/content.css" type="text/css"
 rel="stylesheet">
</head>
 
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
 
<div align="center"><table border="0" cellpadding="0" cellspacing="0" width="750"
 height="394">
    <tr>
        <td height="70" valign="top" background="http://perso.wanadoo.fr/puissancegta/images/degrade70.gif"><div
             align="center"><table border="0" cellpadding="0" cellspacing="0"
             width="750" height="70">
                <tr>
                    <td width="127" class="stylelogo"><p align="center"><img src="http://perso.wanadoo.fr/puissancegta/bani%E8re.jpg"></td>
                    <td width="459"></td>
                    <td width="114" class="stylelogo"></td>
                </tr>
            </table></div></td>
    </tr>
    <tr>
        <td height="20"><p>&nbsp;</td>
    </tr>
    <tr>
        <td height="258"><table border="0" cellpadding="0" cellspacing="0" width="750"
             height="209">
                <tr>
                    <td valign="top"><iframe src="menu.htm" frameborder="0" marginwidth="0" marginheight="0" hspace="0" vspace="0" width="132px" height="600px"></iframe></td>
                    <td width="486" align="right" valign="top"><div align="center"><table
                         border="0" cellpadding="0" cellspacing="1" width="454"
                         height="548" bgcolor="#9C9C9C">
                            <tr>
                                <td width="434" height="34" background="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/accueil.jpg"
                                 class="styleMenu"><p>&nbsp;</td>
                            </tr>
                            <tr>
                                <td bgcolor="#A4BBFF"><table border="0" cellpadding="0"
                                     cellspacing="0" width="454" height="527"
                                     bgcolor="white">
                                        <tr>
                                            <td width="1%" valign="top"><p>&nbsp;</td>
                                            <td width="97%" valign="top"><p align="center"><span
                                                 class="styleecriture"><script
                                                 language="JavaScript" type="text/javascript">
<!--
var promobenef_site = "26028";
var promobenef_minipub = "0";
var promobenef_format = "1";
//-->
                                                </script>
                                                </span></p>
                                                <span class="styleecriture"><script
                                                 language="JavaScript" type="text/javascript"
                                                 src="http://www.promobenef.com/pub/"></script>
                                                </span>
                                                <p><span class="styleecriture"><noscript></span><span
                                                 class="styleecriture"><a href="http://www.promobenef.com/">PromoBenef 
                                                : r&eacute;gie publicitaire<img src="http://www.promobenef.com/no_js/?sid=26028&fid=1"
                                                 width="1" height="1" border="0"></a></span><span
                                                 class="styleecriture"></noscript></span></p>
                                                <p><span class="styleecriture"><hr
                                                 align="left"> Comme vous avez 
                                                pus le constat&eacute;, j'ai 
                                                fait quelques petites modifications, 
                                                notamment le nom des menus. 
                                                J'ai pass&eacute; plus d'une 
                                                heure &agrave; faire ces &quot;hauts 
                                                de menus&quot;. Je vais encore 
                                                faire plein de petites modifications 
                                                comme celle-l&agrave; afin que 
                                                le site soit l'un des plus beau.@Bientot 
                                                pour de nouvelles news! <hr align="left"> 
                                                Ceci est une page de test pour 
                                                la nouvelle version de Puissance 
                                                GTA, j'esp&egrave;re qu'elle 
                                                vous plait, si vous avez des 
                                                remarques, n'h&eacute;sitez 
                                                surtout pas &agrave; m'envoyer 
                                                un mail &agrave; </span><span
                                                 class="styleecriture"><a href='link14.online@gmail.com"'>link14.online@gmail.com</a></span><span
                                                 class="styleecriture">. Je 
                                                peut tr&egrave;s bien changer 
                                                les couleurs ou autres si ce 
                                                nouveau th&egrave;me ne vous 
                                                plait pas. <hr align="left"> 
                                                </span></p>
                                                <p align="center"><span class="styleecriture">Copyright 
                                                &copy; 2005 - Puissance GTA 
                                                - Tous droits r&eacute;serv&eacute;s. 
                                                </span><span class="styleecriture"><a href="http://www.xiti.com/xiti.asp?s=159930"
                                                 title="Mesurez votre audience"><script
                                                 language="JavaScript" type="text/javascript">
<!--
Xt_param = 's=159930&p=';
Xt_r = "Hidden-Referrer";
Xt_h = new Date();
Xt_i = '<img width="39" height="25" border="0" ';
Xt_i += 'src="http://logv25.xiti.com/hit.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, '$')+'" title="Analyse d\'audience">');
//-->
                                                </script>
 <noscript> analyse                                                 mesure frequentation 
                                                internet par <img src="http://logv25.xiti.com/hit.xiti?s=159930&p="
                                                 width="39" height="25" border="0"
                                                 alt="Analyse d'audience"> </noscript></a></span></td>
                                            <td width="2%" valign="top"><p>&nbsp;</td>
                                        </tr>
                                    </table></td>
                            </tr>
                        </table></div></td>
                    <td width="132" align="right" valign="top"><table border="0"
                         cellpadding="0" cellspacing="1" width="132" height="123"
                         bgcolor="#9C9C9C">
                            <tr>
                                <td height="23" background="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/san_andreas.jpg"
                                 class="stylelienmail"><p>&nbsp;</td>
                            </tr>
                            <tr>
                                <td><table border="0" cellpadding="0" cellspacing="0"
                                     width="130" height="106" bgcolor="white">
                                        <tr>
                                            <td><table border="0" cellpadding="0"
                                                 cellspacing="1" width="130"
                                                 height="101">
                                                    <tr>
                                                        <td width="7"><p>&nbsp;</td>
                                                        <td width="15"><p><img src="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/puce.gif"
                                                             width="15" height="15"></td>
                                                        <td width="12"><p>&nbsp;</td>
                                                        <td width="111"><p align="left"><a href="http://perso.wanadoo.fr/puissancegta/theme1/code_san_andreas-th1.htm">Les 
                                                            Codes</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td><p>&nbsp;</td>
                                                        <td><p><img src="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/puce.gif"
                                                             width="15" height="15"></td>
                                                        <td><p>&nbsp;</td>
                                                        <td><p align="left"><a href="http://perso.wanadoo.fr/puissancegta/theme1/astuces_san_andreas-th1.htm">Les 
                                                            Astuces</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td><p>&nbsp;</td>
                                                        <td><p><img src="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/puce.gif"
                                                             width="15" height="15"></td>
                                                        <td><p>&nbsp;</td>
                                                        <td><p align="left"><a href="http://perso.wanadoo.fr/puissancegta/persosgtasanandreas.htm">Les 
                                                            Personnages</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td><p>&nbsp;</td>
                                                        <td><p><img src="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/puce.gif"
                                                             width="15" height="15"></td>
                                                        <td><p>&nbsp;</td>
                                                        <td><p align="left"><a href="http://perso.wanadoo.fr/puissancegta/gangsgtasanandreas.htm">Les 
                                                            Gangs</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td><p>&nbsp;</td>
                                                        <td><p><img src="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/puce.gif"
                                                             width="15" height="15"></td>
                                                        <td><p>&nbsp;</td>
                                                        <td><p align="left"><a href="http://perso.wanadoo.fr/puissancegta/gta_san_andreas_infos.htm">Les 
                                                            Infos</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td><p>&nbsp;</td>
                                                        <td><p><img src="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/puce.gif"
                                                             width="15" height="15"></td>
                                                        <td><p>&nbsp;</td>
                                                        <td><p align="left"><a href="http://perso.wanadoo.fr/puissancegta/gta_san_andreas_villes.htm">Les 
                                                            Villes</a></td>
                                                    </tr>
                                                    <tr>
                                                        <td><p>&nbsp;</td>
                                                        <td><p><img src="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/puce.gif"
                                                             width="15" height="15"></td>
                                                        <td><p>&nbsp;</td>
                                                        <td><p align="left"><a href="http://perso.wanadoo.fr/puissancegta/gta_san_andreas_videos.htm">Les 
                                                            Vid&eacute;os</a></td>
                                                    </tr>
                                                </table></td>
                                        </tr>
                                    </table></td>
                            </tr>
                        </table>
                        <p><br> 
                        <table border="0" cellpadding="0" cellspacing="1" width="132"
                         height="123" bgcolor="#9C9C9C">
                            <tr>
                                <td height="23" background="http://perso.wanadoo.fr/puissancegta/New%20th%E8me/Images/votez_pour_moi.jpg"
                                 class="stylelienmail"><p>&nbsp;</td>
                            </tr>
                            <tr>
                                <td><table border="0" cellpadding="0" cellspacing="0"
                                     width="130" height="106" bgcolor="white">
                                        <tr>
                                            <td><table border="0" cellpadding="0"
                                                 cellspacing="0" width="130"
                                                 height="70">
                                                    <tr>
                                                        <td width="31" height="31"><p>&nbsp;</td>
                                                        <td width="88"><p align="center"><a href="http://www.genhit.com/in/gtavc80/sioul"><img src="http://membres.lycos.fr/gtavicecity80/partenariat/topsites.jpg"
                                                             border="0"></a></p>
                                                            <p align="center"><a href="http://www.planetegta3.com/topdutop/in.php3?id=63"><img src="http://www.planetegta3.com/topdutop/bouton.gif"
                                                             border="0"></a></p>
                                                            <p align="center"><a href="http://www.genhit.com/in/gtaworld/link14"><img src="http://www.GtaWorld-Fr.Com/images/gtaworld-fr.gif"
                                                             border="0"></a></p>
                                                            <p align="center"><a href="http://genhit.com/in/tandem/link14ut"
                                                             target="_blank"><br></a></td>
                                                    </tr>
                                                    <tr>
                                                        <td></td>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td></td>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td></td>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td></td>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td></td>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td></td>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td></td>
                                                        <td></td>
                                                    </tr>
                                                </table></td>
                                        </tr>
                                    </table></td>
                            </tr>
                        </table></td>
                </tr>
            </table></td>
    </tr>
</table></div>
</body>
 
</html>

En résumé :
• J'ai copié ton menu (un tableau) dans une nouvelle page
• J'ai remplacé ce tableau par le code de l'iframe appellant cette nouvelle page
• J'ai ajouté dans le <head> de cette page, le style CSS et j'ai supprimé les balises <br>
• J'ai ajusté approximativement les dimensions de l'iframe en faisant des tests

ps: J'ai repris ton code tel quel, Namo l'a réindenté malgré moi. Je voulais aussi te dire que ton code n'est vraiment pas "pro" sur pas mal de points (je ne les énumérerai pas ce soir). Ça se voit que tu débutes... Bon courage, à+

14/09/2005, 19h00
Link14

merci, dsl de pas l'avoir vu plus tot!
14/09/2005, 19h25
Sub0

http://sub0.developpez.com/tag.png
Lien tout en bas à gauche de cette fenêtre
15/09/2005, 09h27
SPA

Il y a tellement plus simple, il suffit de lire la faq HTML sur le site, on créé un menu .html, on renomme ses pages en shtml et on fait


Et ce dans toutes les pages, tu créé un style menu dans ton cass et le tour est joué.
Il n' y a que ce ficheir a changé sur tout ton site, et si tu utilises assez les CSS, tu peux le changer de place en changeant seulement le css.
15/09/2005, 16h48
Sub0

Citation:

Envoyé par SPA

Il y a tellement plus simple, il suffit de lire la faq HTML sur le site, on créé un menu .html, on renomme ses pages en shtml et on fait


Et ce dans toutes les pages, tu créé un style menu dans ton cass et le tour est joué.
Il n' y a que ce ficheir a changé sur tout ton site, et si tu utilises assez les CSS, tu peux le changer de place en changeant seulement le css.

C'est exactement le même principe qu'avec PHP : Renommer l'extension de ses pages et remplacer le code du menu par une fonction include...
J'ai proposé la solution avec l'iframe car Link14 voulait conserver ses pages en html... La différence du php avec le shtml, c'est que ce ne sont pas forcément des pages du côté serveur. La solution avec le shtml peut donc être intérressante dans certains cas (c'est toujours bon de savoir que cette solution d'intégration existe). Mais quite à changer l'extension des pages et vu l'utilisation que va en faire Link14 (un site hébergé sur serveur), autant utiliser du PHP selon moi car les possibilités offertes sont plus nombreuses.
à+