PHPfrance

la communauté d'entraide francophone dédiée au PHP

include puis positionnement par css

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : include puis positionnement par css

par Lareine » 01 oct. 2005, 10:20

Superbe topic, qui répond à une question que je me posait :P !
A savoir si je pouvait mettre les meta et link html dans un
include php :P ! Réponse positive donc \:D/ !

par ayiore » 25 sept. 2005, 20:10

je ne l'ai pas encore mis car il me reste toujours cette difference d'affichage entre ie et firefox :lol:

par Vaedan » 25 sept. 2005, 15:41

oublie pas le pti [résolu] ;)

par ayiore » 24 sept. 2005, 23:37

merci bcp ! :wink:

par Cyrano » 22 sept. 2005, 20:58

Essaye avec ça : en fait, je rajoute un div global et je rajoute un style pour le centrer : note également que ça posait encore un problème avec IE, j'ai réduit le taleau de la colonne gauche de 10px, faudra peut-être ré-ajuster. 
<html>
<head>
<title>.::agua viva::.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!--
<link href="styles.css" rel="stylesheet" title="styles" type="text/css" />
-->
<style type="text/css">
<!--
body {
    text-align: center;
    background-color:white;
    background-image:url(back_fade.jpg);
}
#global {
    width: 780px;
    position: absolute;
    top: 10px;
    left: 50%;
    margin-left: -390px;
}
.menu
{
    margin: 0 auto;
    padding: 0;
    width: 780px;
    height: 150px;
}
.news
{
    float: left;
    width: 200px;
    padding: 0;
}
.accueil
{
    margin-left: 210px;
    width: 550px;
    height: 410px;
}
.pied
{
    width: 780px;
    height: 80px;
    font-size: 12px;
    clear: both;
}
.Style3 {
    color: #FFFFFF;
    font-size: 14px;
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
}
.Style4 {
      color: #000000;
      font-size: 12px;
      font-family: Arial, Helvetica, sans-serif;
}
.colonneGauche {
    float: left;
    margin: 0;
}
table {
    margin: 0;
}
-->
</style>
</head>
<body>
<div id="global">
<div class="menu" >
<table border="0" cellpadding="0" cellspacing="0" width="782">
<!-- fwtable fwsrc="Sans titre" fwbase="test1.gif" fwstyle="Dreamweaver" fwdocid = "272400320" fwnested="0" -->
  <tr>
    <td><img src="file:///C|/compte/jybe/agua%20viva%20final/images/spacer.gif" width="211" height="1" border="0" alt=""></td>
    <td><img src="file:///C|/compte/jybe/agua%20viva%20final/images/spacer.gif" width="26" height="1" border="0" alt=""></td>
    <td><img src="file:///C|/compte/jybe/agua%20viva%20final/images/spacer.gif" width="216" height="1" border="0" alt=""></td>
    <td><img src="file:///C|/compte/jybe/agua%20viva%20final/images/spacer.gif" width="329" height="1" border="0" alt=""></td>
  </tr>
  <tr>
    <td><img src="aguabanfinal1_r1_c1.jpg" alt="" name="aguabanfinal1_r1_c1" width="211" height="64" border="0"></td>
    <td colspan="2"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="242" height="64">
      <param name="movie" value="menu1.swf">
      <param name="quality" value="autolow">
      <embed src="menu1.swf" quality="autolow" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="242" height="64"></embed>
      </object></td>
    <td><img name="aguabanfinal1_r1_c4" src="aguabanfinal1_r1_c4.jpg" width="329" height="64" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="2"><img src="aguabanfinal1_r3_c1.jpg" alt="" name="aguabanfinal1_r3_c1" width="237" height="41" border="0"></td>
    <td rowspan="2"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="216" height="87">
      <param name="movie" value="menu2.swf">
      <param name="quality" value="autolow">
      <embed src="menu2.swf" quality="autolow" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="216" height="87"></embed>
      </object></td>
    <td><img name="aguabanfinal1_r2_c4" src="aguabanfinal1_r2_c4.jpg" width="329" height="41" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="2"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="237" height="46">
      <param name="movie" value="fondu%20espace%20forme.swf">
      <param name="quality" value="autolow">
      <embed src="fondu%20espace%20forme.swf" quality="autolow" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="237" height="46"></embed>
      </object></td>
    <td><img name="aguabanfinal1_r4_c4" src="aguabanfinal1_r4_c4.jpg" width="329" height="46" border="0" alt=""></td>
  </tr>
</table>
</div>
<div class="colonneGauche" >
<table width="200" height="430" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
  <tr>
    <td bgcolor="#e0f4fc" valign="top" width="210">
      <div style="padding: 5px 20px 20px; color: rgb(0, 0, 0);" class="ver11">
      <div align="justify">
      <p><span style="color: #FF0000; font-weight: bold;"><font style="">25 Juin 2005</font></span><br>
      <span style="font-size: 12px; color: #FF0000; font-family: Arial, Helvetica, sans-serif; font-weight: bold;"><font style="">Body pump 54 New release </font></span></p>
      <p><span style="font-size: 12px; font-family: Arial, Helvetica, sans-serif;"> Venez nombreux le samedi 25 pour le premier cours du&nbsp;body pump release 54. <span style="font-size: 12px; font-family: Arial, Helvetica, sans-serif;"><a href="#" style="" class="ver11">suite... </a></span></span></p>
      <p><span style="font-size: 12px; font-family: Arial, Helvetica, sans-serif;"> </span> <span style="color: #FF0000; font-weight: bold;"><font style="">25 juin 2005 </font></span><br>
      <span style="font-size: 12px; font-family: Arial, Helvetica, sans-serif;"><span style="color: #FF0000; font-weight: bold;"><font style="">Soirée piscine </font></span><br>
      Après vous être depensé sur les nouveaux body
      attack et body pump venez vous delasser autour d'un buffé froid

      et finir la soirée dans la piscine&nbsp;&nbsp;<a href="#" style="" class="ver11"> suite... </a></span></p>
      </div>
      </div>
    </td>
  </tr>
</table>
</div>
<div class="colonneDroite" >
<table width="570" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="570" height="180" valign="top" bgcolor="#FFFFFF"><p align="center" class="Style4"><strong>Un espace qui vous change et ça change tout. </strong></p> <p align="justify" class="Style4">Forme, santé, détente, beauté... A chacun son bien être. </p>
      <p align="justify" class="Style4"> Idéal pour se relaxer ou se tonifier, Agua Viva permet à chacun de choisir l'activité qui lui convient.
      <p align="justify" class="Style4">Chasser le stress, retrouver le parfait équilibre, il n'y aura pas de meilleurs moments que ceux que vous avez choisis. Loisirs ou remise en forme, c'est dans tous les cas, ici plus qu'ailleurs quon s'occupera de vous. Toute une équipe de professionnels est mobilisée pour vous faire passer les meilleurs moments. Un cadre naturellement convivial et chaleureux vous attend. </td>
  </tr>
  <tr>
    <td width="570" height="230" valign="top"><img src="1activites.jpg" width="570" height="230" align="top"></td>
  </tr>
</table>
</div>
<div class="pied">
<table width="780" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="780" height="70" valign="top" background="bas1.jpg"><div align="center"><span class="Style3"><br>
      <br>
      <span class="Style3">Zone du Val Luisant 9, Bd. d'Hochstadt 28600 Luisant Tél: 02 37 28 51 50 Fax: 02 37 28 38 10</span></span><span class="Style1">&nbsp;</span></div></td>
  </tr>
  <tr>
    <td height="12" valign="top" bgcolor="#000000"><div align="center"><span class="Style4"> Copyright © 2005 Agua viva. All rights reserved. </span></div></td>
  </tr>
</table>
</div>
</div>
</body>
</html>

par ayiore » 22 sept. 2005, 20:31

merci bcp !!!!!!

toutes mes erreurs m'apprennent bcp je passe tellement de tps le nez devant le code que je ne vois pas des erreurs flagrantes, style ne pas pointer sur le bon élément! :wink:

ça fini par ressembler à ce que je veux maintenant!

il reste tjs quelques problèmes (et oui encore lol)

1. le centrage de ma page ne marche pas
2. sous ie ma partie centrale gauche news.php (celle avec le float) reste decallée totalement sur la gauche

3. la ce n'est plus un problème que je rencontre mais une question: ma partie centrale composée de deux parties news.php et accueil.php est amené a evoluer. je m'explique, chaque clic sur une des rubriques de mon menu chargera en lieu et place de ma page accueil.php une autre page. jusque là pas de problème et rien d'étonnant :o . par contre ces differentes pages n'auront pas la même hauteur ce qui implique que la propriété height de ma page news.php aurait besoin de s'adapter en fonction de la hauteur de la page chargée sur sa droite! que dois-je ajouter à ma css dans la partie .news pour que ma page news.php s'autoredimenssionne?

par Cyrano » 22 sept. 2005, 18:21

Parce que tu ne pointes pas le bon élément :
ajoute ça dans ta feuille de style:

Code : Tout sélectionner

.colonneGauche { float: left; }
Et vire les bouts de feuille de style qui sont dans la partie body, les .Style3 et .style4 qui doivent être soit dans une feuiulle de style interne dans l'en-tête soit dans la feuille externe. Je te signale à ce propos que .Style4 a dans un premier temps une propriété color : #000000 et ensuite #ffffff (ou l'inverse, je sais plus trop.

Autre détail: dans la feuille de style externe, enlève les balises <style></style>, elles n'ont rien à y faire, c'est du CSS, pas du HTML.

Ta page avec le style intégré en en-tête donne ceci: 
<html>
<head>
<title>.::agua viva::.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- 
<link href="styles.css" rel="stylesheet" title="styles" type="text/css" />
-->
<style type="text/css">
<!--
body {
    width: 780px;
    position: absolute; 
    text-align: center;
    margin-top: 10px; 
    margin-bottom: 20px; 
    background-color:white;
    background-image:url(back_fade.jpg);
}
.menu
{
    margin: 0 auto;
    padding: 0;
    width: 780px;
    height: 150px;
}
.news
{
    float: left; 
    width: 210px; 
}
.accueil
{
    margin-left: 210px; 
    width: 570px;
    height: 410px;
}
.pied
{
    width: 780px;
    height: 80px;
    font-size: 12px;
    clear: both;
}
.Style3 {
    color: #FFFFFF; 
    font-size: 14px; 
    font-family: "Times New Roman", Times, serif; 
    font-weight: bold;
}
.Style4 {
  	color: #000000;
  	font-size: 12px;
  	font-family: Arial, Helvetica, sans-serif;
}
.colonneGauche {
    float: left;
}
-->
</style>
</head>
<body>
<div class="menu" >
<table border="0" cellpadding="0" cellspacing="0" width="782">
<!-- fwtable fwsrc="Sans titre" fwbase="test1.gif" fwstyle="Dreamweaver" fwdocid = "272400320" fwnested="0" -->
  <tr>
    <td><img src="file:///C|/compte/jybe/agua%20viva%20final/images/spacer.gif" width="211" height="1" border="0" alt=""></td>
    <td><img src="file:///C|/compte/jybe/agua%20viva%20final/images/spacer.gif" width="26" height="1" border="0" alt=""></td>
    <td><img src="file:///C|/compte/jybe/agua%20viva%20final/images/spacer.gif" width="216" height="1" border="0" alt=""></td>
    <td><img src="file:///C|/compte/jybe/agua%20viva%20final/images/spacer.gif" width="329" height="1" border="0" alt=""></td>
  </tr>
  <tr>
    <td><img src="aguabanfinal1_r1_c1.jpg" alt="" name="aguabanfinal1_r1_c1" width="211" height="64" border="0"></td>
    <td colspan="2"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="242" height="64">
      <param name="movie" value="menu1.swf">
      <param name="quality" value="autolow">
      <embed src="menu1.swf" quality="autolow" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="242" height="64"></embed>
      </object></td>
    <td><img name="aguabanfinal1_r1_c4" src="aguabanfinal1_r1_c4.jpg" width="329" height="64" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="2"><img src="aguabanfinal1_r3_c1.jpg" alt="" name="aguabanfinal1_r3_c1" width="237" height="41" border="0"></td>
    <td rowspan="2"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="216" height="87">
      <param name="movie" value="menu2.swf">
      <param name="quality" value="autolow">
      <embed src="menu2.swf" quality="autolow" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="216" height="87"></embed>
      </object></td>
    <td><img name="aguabanfinal1_r2_c4" src="aguabanfinal1_r2_c4.jpg" width="329" height="41" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="2"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="237" height="46">
      <param name="movie" value="fondu%20espace%20forme.swf">
      <param name="quality" value="autolow">
      <embed src="fondu%20espace%20forme.swf" quality="autolow" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="237" height="46"></embed>
      </object></td>
    <td><img name="aguabanfinal1_r4_c4" src="aguabanfinal1_r4_c4.jpg" width="329" height="46" border="0" alt=""></td>
  </tr>
</table>
</div>
<div class="colonneGauche" >
<table width="210" height="430" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
  <tr>
    <td bgcolor="#e0f4fc" valign="top" width="210">
      <div style="padding: 5px 20px 20px; color: rgb(0, 0, 0);" class="ver11">
      <div align="justify">
      <p><span style="color: #FF0000; font-weight: bold;"><font style="">25 Juin 2005</font></span><br>
      <span style="font-size: 12px; color: #FF0000; font-family: Arial, Helvetica, sans-serif; font-weight: bold;"><font style="">Body pump 54 New release </font></span></p>
      <p><span style="font-size: 12px; font-family: Arial, Helvetica, sans-serif;"> Venez nombreux le samedi 25 pour le premier cours du&nbsp;body pump release 54. <span style="font-size: 12px; font-family: Arial, Helvetica, sans-serif;"><a href="#" style="" class="ver11">suite... </a></span></span></p>
      <p><span style="font-size: 12px; font-family: Arial, Helvetica, sans-serif;"> </span> <span style="color: #FF0000; font-weight: bold;"><font style="">25 juin 2005 </font></span><br>
      <span style="font-size: 12px; font-family: Arial, Helvetica, sans-serif;"><span style="color: #FF0000; font-weight: bold;"><font style="">Soirée piscine </font></span><br>
      Après vous être depensé sur les nouveaux body
      attack et body pump venez vous delasser autour d'un buffé froid

      et finir la soirée dans la piscine&nbsp;&nbsp;<a href="#" style="" class="ver11"> suite... </a></span></p>
      </div>
      </div>
    </td>
  </tr>
</table>
</div>
<div class="colonneDroite" >
<table width="570" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="570" height="180" valign="top" bgcolor="#FFFFFF"><p align="center" class="Style4"><strong>Un espace qui vous change et ça change tout. </strong></p> <p align="justify" class="Style4">Forme, santé, détente, beauté... A chacun son bien être. </p> 
      <p align="justify" class="Style4"> Idéal pour se relaxer ou se tonifier, Agua Viva permet à chacun de choisir l'activité qui lui convient.
      <p align="justify" class="Style4">Chasser le stress, retrouver le parfait équilibre, il n'y aura pas de meilleurs moments que ceux que vous avez choisis. Loisirs ou remise en forme, c'est dans tous les cas, ici plus qu'ailleurs quon s'occupera de vous. Toute une équipe de professionnels est mobilisée pour vous faire passer les meilleurs moments. Un cadre naturellement convivial et chaleureux vous attend. </td>
  </tr>
  <tr>
    <td width="570" height="230" valign="top"><img src="1activites.jpg" width="570" height="230" align="top"></td>
  </tr>
</table>
</div>
<div class="pied">
<table width="780" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="780" height="70" valign="top" background="bas1.jpg"><div align="center"><span class="Style3"><br>
      <br>
      <span class="Style3">Zone du Val Luisant 9, Bd. d'Hochstadt 28600 Luisant Tél: 02 37 28 51 50 Fax: 02 37 28 38 10</span></span><span class="Style1">&nbsp;</span></div></td>
  </tr>
  <tr>
    <td height="12" valign="top" bgcolor="#000000"><div align="center"><span class="Style4"> Copyright © 2005 Agua viva. All rights reserved. </span></div></td>
  </tr>
</table>
</div>
</body>
</html>

par ayiore » 22 sept. 2005, 17:57

je vais donc tenter d'être le plus clair possible

alors pour ce qui est de l'adresse de mon site c'est celle que j'ai donné quelques lignes plus haut à savoir: http://ayiore.free.fr/agua/sitephp/

ma css c'est celle du post ci dessus.

et mes problèmes sont les suivant:

1: quand je fais analyser ma css grace au plugin que tu m'as indiqué voilà ce que cela m'indique:

Ligne: 12

Parse error - Unrecognized : <style type="text/css"> <!-- body { width: 780px; position: absolute; text-align: center; margin-top: 10px; margin-bottom: 20px; background-color:white; background-image:url(back_fade.jpg); }

hors ma css ne contient que "}" à cet endroit !?!

2: j'ai l'impression que la partie body de ma css ne fonctionne pas!

Code : Tout sélectionner

body { width: 780px; position: absolute; text-align: center; margin-top: 10px; margin-bottom: 20px; background-color:white; }
en effet j'indique une image de fond à l'aide de l'instruction suivante "background-image:url(back_fade.jpg);" et sous firefox pas d'image sous ie ok

ensuite je souhaiterais que mon site soit centrer alors j'utilise la fonction "position: absolute;" et là non plus pas d'effet la seule chose qui marche c'est quand j'indique dans mes differents modules "margin: 0 auto" par exemple dans la partie menu de ma css.
Avec ie j'utilise la fonction "text-align: center;" dans le body de ma css et ça centre tous mes modules.

Code : Tout sélectionner

.menu { margin: 0 auto; padding: 0; width: 780px; height: 150px; }
3. enfin et ça c'est mon plus gros problème, ma partie centrale de page est constituée de deux parties: news.php et accueil.php dans ma css j'indique pour la partie news

Code : Tout sélectionner

.news { float: left; width: 210px; }
et dans ma partie accueil

Code : Tout sélectionner

.accueil { margin-left: 210px; width: 570px; height: 410px; }
le resultat est que mes deux parties sont l'une sur l'autre alors que j'aimerais qu'elles soient l'une à côté de l'autres

j'espère que j'ai été suffisement explicite et que ça suffira pour m'aider

merci d'avance pour votre aide et votre patience! :wink:

par Cyrano » 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.

par ayiore » 20 sept. 2005, 17:36

help cyrano !

:wink:

par ayiore » 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

par Cyrano » 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.

par ayiore » 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:

par Cyrano » 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.

par ayiore » 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: