include puis positionnement par css

Eléphant du PHP | 68 Messages

17 sept. 2005, 10:14

bonjour à tous!

je suis en train de creer mon premier site avec toutes les difficultées que ça implique! :wink:

alors voici mon problème:

j'ai decomposé ma page en 4 parties: un menu en haut, une partie news à gauche, ma partie centrale qui variera en fonction du clic sur mon menu et un pied de page

j'ai creé ma page index avec des includes de ces 4 parties!

mon probleme est de positionner mes differentes parties avec la css!

j'ai regardé sur alsa creation mais je n'y arrive pas mes 4 parties se retrouvent à la suite verticalement!

je recherche donc un tutorial pour faire une page composée de 4 fichiers.php que l'on include dans un fichier index et que l'on positionne avec la css

second probleme dans ma css je tape ça:

body {
width: 780px;
margin: absolute;
margin-top: 10px;
margin-bottom: 20px;
text-align: center;
background-image: url("back_fade.jpg");
}

malgré ça pas d'image de fond affichée je ne comprends pas

merci d'avance pour vos reponses!


:o

Mammouth du PHP | 19672 Messages

17 sept. 2005, 10:43

Salut,
puisque tu as eu la bonne idée de t'inscrire, tu vas pouvoir éditer ton message pour procéder à un ajustement: regarde donc les règles du forum en t'attardant sur la première ligne de l'article 3.

Ensuite, en CSS, margin: absolute, ça n'existe pas: c'est soit margin et une dimension, soit position : absolute.

As-tu mis ta page en ligne quelque part qu'on puisse voir le code généré et la feuille de style complète, ce sera plus facile pour t'aider. Sinon, mets nous ici le code en question (en oubliant pas les boutons [code] pour le CSS et [php] pour le html.

Ne nous mets pas le PHP pour le moment, on va régler le problème HTML/CSS

Et à ce propos, je déménage le sujet dans le forum approprié ;)
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Eléphant du PHP | 68 Messages

17 sept. 2005, 14:21

merci c super sympa de bien vouloir m'aider j'apprecie!

voici donc l'adresse de mon site:
http://ayiore.free.fr/agua/sitephp/

et voila ce que cela devrait donner:(version html de base)
http://ayiore.free.fr/agua/

tout ceci n'est qu'une ebauche de site mais j'aimerai partir sur quelque chose de propre et là je ne crois pas que ce soit le cas!

autre problème il y a une partie texte qui ne s'affiche pas (comparer site html et celui en pseudos frames!

Code : Tout sélectionner

body { width: 780px; position: absolute; margin-top: 10px; margin-bottom: 20px; text-align: center; background-image: url(back_fade.jpg); } .menu { margin: 0 auto; padding:0; width: 780; } .news { float: left; width: 210px; margin: 0 auto; } .accueil { margin-left: 210px; width: 570px; margin-bottom: 20px; color: #B3B3B3; background-color: #626262; background-repeat: repeat-x; border: 2px solid black; } .pied { width: auto; height: 80px; /*background-color: #06C; color: #fff;*/ font-size: 12px; /*padding: 10px;*/ } --> </style>

Mammouth du PHP | 19672 Messages

17 sept. 2005, 16:15

TU as regardé le code source généré dans la première adresse ?? :shock:
J'ai compté 5 balises <!DOCTYPE, à peu près autant de <body> et tout est dns la même veine... TU essayes de faire quoi au juste ?
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Eléphant du PHP | 68 Messages

17 sept. 2005, 16:50

en fait celà doit venir du fait que ma page index reunie les 4 parties de ma page avec des includes

il faut que je laisse simplement ces balises dans la page index alors?

Mammouth du PHP | 19672 Messages

17 sept. 2005, 16:57

TU as bien compris: un include, ça ne veut pas dire uncilure une page complète dans une autre mais une partie de page : toutes les inclusions plus ce que contient déjà la page appelante composent ensuite une page unique entière.
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Eléphant du PHP | 68 Messages

17 sept. 2005, 16:59

oki j'ai compris et c'est modifié!
merci


maintenant il reste tous les autres problèmes precedemment cités!

encore merci pour ton aide! :wink:

tu vois comment resoudre le problème pour l'affichage et celui l'image de fond?

Mammouth du PHP | 19672 Messages

17 sept. 2005, 17:17

Ok, c'est nettement mieux, mais ce n'est pas encore ça, il reste des erreurs dans le HTML : quand ton html sera correct, tu pourras te pencher sur les CSS. Mais appliquer un style CSS sur un code html boiteux, c'est mettre un vernis à ongle coûteux sur des ongles crasseux ;)

Tu as des tableaux html à revoir. celui de gauche par exemple, avec les deux évènements du 25 Juin: absence de balise <tr> avant les balises <td>

Tableau suivant, balise <td> précédant la balise table mais avec rien avant :
La structure basique d'un tableau html est celle-ci:

Code : Tout sélectionner

<!-- Tableau simple --> <table> <tr> <td></td> </tr> </table> <!-- Tableaux imbriqués --> <table> <tr> <td> <table> <tr> <td></td> </tr> </table> </td> </tr> </table>
Si tes tableaux même imbriqués ne respectent pas cette structure, ton code ne sera pas bon. commence par corriger ça.
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Eléphant du PHP | 68 Messages

17 sept. 2005, 17:59

j'ai fait les modification sur chacun de mes 4 fichiers en respectant les regles que tu m'as donné!
merci

toute ces erreurs viennent du fait que j'ai fait des copier coller du code que j'avais dans mon site fait en html classique sans pseudo frames!

j'attends tes instructions :wink:

Mammouth du PHP | 19672 Messages

18 sept. 2005, 12:29

Ben j'ai aucune instructions: juste des suggestions. Prenons le cas d'une page html basique;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Page exemple</title>
</head>
<body>
<div>
<h1>Titre de la page</h1>
</div>
<ul id="menu">
  <li><a href="#" class="" title="">lien_1</a></li>
  <li><a href="#" class="" title="">lien_2</a></li>
  <li><a href="#" class="" title="">lien_3</a></li>
</ul>
<div id="contenu">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vestibulum euismod magna. Proin egestas nibh et metus. Quisque fermentum massa at diam. Donec eu elit vitae est laoreet bibendum. Nam aliquet neque ac diam. Pellentesque iaculis sapien vitae enim. Suspendisse accumsan dui sit amet lacus. Nunc commodo, est id convallis pharetra, magna ante tempus metus, ac feugiat massa lacus non elit. Aliquam consequat, eros non sodales lobortis, wisi felis malesuada dolor, non luctus lacus neque ac enim. Proin feugiat bibendum dolor. Nunc diam nunc, vehicula et, auctor id, facilisis sit amet, mi. Nunc nulla. Vivamus quis dolor non est suscipit tempus. Suspendisse eu dui sed est cursus dictum. Sed rhoncus enim ut libero. </p>
<p>Vivamus vitae tortor. Duis ipsum. Quisque diam tortor, ullamcorper non, commodo sed, volutpat at, dolor. Phasellus semper tellus vitae enim. Suspendisse potenti. In in libero et neque vehicula iaculis. Cras dui tortor, vestibulum in, porta consequat, auctor non, neque. Vivamus sem tortor, consequat et, facilisis sit amet, luctus non, mauris. Aliquam lorem sem, pharetra eget, elementum eu, scelerisque molestie, risus. Mauris vehicula mauris nec metus. Quisque justo sapien, porta quis, blandit id, imperdiet eu, felis. Cras nulla.</p>
</div>
<div id="pied_de_page">
<p>copyright</p>
</div>
</body>
</html>
Partant de là, on va découper ça en modules complémentaires:
  • entete.php
  • haut_page.php
  • menu.php
  • contenu.php
  • pied_page.php
On va créer un index.php qui va comporter uniquement des includes:
<?php
include_once("entete.php");
include_once("haut_page.php");
include_once("menu.php");
include_once("contenu.php");
include_once("pied_page.php");
?>
voici les contenus individuels de chaque module:
entete.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Page exemple</title>
</head>
<body>
haut_page.php
<div>
  <h1>Titre de la page</h1>
</div>
menu.php
<ul id="menu">
  <li><a href="#" class="" title="">lien_1</a></li>
  <li><a href="#" class="" title="">lien_2</a></li>
  <li><a href="#" class="" title="">lien_3</a></li>
</ul>
contenu.php
<div id="contenu">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vestibulum euismod magna. Proin egestas nibh et metus. Quisque fermentum massa at diam. Donec eu elit vitae est laoreet bibendum. Nam aliquet neque ac diam. Pellentesque iaculis sapien vitae enim. Suspendisse accumsan dui sit amet lacus. Nunc commodo, est id convallis pharetra, magna ante tempus metus, ac feugiat massa lacus non elit. Aliquam consequat, eros non sodales lobortis, wisi felis malesuada dolor, non luctus lacus neque ac enim. Proin feugiat bibendum dolor. Nunc diam nunc, vehicula et, auctor id, facilisis sit amet, mi. Nunc nulla. Vivamus quis dolor non est suscipit tempus. Suspendisse eu dui sed est cursus dictum. Sed rhoncus enim ut libero. </p>
  <p>Vivamus vitae tortor. Duis ipsum. Quisque diam tortor, ullamcorper non, commodo sed, volutpat at, dolor. Phasellus semper tellus vitae enim. Suspendisse potenti. In in libero et neque vehicula iaculis. Cras dui tortor, vestibulum in, porta consequat, auctor non, neque. Vivamus sem tortor, consequat et, facilisis sit amet, luctus non, mauris. Aliquam lorem sem, pharetra eget, elementum eu, scelerisque molestie, risus. Mauris vehicula mauris nec metus. Quisque justo sapien, porta quis, blandit id, imperdiet eu, felis. Cras nulla.</p>
</div>
pied_page.php
<div id="pied_de_page">
  <p>copyright</p>
</div>
</body>
</html>
Partant de là, il te reste à concevoir le style CSS pour la mise en page et tu peux modifier chaque module individuellement, mais en sachant quelle partie de la page il représente. Donc travaille sur une maquette complète, ajuste tes styles et ensuite, découpe en modules à contenu variable ou non. Ici, je n'ai pas utilisé de tableaux, mais tu pourrais en utiliser du moment que tu crées un code conforme.
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Eléphant du PHP | 68 Messages

18 sept. 2005, 12:49

ok ça correspond à peut pres à ce que j'ai fait en suivant des tutoriaux
voici ce que donne ma page index:

par contre moi j'utilise div class au lieu de div id c important?
<html>
<head>
<title>.::agua viva::.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>

<div class="menu" >
<?php 
include('menu.php');
?>
</div>

<div class="colonneGauche" >
<?php 
include('news.php');
?>
</div>
<div class="colonneDroite" >
<?php
$pageOK = array('accueil' => 'accueil.php',
                'planningStud1' => 'planningStud1.php');
				
	if ( (isset($_GET['page'])) && (isset($pageOK[$_GET['page']]))			
) {
    include($pageOK[$_GET['page']]);
} else {
    include('accueil.php');
	}

?>
</div>
<div class="pied">
<?php
  include('pied.php');
?>
</div>
</body>
</html>
c'est le code de la page que tu as déjà pu voir! comme tu as pu le constater chaque sous ensemble dans mon cas est un tableau! ayant suivi les regles que tu m'as donné le code doit être correct

j'attends tes suggestions :wink:

Mammouth du PHP | 19672 Messages

18 sept. 2005, 12:57

Alors la suggestion est la suivante: affiche la source de la page générée, et travaille sur ce modèle pour créer ta mise en page avec une feuille de style pour positionner chaque élément. Quand tu auras obtenu la mise en page souhaitée, il te restera à tester la nouvelle feuille de style en rechargeant la page PHP: tu devrais obtenir strictement le même affichage que celui obtenu avec le modèle.

Peut-être réaliseras-tu que la structure a besoin d'ajutements. Si tu fais un ajustement de structure dans le HTML du modèle, tu devras reporter ces ajustements sur les modules PHP.

Mais comprends bien que pour réussir une mise en page en CSS, il faut un minimum de maîtrise du HTML à la base parce que tu ne peux travailler correctement que sur du code HTML conforme et si possible valide.
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Eléphant du PHP | 68 Messages

18 sept. 2005, 13:13

ok mais le code de ma page te semble juste? si c'est le cas il ne me reste qu'a positionner mes élément avec ma css et c'est là qu'est mon gros problème car avec la css suivante

Code : Tout sélectionner

<style type="text/css"> <!-- body { width: 780px; position: absolute; margin-top: 10px; margin-bottom: 20px; text-align: center; background-image: url(back_fade.jpg); } .menu { margin: 0 auto; padding:0; width: 780; } .news { float: left; width: 210px; margin: 0 auto; } .accueil { margin-left: 210px; width: 570px; margin-bottom: 20px; color: #B3B3B3; background-color: #626262; border: 2px solid black; } .pied { width: auto; height: 80px; /*background-color: #06C; color: #fff;*/ font-size: 12px; /*padding: 10px;*/ } --> </style>
le resultat n'est pas bon tout les sous-ensembles sont les un au dessus des autres

excuse moi si je te demande autant d'aide mais ça fait un moment déjà que je suis sur ce prototype de site et je bloc sur ce problème qui m'empeche d'avancé! si ma page d'accueil s'affiche bien j'aurais la trame pour toutes les autres pages!

merci d'avance

Eléphant du PHP | 68 Messages

20 sept. 2005, 17:36

help cyrano !

:wink:

Mammouth du PHP | 19672 Messages

20 sept. 2005, 18:17

Tout ce que je vois là, c'est un style CSS, je ne peux pas juger de son efficacité sans le code html auquel il est destiné. Si tu as un ensemble des deux en ligne avec une description de ce que tu n'arrives pas à obtenir, on peut trouver en manipulant le CSS avec la barre WebDevelopper de FireFox et trouver rapidement une solution.
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe: