18008 sujets

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

Chargement d'un fichier html - include php - css

Pages :
(reprise du message précédent)

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.
Bien Smiley smile

Voilà une étape de franchie Smiley cligne
- Un p'tit cadeau... la validation W3C du html avec seulement 8 erreurs Smiley smile

- Donc prochaine étape, avoir un code propre... C'est mieux pour la suite Smiley cligne

- Je pense que tu n'as pas bien compris le fonctionnement de ce système, pour faire simple, oubli les frames et leur fonctionnement, maintenant, pour chaque lien cliqué, ça recharge une page entière.

- Ensuite, il faut, je pense nettoyer le code de la partie droite Smiley cligne
Salut Dominique

Euh j'ai essayé de nettoyer le code de la partie droite et aussi réparer les erreurs via la validation W3C du html. Il n'en reste plus que deux, mais j'ai du mal à les comprendre :

a écrit :

Error Line 157 column 107: ID "menu" already defined.

...dth="138" height="55" border="0" id="menu" alt="" /></td>

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exError Line 217 column 64: required attribute "alt" not specified.

...eaimgmenu.gif" width="212" height="288" hspace="75" /><br />

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.



@ +

Fabien
Pardon, j'ai oublié :

a écrit :

# Error Line 157 column 107: ID "menu" already defined.

...dth="138" height="55" border="0" id="menu" alt="" /></td>

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).

&#9993;
# Info Line 134 column 9: ID "menu" first defined here.

<div id="menu">

# Error Line 217 column 64: required attribute "alt" not specified.

...eaimgmenu.gif" width="212" height="288" hspace="75" /><br />

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.
T'as mis plusieurs fois le même id. La valeur d'un attribut id doit être identique dans tout le document
a écrit :
T'as mis plusieurs fois le même id. La valeur d'un attribut id doit être identique dans tout le document


En fait je me suis servi de fireworks pour créer le menu, puis importation au format dreamweaver.

Je ne sais pas si je dois modifier qqch, car tout a l'air de bien fonctionner.
Même si ça fonctionne, il vaut mieux modifier l'un des id, sinon des problèmes peuvent se poser (genre si t'appelle getElementById en JS, lequel est retournée ?)
merci pour tes conseils Smiley smile

Tout est en ordre maintenant, il n'y a plus aucune erreur Smiley smile

Maintenant, je dois m'occuper du menu et faire en sorte que pour chaque lien cliqué sur le menu, ça recharge la page entière (en conservant le menu à gauche)
Plus qu'a reprendre chaque page html de ton site et y intégrer ta structure html comme dans ta page de test: menu + contenu.

Le menu sera toujours le même et le contenu variera en fonction de la page html sur laquelle tu te trouve.

Courage! Smiley cligne
Salut Fab_ien Smiley cligne

Je ne sais pas si la nuit a porté conseil, mais tout s'est éclairé ce matin, et je pense avoir compris le include php.

Je m'exerce pour l'instant sur le premier bouton du menu (le signe du scorpion, indiquant "alain de chivré").

J'ai donc modifié le lien du bouton image en :
<a href="index.php?page=alain_de_chivre">


J'ai supprimé le target mainframe

Puis j'ai créé le fichier alain_de_chivre.php

Ensuite un fichier index.php :

<link rel="stylesheet" type="text/css" href="formatiea.css" />
<div id="gauche" >
<?php
  include('menuiea.html');   // Appel du menu gauche
?>
</div>
<div id="contenu">
<?php
  include($_GET['page'].'.php');   // Appel du contenu droit
?>
</div>


Voilà c'est tout je crois

Je viens de faire un essai : "www.formation-astrologie.com/test/page_test.html

La page entière se recharge et le fichier alain_de_chivre.php est bien appelé, mais il y a des pépins de mise en forme.... Grrr

J'y arriverai

Fab
Bonne pioche pour ton include Smiley cligne

Effectivement problème de scrollbar inutile

tu t'est planté à un endroit, tu à mis ton div contenusous tes balises fermantes :

<!-- Fin de menu -->

</body>
</html></div>
<div id="contenu">

verifie bien ton code avant de crier au loup Smiley cligne
Modifié par Fab_ien (13 Oct 2006 - 16:54)
ah ok...

Mais j'ai du mal à trouver où se trouve l'erreur : c'est dans le fichier menuiea.html ?

Dans ce fichier, j'ai laissé les balises body html head. Je dois les supprimer ?

A la ligne 101 du fichier menuiea.html, il y a <body onload...> - et si je supprime body, je dois remplacer par quoi ?

Merci

Fabien
J'ai apporté quelques modifications, mais sous Internet Explorer, y a toujours le pépin de scrollbar - sais pas quoi faire Smiley decu
Bonsoir

Je rencontre toujours la même difficulté : quand je clique sur le bouton "scorpion" (en rouge, correspondant à "Alain de Chivre"), la page se charge bien, mais le scrollbar fait défiler la page entière, alors qu'il devrait porter uniquement sur le contenu à droite (Internet Explorer)

Voici la page test :

http://www.formation-astrologie.com/test/page_test.html

La feuille de style : http://www.formation-astrologie.com/test/formatiea.css

Le code index.php


<link rel="stylesheet" type="text/css" href="formatiea.css" />
<div id="gauche" >
<?php
  include('menuiea.html');   // Nous appelons notre menu
?>
</div>
<div id="contenu">
<?php
  include($_GET['page'].'.php');   // Nous appelons le contenu central de la page
?>
</div>


Le fichier menuiea.html : http://www.formation-astrologie.com/test/menuiea.html

Je ne sais pas si le pépin de scrollbar vient de la feuille de style, ou alors du code de menuiea.html.... ou alors autre chose Smiley decu

J'ai vraiment besoin de vos lumières, suis dessus depuis ce matin Smiley bawling


Fab / jambon00sec
Modifié par jambon00sec (14 Oct 2006 - 01:33)
Salut Fab, c'est normal que ton scroll vertical prend toute la page puisque tu as sur la même page ton menu et ton contenu,

Le truc pour faire ce que tu veux serait de faire un overflow et definir une hauteur sur ton div conteneur, mais le problème est que tu va devoir definir une hauteur et cette hauteur risque de poser des problème en fonction de la resolution d'écran de ton visiteur.

Mais personnellement, je ne vois pas en quoi gêne le fait que toute la page defile. A part peut etre que le blanc du menu devrait descendre jusqu'en bas.

Je vois que tu as réussi tout seul depuis hier, c'est bien et c'est comme ça qu'il faut qe ça se passe Smiley cligne ici, on ne peux que t'aiguiller, mais le travail reste à ta charge.

Un conseil regarde un peu les sites actuel, comment il sont mis en page, position du menu, zone de contenu, pied de page et demande toi si ton site est finalement bien pensé tel que tu cherches à le faire. Peut être que ce sera l'occaz de revoir ta copie Smiley cligne

Fab
Merci pour ton message Fab, c'est cool.

Concernant la mise en page du site (position du menu etc), j'aimerais tout conserver. Menu à gauche, contenu à droite. Pas de tete ni de pied de page.

Si j'ai bien compris, le pépin de scrollbar vient de la feuille de style ou d'une sorte de conflit entre la feuille de style formatiea.css et ptet autre chose ?


<style type="text/css">
<!--
html, body {
height: 100%;
width: 100%;
overflow: auto;
}
body {
font-family: Tahoma;
margin: 0;
padding: 0;
} 
#gauche {
	position: absolute;
	background-color: #FFFFFF;
	width: 42%;
	height: 100%;
	margin-top: 0;
	margin-bottom: 0;
}
#contenu {
	position: absolute;
	margin-top: 0;
	margin-bottom: 0;
	height: 100%;
	background-color:#E6A264;
	width: 54%;
	left: 42%;
	padding-left: 2%;
	padding-right: 2%;
	font-family: Tahoma;
}
-->
</style>


Quelle est la différence entre :

html, body {
height: 100%;
width: 100%;
overflow: auto;
}


et


body {
font-family: Tahoma;
margin: 0;
padding: 0;

?

Que représente le "html, body { }" par rapport au "body { }]" ici ?

Merci
Re,

De mémoire je ne me rappel plus pourquoi on ajoute le html, (un truc pour opera??) en général je développe mes site sans avoir besoin de faire appel à ce truc.

Bon aussi concernant ta feuille de style tu peux virer : 

<style type="text/css">
<!--
... ici tu laisse bien sur
-->
</style>


Ces balises ne servent à rien. (déjà déclarées dans ton fichier html : <link rel="stylesheet" type="text/css" href="formatiea.css" />)

Ensuite tu n'as pas de pépin tel quel, si tu as un scrollbar c'est que le contenu de ta page dépasse la hauteur du navigateur, logique (a moins que je n'ai pas la même chose que toi à l'écran)
Merci pour tes conseils et tes encouragements Smiley smile

En fait, ça fait maintenant un mois que je travaille sur ce site, et je dois avouer que ça me plaît beaucoup, même si c'est difficile (défaut de méthode et de connaissances - mais j'adore apprendre Smiley smile .

J'utilise IE et Mozilla. Le scrollbar s'applique à la page entière, alors qu'il ne devrait porter que sur la partie droite.

Là, j'essaie de comprendre les codes source des modèles porposés
sur le tutoriel http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS.

Théoriquement, mais dis-moi si je me trompe, je devrais insérer un overflow:auto dans le div contenu, et faire en sorte que le menu reste fixe. Est-ce une question de positionnement absolu / relatif ?

Encore merci

Fabien.
Voici le résultat après le clic sur le bouton "scorpion / alain de chivre" : le scrolling porte sur toute la page. Menu et page appelée se déplacent.

upload/8914-image1.jpg
Je t'avais déjà plus ou moins donné une réponse la dessus plus haut dans ce topic, mets une hauteur à ton div contenu genre #contenu { height: 100px;}
juste pour tester et tu verras que tu auras un scroll.

Mais attention, car en fonction de la hauteur d'écran du visiteur cela peux poser problème.

On en reparle si ma réponse répond à ton problème
Pages :
Sujet clos
Aller à