Inclure un menu externe dans du html

Signaler
Messages postés
159
Date d'inscription
dimanche 17 juillet 2011
Statut
Membre
Dernière intervention
28 janvier 2020
-
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
-
Bonjour,

J'ai crée une interface graphique avec une belle mise en page en css et je voudrai inclure un menu vertical dynamique. Jusque là, ça va, j'ai mon interface et mon menu qui sont séparés. Voilà la liste des fichiers concernés : index.htm
design.css
menu.htm
menu.css

La solution paraît simple, il suffirai de coller tout le code du fichier menu.htm dans le code du fichier index.htm mais j'ai peur que ça allourdisse le code et qu'en terme de lisibilité, ça soit pas terrible. Je me demandais s'il y a un moyen pour inclure le menu un peu comme avec la commande : <link href="menu.css" rel="stylesheet" type="text/css">, une routine du même genre mais pour du html.

Je sais pas si j'ai réussi à me faire comprendre mais dans le cas contraire, n'hésitez pas à me demander des précisions.
Je sais que ce genre de manip se fait en php mais là, j'avoue être un peu à la rue.

Merci d'avance.

15 réponses

Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
bonjour,

on peut....     quoique.... pas en html.

tu peux faire un include en asp,php, ruby... ( le langage du serveur quoi )
tu peux faire un #include en ssi ( ou shtml )
tu pourrais faire un         <Script    Type="Text/JavaScript"
                                                   Src="fichier.js"></Script>
    qui ferait des docume,nt.write... mais franchement :
         vaut mieux éviter  cette solution.

Cordialement          Bul     [mon Site]  [M'écrire]         
Messages postés
159
Date d'inscription
dimanche 17 juillet 2011
Statut
Membre
Dernière intervention
28 janvier 2020

Donc, si je comprends bien, il ne me reste que 2 choix :
Soit, je sauvegarde mon fichier en php, ce qui me permettra de mettre une routine comme je veux.
Soit je travaille à l'ancienne en collant mon code html du menu dans le code du fichier index.

Tu me conseille quoi ? La première méthode je présume mais j'aurai besoin d'un coup de main.
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
tu oublies le SSI ( shtml )
    remarque que tout le monde l'oublie... on se demande bien pourquoi !

et, mon foie, en php : <?php include "ton fichier que tu veux qu'il est à toi"; ?>
point barre.

          Bul  [mon Site]     [M'écrire]          
Messages postés
159
Date d'inscription
dimanche 17 juillet 2011
Statut
Membre
Dernière intervention
28 janvier 2020

Oui, effectivement, je n'ai pas pensé au SSI, tu fais comment avec ça ?
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
<!--#include file= "monFicher.shtml" -->





ça fonctionne, en fait, comme le php, sur un site ou en local mais avec
    une "émulation de serveur" ( wamp, easyphp... par exemple )
le fichier qui inclus doit s'appeler .shtml.
tous les fournisseurs d'accès, tous les navigateurs... ne le proposent pas,

tester ainsi ( par exemple )  :

<!--table style ="width:100%;">
<tr>
<td style=" border-width:2px;
border-style:solid;
border-color:#FF8000;
font-family:Courier New;
color:#400040;
font-size:12px;
background-color:#FFEFEF;">


</td>
</tr>
</tbody>
</table--><li>Créez un fichier texte avec votre éditeur habituel.
</li><li>Nommez-le «
essai.shtml
». C'est la terminaison «
.shtml
» qui importe
</li><li>y Insérer le code suivant :
L'heure GMT est <!--#echo var="DATE_GMT" --> et il fait beau.


</li>

lu chez
http://scarabee.com/TRANCHES/SSI/configurationnecessaire.shtml
toute la doc nécessaire y est, doit y avoir d'autres docs.


CordialementBul[mon Site][M'écrire]
Messages postés
159
Date d'inscription
dimanche 17 juillet 2011
Statut
Membre
Dernière intervention
28 janvier 2020

J'ai essayé dans tous les sens mais ça change pas grand chose, mon cas est sûrement plus complexe que prévu,

Voilà le code de mon fichier INDEX.html :

<html>
<head>
<title>Radio balistiq</title>
<meta http-equiv= "Content-Type" content="text/html; charset=iso-8859-1" />
<link href="design.css" rel="stylesheet" type="text/css" />

</head>

  ----

       
   

   

   

   
   

<table width="990" cellspacing="0" cellpadding="0" border="0" align="center">
    ----

         , </td>
                    Venez D&eacute;couvrir notre h&ocirc;tel restaurant L'Escapade Logis de France 2 chemin&eacute;es, se situant sur la route touristique de la vall&eacute;e de la Creuse &agrave; 2 km du centre ville d'Argenton sur Creuse direction le PECHEREAU GARGILESSE (D48).

           ,
   
    ----

        ,
       

</td>
</tr>
</table>

</html>

Voilà le code de mon fichier MENU.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>un menu d&eacute;roulant en CSS et javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
    for (var i = 1; i<=15; i++) {
        if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
    }
if (d) {d.style.display='block';}
}
//-->
</script>
<link href="menu.css" rel="stylesheet" type="text/css">
</head>

<!-- Menu  -->
        * : ACCUEIL
           
        * PRESENTATION
            :

               
                    <li>Balistiq</li>
                    <li>Yes we can can</li>
                    <li>L'équipe</li>
               
               

        * LA RADIO

        :
<dt onmouseover =\"javascript:montre('smenu4');\" onmouseout= \"javascript:montre();\">PROGRAMME

        * CULTURE
            :
               
                    <li>Cinéma Apollo</li>
                    <li>Festivals</li>
                    <li>Concerts</li>
                    <li>Scènes locales</li>
               
           
          
           * PRESSE
          
               :
<dt onmouseover =\"javascript:montre('smenu7');\" onmouseout= \"javascript:montre();\">EMISSIONS
           
               
                    <li>Fiches concept</li>
                    <li>Les émissions</li>
               
           

               * COMMUNAUTE
            :
               
                    <li>Contactez-nous</li>
                    <li>Livre d'or</li>
                    <li>Newsletter</li>
                    <li>Forum</li>
                    <li>Myspaces</li>
               
           
           
            * PARTENAIRES

               :
<dt onmouseover =\"javascript:montre('smenu10');\" onmouseout= \"javascript:montre();\">GOODIES
           
               
                    <li>Fonds d'écrans</li>
                    <li>Jeux</li>
                    <li>Photos</li>
               
           

               * ECOUTER
            :
               
                    <li>Playlist</li>
                    <li>Radio-FM</li>
                    <li>Mix-DJ</li>
                    <li>Interviews</li>
               
           
           
            <dt onmouseover =\"javascript:montre('smenu12');\" onmouseout=\"javascript:montre();\">VOIR

</html>

Le but du jeu est donc d'insérer le fichier menu.html avec un Include dans index.html en lieu et place de l'espace prévu à cet effet.

Si tu as une idée.

Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
<fieldset style="border: 2px solid rgb(255, 128, 0); font-family: Courier New; background-color: rgb(255, 239, 239); color: rgb(64, 0, 64); font-size: 12px;">
<!--legend>~ Introduction ~</legend-->l'include ou en php ou en shtml, c'est, ni plus ni moins,

  qu'un copié/collé du contenu du fichier cité là où

  on l'appelle.

mets les lignes voules dans un fichier à part,

remplace les par l'appel. point barre.
</fieldset>




Bul[mon Site][M'écrire]
Messages postés
159
Date d'inscription
dimanche 17 juillet 2011
Statut
Membre
Dernière intervention
28 janvier 2020

Je me doute que ça doit être d'une grande simplicité mais quand on a jamais fais ça, c'est pas simple, doc voilà comment j'ai fais :
J'ai renommé le fichier INDEX.html en INDEX.SHTML Dedans, j'ai  mis ceci :

<td width="170" class="menu" valign="top">
<!--#include virtual="include/menu.shtml"-->
</td>
Pour savoir où placer mon menu, j'ai travaillé à l'ancienne, à savoir que j'ai crée une div et à l'intérieur, j'ai copier le code complet de mon menu, ça machait bien donc, c'est bien là qu'il faut mettre la balise include.

Ensuite, j'ai renommé le fichier MENU.HTML en MENU.SHTML
J'ai aussi crée un répertoire include et j'ai mis les fichiers menu.shtml et menu.css dedans.

Pour testé dans les meilleures conditions, j'ai envoyé sur l'un de mes comptes ftp mais mon menu n'apparaît pas, enfin bon, je vais finir par y arriver.
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
euh... plusieurs remarques.

__ tu es sûr de virtual ? j'use de file.
__ MENU.SHTML ce n'est pas menu.shtml
__ tu es sûr que le répertoire include est bien dans le même répertoire ?
__ tu as essayé le petit exemple ? ton fai ou ton navigateur aiment bien ?
__ ...

Bul[mon Site][M'écrire]
Messages postés
159
Date d'inscription
dimanche 17 juillet 2011
Statut
Membre
Dernière intervention
28 janvier 2020

J'ai essayé "file" à la place de "virtual"
j'ai bien mis meu.shtml en minuscule, là haut, les majuscules, c'était pour mettre en valeur
le répertoire include se trouve bien dans le même répertoire et j'ai bien essayé l'exemple, mon hébergeur et mon navigateur aiment. Mon site est hébergé chez sivit.fr (prestataire payant) et j'utilise Firefox 3, IE7
Pour accéder à mon exemple, je vais sur cete adresse : http://www.resistancia-ug.org/0000.index.shtml
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
url inconnue...
en mettant http://www.resistancia-ug.org/0000/index.shtml
j'accède à je ne sais quoi....  avec mon modem 56k.... beaucoup trop long
Bul[mon Site][M'écrire]
Messages postés
159
Date d'inscription
dimanche 17 juillet 2011
Statut
Membre
Dernière intervention
28 janvier 2020

Un modem 56k ! tu vis où ?
Le lien est bon, il fonctionne? J'ai bien conscience que le site est super lourd mais si il y a quelques années je tenais compte des gens n'ayant pas l'dsl, aujourd'hui, ces derniers sont ultra minoritaires et j'en tiens plus compte du tout, j'en suis désolé mais bon, faire un site qui sois beau, sympa à regarder tout en étant ultra léger, franchement, c'est un sacré challenge.
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
ultra minoritaires car inconscients...
faut faire le rapport qualité/prix
perso : 10€ / mois,
et le service me suffit bien  
(  faute de mieux !
   et sauf pour quelques rares sites que je ne visite qu'une fois... )
je veux bien payer plus mais pour un réel avantage
( adsl 20Méga, plus d'abonnement France/telecom, téléphone gratis... )
et là où je suis : pas possible ( non dégroupé, 512 k maxi ... )
où tu vis toi ? c'est comme ça dans nos belles provinces
et nous sommes majoritaires ! na !

          Bul     [mon Site] [M'écrire]         
Messages postés
159
Date d'inscription
dimanche 17 juillet 2011
Statut
Membre
Dernière intervention
28 janvier 2020

Enfin bon, ça résoud pas mon problème mais sois sans crainte, si je parviens à quelque chose, je te tiendrai au courant.
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
pas de raisons que ça ne fonctionne pas.
sinon fais en php, mais "les soucis seront les mêmes"

          Bul     [mon Site] [M'écrire]