18041 sujets

Questions générales et questions de débutants

Chargement d'un fichier html - include php - css

Pages :
Bonsoir !

Etant novice en programmation, j'aurais besoin de vos conseils.

J'essaie de créer une page d'accueil contenant deux zones verticales :
- à gauche, une bande verticale blanche où figurera le menu (qui aura la forme d'un demi cercle divisé en plusieurs rubriques) ;
- à droite, la partie conteneur.

Pour cela, j'ai créé une feuille de style dont voici le code :


<style type="text/css">
html, body {
    height: 100%;
    width: 100%;
    overflow: auto;
}
body {
    margin: 0;
    padding: 0;
} 
#menu {
    position: absolute;
    margin-top: 0;
    width: 42%;
    height: 100%;
    background-color: #FFFFFF;
}
#contenu {
    position: absolute;
    margin-top: 0;
    height: 100%;
    left: 42%;
    width: 58%;
    background-color:#E6A264;
    overflow: auto;
}
</style>


(cf l'image jointe)

Jusque là, tout va bien. Smiley smile

Mais maintenant ça va se compliquer lol :

J'ai réalisé à part une page menu.html (menu sous la forme d'une image demi-cercle) et j'aimerais qu'elle se charge 'automatiquement' dans la partie "menu" de la feuille de style (c'est-à-dire la zone blanche, à gauche de l'écran), et tout ça après avoir tapé l'adresse www.mon-site.com...

Je songe bien à la fonction php include, mais je n'arrive pas à l'associer à la zone 'menu' de la feuille de style...

Ou alors y a-t-il d'autres moyens ?

Merki !

Fabien.

upload/8914-accueil.jpg
Modifié par jambon00sec (17 Jan 2007 - 19:49)
Salut,

C'est trop vague ta description, et il faudrait montrer le code html également.

Pourquoi mettre ton menu dans un fichier indépendant?

Dis en +

Fab
Salut,

jambon00sec a écrit :
Je songe bien à la fonction php include, mais je n'arrive pas à l'associer à la zone 'menu' de la feuille de style...

Qu'entends-tu par là ?
Si tu appelle ta page menu.html via un include, elle fera dès lors partie de ta page et sera par conséquent tributaire de ta feuille de style.

Dans ce cas, il te suffirai simplement d'effectuer cet appel comme ceci :
<div id="menu">
<?php include "menu.html"; ?>
</div>


++
Salut,

Merci pour ta réponse.

Initialement, je voulais créer mon site en frames (avec deux cadres), mais on me l'a vivement déconseillé (technique obsolète, pépins de référencement, etc).

Je me suis dit que je pouvais obtenir le même effet visuel à l'aide d'une feuille de style (cf. le code ci-dessus). C'est la structure visuelle de mon site.

Reste ensuite à intégrer, ou appeler le fichier menu.html (déjà créé) dans la zone blanche, à gauche, et faire en sorte qu'il s'affiche automatiquement après la saisie de l'url www.mon-site.com.

Mais j'ignore s'il existe une commande (php ou autre) permettant d'appeler un fichier html et de le charger dans la zone blanche définie par la feuille de style.

Voici le code de ma page d'accueil.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; 
harset=iso-8859-1" />

<title>Document sans nom</title>

<style type="text/css">

html, body {
   height: 100%;
   width: 100%;
   overflow: auto;
}
body {
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size: 0.8em;
   margin: 0;
   padding: 0;
} 
#menu {
   position: absolute;
   background-color: #FFFFFF;
   width: 42%;
   height: 100%;
   margin-top: 0;
}
#contenu {
   position: absolute;
   margin-top: 0;
   height: 100%;
   background-color:#E6A264;
   overflow: auto;
   width: 58%;
   left: 42%;
}
</style>

</head>

<body>

<J'aimerais appeler ici mon fichier menu.html - qui est à la racine de mon serveur -, et l'intégrer dans la zone 'menu' définie ci-dessus par la feuille de style - ça remplacerait en gros le cadre menu que j'avais commencé à élaborer en frames.>

</body>
</html>

Mais suis débutant, et ne sais pas du tout comment m'y prendre Smiley decu

@+

Fabien.
Modifié par jambon00sec (12 Oct 2006 - 10:34)
Bonjour jambon00sec, et bienvenue sur ce forum. Smiley smile

Bon, on va essayer de prendre les choses dans l'ordre et méthodiquement.

Premièrement, les règles de ce forum stipulent que le code collé dans les messages doit être balisé comme tel, avec les balises [ code] et [ /code] (sans les espaces). Merci de bien vouloir éditer tes deux messages dans ce sujet qui contiennent du code pour te conformer à cette règle (tu peux utiliser le bouton d'édition en haut à droite de chaque message à éditer). Smiley smile

Deuxièmement, il y a tout un tas de confusions dans tes messages, il va falloir y mettre de l'ordre.

1 - La technique des include en PHP n'est pas un équivalent des frames, et elle n'inclut pas une page HTML fille dans une zone d'une page HTML mère.

2 - La technique des include en PHP fait un copier-coller d'un bout de code, qui peut être contenu dans un fichier texte (.html, .php, .txt, .cequejeveux). Ce bout de code est collé à l'endroit précis où la fonction include() est appelée.

3 - Au final, on obtient donc un seul fichier, avec -- si on a fait les choses correctement -- un code HTML à peu près propre.

4 - La feuille de style CSS s'applique à cette page HTML produite. La feuille de style ne crée pas de zone dans la page, mais permet de mettre en forme les éléments présents dans le code HTML. La feuille de style n'est là que pour la présentation, et se rajoute par dessus un document HTML (sans mise en forme) qui doit déjà être complet et cohérent.

5 - Euh... non, en fait c'est tout.


En espérant que ces quelques rappels soient utiles. Smiley cligne
Merci pour vos messages Smiley smile

Par souci de lisibilité et d'intelligibilité, je vais essayer de réexposer mon problème, en tenant compte des règles du forum cette fois-ci (suis désolé d'ailleurs pour mes messages précédents Smiley smile

J'ai consulté les tutoriels au sujet des frames, notamment l'inclusion d'un fichier dans un autre et aussi l'optimisation grâce à PHP et CSS

Mon but est effectivement "d'inclure un fichier dans un autre, grâce à CSS et PHP" et ainsi d'éviter les frames : j'aimerais conserver le même effet visuel que les frames, à l'écran.

Je me suis donc inspiré de ces tutoriels pour "découper ma page en deux parties" (je reprends les expressions pour ne pas commettre d'erreurs)

1 - Une partie gauche, "sous la forme" d'une colonne blanche (dans laquelle j'aimerais insérer un menu) ;

2- Une partie droite, "sous la forme" d'une colonne orange (en gros) qui constituera le "conteneur" et affichera les pages liées aux rubriques du menu.

Voici le code de la partie CSS (mpop, que signifie le collage du code "sans les espaces" ?)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
html, body {
height: 100%;
width: 100%;
overflow: auto;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
} 
#menu {
	position: absolute;
	background-color: #FFFFFF;
	width: 42%;
	height: 100%;
	margin-top: 0;
}
#contenu {
	position: absolute;
	margin-top: 0;
	height: 100%;
	background-color:#E6A264;
	overflow: auto;
	width: 58%;
	left: 42%;
}
</style>
</head>
<body>
?????????
</body>
</html>


Grosso modo, j'aimerais avoir la même structure que le schéma présenté dans le tutoriel, mais sans la partie "titre", ni la partie "pied".

Je me suis dit que je devais faire appel à la fonction include pour "remplir" la partie "menu", en appelant mon fichier externe nommé menu.html... Tout ça entre <body> et </body>.

J'ai donc mis à cet endroit le code suivant :


<div id="#menu">
<?php include "menu.html"; ?>
</div>


Malheureusement, ça ne fonctionne pas. Je viens de faire un essai en ligne, et j'obtiens une page blanche. J'ai vérifié s'il y avait redondance des balises (deux <html> par exemple), mais tout est en ordre de ce côté.

Encore merci pour votre aide, ce projet de site est capital pour moi.

Fabien.
Administrateur
Bonjour,

merci d'effectuer ce qu'a demandé mpop Smiley smile
mpop a écrit :
Premièrement, les règles de ce forum stipulent que le code collé dans les messages doit être balisé comme tel, avec les balises [ code] et [ /code] (sans les espaces). Merci de bien vouloir éditer tes deux messages dans ce sujet qui contiennent du code pour te conformer à cette règle (tu peux utiliser le bouton d'édition en haut à droite de chaque message à éditer). Smiley smile

Modifié par Felipe (12 Oct 2006 - 02:44)
Salut,

Met ton test en ligne, file nous l'url.

En tant qu'on y est fait une petite arbo de ton site rapide histoire de voir si tu te viande pas dans les chemins

Fab
Bonjour,

Suis désolé, je n'avais pas vu qu'on pouvait rééditer des messages déjà envoyés.

Tout est en ordre je pense maintenant.

Merci

Fabien
Voilà le site en question : http://www.formation-astrologie.com

Il est actuellement construit en frames (deux cadres), avec reconstitution des frames lorsque les pages filles sont indexées seules (mais le site n'est pas encore référencé).

L'idéal donc serait d'avoir le même effet visuel que ce qui est affiché à l'écran, mais en n'ayant plus les frames.

Merci

Fabien.
Bé, je vois pas trop ou est ton problème est surtout pourquoi tu veux diviser ta page en 2 parties :s

Bon si tu maitrise pas fait simple, oublie l'inclusion de ton menu est claque le en dur dans ton div id="menu", il se rechargera tout simplement lorsque le visiteur naviguera sur ton site.

Le seul problème que je vois là, c'est un manque de reflexion sur la réél utilité des frames(et de l'inclusion d'une menu en fichier externe) Smiley cligne

N'hésite pas à analyser ton idée pour vérifier si elle est cohérente avant de chercher des solutions à des problèmes que tu peux éviter Smiley smile

Si je me suis égaré et que j'ai mal compris, alors excuse moi et met en ligne ton test sans frames.

Fab
Modifié par Fab_ien (12 Oct 2006 - 10:51)
Oui, justement, si je suis ici, c'est pour essayer d'y voir plus clair Smiley smile Je veux précisément savoir si je m'égare ou s'il existe d'autres solutions. Je ne peux analyser mon idée seul, car je ne suis pas du tout expert en informatique. C'est pourquoi j'écris dans le forum dédié aux débutants Smiley smile

Je reprends brièvement :

1) le site est actuellement construit en frames ;
2) étant débutant, j'ignorais que cette technique n'était pas recommandée ;
3) j'aimerais à présent reprogrammer le site, mais sans frames ;
4) je me suis dit il y a deux jours : "essayons les feuilles de style" (mais là je ne suis pas certain de mon coup).
5) J'ai réussi à réaliser une feuille de style ayant le même aspect visuel que le site actuellement en ligne
6) Mais une feuille de style non rattachée à qqch, ça ne sert à rien : mon but est de faire apparaître le menu dans la partie blanche de la feuille de style.
7) Seulement, le fichier menu.html existe déjà (il correspond actuellement au cadre gauche sur le site). Par souci de commodité, j'aimerais donc savoir s'il est techniquement possible d'utiliser ce fichier menu.html et de faire appel à lui grâce à la commande php include.
8) Le souci c'est que j'ignore à quel moment je dois utiliser cette fonction et si je ne fais pas fausse route. Ou alors y a-t-il un moyen plus simple ?
Re, bon alors je t'informe que tu t'égare completement Smiley langue

Voilà ma vision de ton site :

Une page html (peut etre avec des templates si tu ne peux pas utiliser le beau couple qu'est PHP/MySQL)

Cette page est une page html, elle contient des balises qui permettent de structurer ta page selon un schéma établi (en l'occurence ton ancienne version de site) dans ton cas, une zone gauche pour le menu, et une droite pour le contenu

Tu y met tout tes éléments (un élément est l'ensemble balise/contenu, comme par exemple : <p>ceci est un paragraphe</p>)

Dans ton cas precis tu recupères tout ce qui est compris entre <body> et </body> de ta page menu.html et tu le colle dans ton div id="menu" de ta nouvelle page html sans frames

... et bien sur dans la partie droite le contenu de ta frame de droite (comme pour le menu.html tout ce qui est entre <body> et </body>)

Et c'est seulement ensuite que tu t'interessera à la feuille de style pour "présenter" ton contenu selon un habillage spécifique

Comprends bien que la feuille de style ne fait rien d'autre que de mettre en forme tes éléments, les habiller en quelque sorte.

Donc c'est uniquement sur ta page html que tu dois te concentrer pour moment

Bref, oubli php pour le moment

Et vraiment, crée un repertoire test sur ton site en ligne et met tes fichiers de test que je puisse voir ce que tu dis

Je sort completement de ton idée de frame et de remplacer les frames par des includes ou autres techniques de sioux, car dans ton cas, je n'en vois pas l'utilité

J'espère qu'on avance Smiley cligne
Bonjour jambon00sec Smiley smile

Oui, je suis assez en accord avec la démarche proposée par Fab_ien

A l'arrivée, tu auras une page html qui contiendra ce que contient actuellement 2 pages... Pour le menu... Attendre la suite (à ce propos, si javascript est désactivé, on ne peut plus naviguer sur le site...)

Ce qui pourrait donner concrètement à partir du body :

<body>
<div id="menu">
Ici tu copies le code de la page affichée dans la frame gauche
</div><!-- Fin de menu -->
<div id="contenu">
Ici tu copies le code de la page affichée dans la frame droite
</div><!-- Fin de contenu -->
</body>


Bien sûr, tu ajoutes l'entête et le pied de page... Attention de ne pas cumuler le doctype et les balise : "html", "head", etc... Smiley cligne

L'affichage, les couleurs, tout ce qui concerne la présentation sera ensuite géré par la feuille css...
Merci Fab Smiley smile

a écrit :
Et vraiment, crée un repertoire test sur ton site en ligne et met tes fichiers de test que je puisse voir ce que tu dis


Euh comment dois-je faire pour créer un répertoire test ? Car, actuellement, tous les fichiers et images servant au site sont sur le serveur (avec le fichier initial index.html, celle justement qui a la structure frames).

a écrit :

A l'arrivée, tu auras une page html qui contiendra ce que contient actuellement 2 pages... Pour le menu... Attendre la suite (à ce propos, si javascript est désactivé, on ne peut plus naviguer sur le site...)

Ce qui pourrait donner concrètement à partir du body :


<body>

<div id="menu">

Ici tu copies le code de la page affichée dans la frame gauche

</div><!-- Fin de menu -->

<div id="contenu">

Ici tu copies le code de la page affichée dans la frame droite

</div><!-- Fin de contenu -->

</body>

Bien sûr, tu ajoutes l'entête et le pied de page... Attention de ne pas cumuler le doctype et les balise : "html", "head", etc... cligne


Merci Dominique Smiley smile

Donc, si j'ai bien saisi, je fais un copier-coller des codes des fichiers menu.html et accueil.html et je les mets aux endroits que tu as indiqués ci-dessus ? (il n'y a pas d'entête ni de pied de page sur le site ; cf http://www.formation-astrologie.com

Et avant le Smiley body , je mets le code de la feuille de style correspondant à l'effet visuel du site ?

Encore merci pour votre aide, c'est top !

Fabien.
Pour ton rep, faut simplement créer en local un repertoire test puis le transferer sur ton espace en ligne.
Fab_ien a écrit :
Pour ton rep, faut simplement créer en local un repertoire test puis le transferer sur ton espace en ligne.


Je crée un autre dossier sur le serveur, par exemple, "repertoire test", et je transfère tous mes fichiers sur ce répertoire ? Suis pas certain d'avoir compris Smiley decu
- Concernant ton dossier de tests. Via ton outils ftp (ce qui te sert à copier les fichiers sur le site), tu créés, par exemple, un dossier appelé tests. Ensuite tu stockes dedans les essais que tu fais et pour afficher le résultat, le chemin sera, par exemple :
http://www.formation-astrologie.com/tests/mon_fichier.html


... et c'est ce chemin que tu indiqueras sur le forum pour qu'on puisse t'aider sur du code concret Smiley smile

- Pour l'entête, je pensais aux éléments qui doivent apparaître en haut de ton code, le doctype, la balise "html", la balise "head" et son contenu... et en bas de page, il faudra fermer la balise "html"

- Pour les css, soit tu les mets sur la page, mais je ne pense pas que ce sera pour toi la meilleure solution, je te suggère plutôt d'avoir une feuille de styles séparée que tu peux charger comme expliqué ici Smiley cligne
Modifié par dominique (12 Oct 2006 - 12:59)
Merci beaucoup Dominique !

J'ai suivi tes instructions et ça fonctionne très bien !

a écrit :


<body>

<div id="menu">

Ici tu copies le code de la page affichée dans la frame gauche

</div><!-- Fin de menu -->

<div id="contenu">

Ici tu copies le code de la page affichée dans la frame droite

</div><!-- Fin de contenu -->

</body>



J'ai créé un répertoire "test" qui contient l'ensemble de mes fichiers permettant la visualistation de la page d'accueil. Voici l'adresse :
http://formation-astrologie.com/test

Ma page d'accueil test : http://formation-astrologie.com/test/page_test.html

Le seul souci, c'est que les coordonnées de l'Institut (partie gauche, blanche) ne sont pas affichées correctement avec Internet Explorer, alors qu'avec Mozilla c'est nickel (j'ai utilisé les espaces insécables, mais je pense qu'il y a mieux lol).

A part ce petit pépin, il ne me reste plus qu'à associer chaque section du menu à un fichier html, et à faire en sorte que ces fichiers s'affichent dans la partie droite.

Actuellement, le site est construit en frames. J'utilise donc le "target" pour diriger mes fichiers.

Mais avec la nouvelle structure du site (cf ci-dessus), cette fonction "target" ne doit plus fonctionner, à moins qu'il soit possible d'écrire par exemple : target="div id="contenu"" ? Smiley smile Smiley smile Smiley biggol

Je me demande s'il ne faut pas utiliser ici le fameux include php...

Fabien.
Pages :
Sujet clos
Aller à