gerer tout sur une portion de page
bonjour
je voudrai savoir la technologie utilisée et comme la mettre en pratique :
pour ne plus générer plusieurs pages.
Bref je voudrai savoir comment il faut faire pour que le contenu s'affiche unique dans une portion réservée sur la page ex . comme celle-ci sur le site, ou quand in clique un évènement le contenu s'affiche sur la même pas
je ne sais si je me suis bien expliqué.
merci
Réponses apportées à cette discussion
Salut,
la technique recherchée, c'est ce qu'on appelle un Design Pattern, et en particulier le MVC (Model-View-Controler) qui consiste à séparer les couches, à savoir ce qu'on affiche, les traitements, et l'accès aux données. Cette description est bien entendu très très résumée, ça pourrait occuper un livre complet, mais grosso-modo, c'est le principe.
À la base, on commence par séparer les vues en utilisant des gabarits (templates). Je vais tâcher de faire court parce que si on rentre dans le détail, il faudra une grosse heure de lecture.
Prenons une page simple, le HTML de base ressemblera donc à ceci :
<html>
<head>
<title>Titre de la page</title>
</head>
<body>
<h1>Titre</h1>
<p>Contenu</p>
</body>
</html>
Si on regarde un peu ça, on peut se rendre compte que certains éléments pourraient être remplacés par des variables. Et puis on pourrait découper ça en plusieurs parties parce que dans cette structure, certaines parties seront de toutes façons toujours les mêmes quelle que soit la page, seul le contenu pourra varier. Alors le principe est simple, on va commencer par découper ce squelette en trois parties : l'en-tête, le contenu et le pied-de-page, et on va créer trois gabarits, et dans chacun d'eux, on remplacera le contenu variable par des variables PHP, et on va créer des fichiers qu'on nommera avec une extension « .phtml ». Ça va donc ressembler à ceci :
.1 L'en-tête, entete.phtml :
$entete = <<<CODE_HTML
<html>
<head>
<title>{$title}</title>
</head>
<body>
CODE_HTML;
.2 Le contenu principal, principal.phtml :
$principal = <<<CODE_HTML
<h1>{$titrepage}</h1>
<p>{$contenu}</p>
CODE_HTML;
.3 Le pied-de-page, pied.phtml :
$pieddepage = <<<CODE_HTML
</body>
</html>
CODE_HTML;
On enregistre ces fichiers dans un sous-répertoire qui sera par exemple /gabarits/.
Maintenant, on crée nos pages, et par exemple, on va commencer par la page d'accueil qui sera index.php :
<?php
// -1- On commence par définir le contenu des éléments et on pourra alors inclure les fichiers :
$title = "Page d'accueil";
include('./gabarits/entete.phtml');
$titrepage = "Accueil";
$contenu = "Bienvenue sur ce nouveau site";
include('./gabarits/contenu.phtml');
include('./gabarits/pied.phtml');
// -2- On peut maintenant construire la page HTML complète :
$page = $entete . $principal . $pieddepage;
// -3- On affiche :
echo($page);
Voilà, on peut faire ça pour chaque page et éventuellement définir des paramètres dans l'url, paramètres qui permettront de définir par chaque page quel contenu on va devoir récupérer et afficher sans changer pour autant les fichiers, on aura à définir que des variables et inclure les gabarits appropriés.
salut Cyrano
c'est compliqué, ta technique je comprends encore rien c'est vrai à première vu on utilise moins de fichier. mais je suis entrain de me mettre dessus.
Cependant j'ai une question :
.1 j'ai défini une interface avec html et css et un menu de navigation
je clique sur le menu éducation->page complexe.php dans cette page il ya aussi un menu de navigation différent du précédent le menu qui m’intéresse c'est inscription.
quand je clique sur inscription -> page complexe_incription.php qui a de menu collège géné. , lycée géné. ...
je voudrai que lorsque l'utilisateur clique sur collège géné. qu'uniquement la portion correspondant a cette demande soit exécuté a près traitement (le formulaire s'affiche dans contenuer)
problème faire que la variable $coll_gene puisse être traité comme un poste?
voila le fichier complexe_inscription.php
<?php
<?php
$coll_gene = "collège géné.";
$coll_tech = "collège tech.";
$lycee_gene = "lycée géné.";
$lycee_tech = "lycée tech.";
$lycee_pro = "lycée pro.";
$acceuil ="acceuil";
if($coll_gene){
echo 'je voudrais pouvoir traiter le clique de ';
}
echo '<!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=UTF-8" />
<link rel="stylesheet" href ="http://localhost/ecole/view/css/ecole_css_inscription.css" />
<title>inscription</title>
</head>
<body>
<!-- Nous allons maintenant organiser notre page grâce à des blocs (appelé « div » en html).
Nous aurons 5 blocs : le premier pour le conteneur (cadre du centre), le second pour la bannière,
le troisième pour le menu de navigation, le quatrième pour le contenu (là où sera le texte de notre page)
et le cinquième pour le copyright.-->
<div id="conteneur">
<div id="banniere">
<h1>INSCRIPTION</h1>
</div>
<div id="menubar">
<ul>
<li class="menu_acc"><a href="http://localhost/complexe/index.php">'.$acceuil.'</a></li>
<li class="menu_acc"><a href="http://localhost/complexe/inscription/inscrip_coll_gene.php">'.$coll_gene.'</a></li>
<li class="menu_acc "><a href="#">'.$coll_tech.'</a></li>
<li class="menu_acc"><a href="#">'.$lycee_gene.'</a></li>
<li class="menu_acc"><a href="#">'.$lycee_tech.'</a></li>
<li class="menu_acc"><a href="#">'.$lycee_pro.'</a></li>
</ul>
</div>
<div id="conteneur_gch_grd">
<div id="conteneur_gche">
</div>
<div id="conteneur_gche2">
</div>
</div>
<div id="conteneur_gch_dte">
<div id="conteneur_dte">
</div>
<div id="conteneur_dte2">
</div>
</div>
<div id="contenu">
<!-- voici le bloc du contenu de la page -->
<p>
Bonjour Nouveau collégien(ne)
</p>
</div>
<div id="copyright">
<!-- voici le bloc du copyright -->
<p> copyright missionnaire pour christ- 2020</p>
</div>
</div>
</body>
</html>';
que j'ai inclu dans index.php
// acceuile pour les différente inscription des élèves
include 'complexe_incription.php';
//echo 'je suis bien arrivé';
après avoir cliquer sur collège géné. voici le fichier
<?php
?>
<! DOCTYPE html PUBLIC "-//W3C//DTD WHMTL 1.0 strict//EN" "http ://www.W3.org/TR/xhtml//DTD/xhtml1-framset.dtd">
<html xmlns= "http ://www.w3.org/1999/xhtml" xml:lang="fr" lang ="fr">
<head>
<title>INSCIPTION_PLUS</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- caractère spéciaux -->
<meta name ="keywords" lang ="fr" content = "from, discussion, logiciel, libre, PHP, mysql, xhtml, <meta charset="utf-8" />
<link rel="stylesheet" href ="http://localhost/sup_affiche/css/css_1.css" />
<link rel="icon" type="image/jpg" href="http://localhost/sup_affich/img/favicon.icon.jpg" />
</head>
<body>
<div id="header">
</div>
<h1>Vous êtes prier de remplir les champs ci-dessous pour pouvoir continuer</h1>
<div id="cadre_inscription">
<!--<div class="pour_tab"> -->
<form action ="http://localhost/propre_sup_affiche/web_plus/traitement_log_in.php" method ="post" enctype="multipart/form-data">
<table border ="0" width="auto" height ="auto">
<tr>
<td>
<label >Identifiant </label>
</td>
<td >
<input type="text" id ="zone" name="pseudo_eleve">
</td>
<tr>
<td>
<label >Ton Nom </label>
</td>
<td >
<input type="text" id ="zone" name="tonnom" >
</td>
</tr>
<tr>
<td>
<label >Ton Prénom </label>
</td>
<td ><input type="text" id ="zone" name="tonprenom" >
</td>
</tr>
<tr>
<td>
<label >Ta Classe</label>
</td>
<td>
<select name="taclasse" placeholder="Choisi ta taclasse" >
<option value=" ">-- CHOISIR --</option>
<option value="Sixième">Sixième</option>
<option value="Cinquième">cinquième</option>
<option value="Quatrième">Quatrième</option>
<option value="Troisième">Troisième</option>
<option value="Seconde">Seconde</option>
<option value="Seconde A4 All">Seconde A4 All</option>
<option value="Seconde A4 ESp">Seconde A4 ESp</option>
<option value="Première">Première</option>
<option value="Terminale">Terminale</option>
</select>
</td>
</tr>
<tr>
<td>
<label >Date de naissance </label>
</td>
<td>
<input type="text" id ="zone" name="date_naiss" >
</td>
</tr>
<tr>
<td>
<label >Lieu de naissance </label>
</td>
<td>
<input type="text" id ="zone" name="lieu_naiss" />
</td>
</tr>
</tr>
<tr>
<td>
<label for="zone">Mot de passe </label>
</td>
<td>
<input type="password" id ="zone" name="mdp" >
</td>
</tr>
<tr>
<td>
<label for="zone">Retaper le Mot de passe </label>
</td>
<td>
<input type="password" id ="zone" name="mdp_conf" >
</td>
</tr>
<tr>
<td>
<label for="zone">Ta Photo </label>
</td>
<td>
<input type="text" id ="zone" name="taphoto" >
</td>
</tr>
<tr>
<td><input type="hidden" id ="zone1" name="acces" ></td>
<td><input type="submit" value ="Valider" id ="zone1" name="acces" ></td>
</tr>
</table>
</form>
<!--</div> -->
</div>
<div id="footer">
juste voir si il apparaît!
</div>
</body>
</html>
mon css ecole_css_inscription.css
body{
position: relative;
top: 0px;
height: auto;
background-color: #723f15;
width: 100%;
}
#conteneur{
width: 1000px;
min-height: 1000px;
height: auto;
margin: auto;
border: 1px white solid;
//background-color: #b18e59;
-moz-box-shadow: 6px 6px 12px #888;
-webkit-box-shadow: 6px 6px 12px #888;
box-shadow:6px 6px 12px #888;
border-radius:6px; -moz-border-radius:6px;
}
#conteneur_gch_grd{
position: absolute;
top: 210px;
left: 131px;
width: 219px;
height: 650px;
border: 3px white solid;
// background-color: graytext;
-moz-box-shadow: 6px 6px 12px #888;
-webkit-box-shadow: 6px 6px 12px #888;
box-shadow:6px 6px 12px #888;
border-radius:6px; -moz-border-radius:6px;
}
#conteneur_gch_dte{
position: absolute;
top: 210px;
width: 219px;
height: 650px;
border: 3px white solid;
//background-color: graytext;
//left: 800px;
right: 130px;
-moz-box-shadow: 6px 6px 12px #888;
-webkit-box-shadow: 6px 6px 12px #888;
box-shadow:6px 6px 12px #888;
border-radius:6px; -moz-border-radius:6px;
}
/*
#conteneur_gche {
position:absolute;
top: 2px;
width: 218px;
height: 300px;
border: 1px white solid;
//background-color: #b18e59;
-moz-box-shadow: 6px 6px 12px #888;
-webkit-box-shadow: 6px 6px 12px red;
box-shadow:6px 6px 12px #888;
border-radius:6px; -moz-border-radius:6px;
}
#conteneur_gche2 {
position: absolute;
top: 306px;
width: 218px;
height: 300px;
border: 1px white solid;
//background-color: red;
-moz-box-shadow: 6px 6px 12px #888;
-webkit-box-shadow: 6px 6px 12px red;
box-shadow:6px 6px 12px #888;
border-radius:6px; -moz-border-radius:6px;
}
#conteneur_dte {
position: absolute;
top: 1px;
width: 212px;
height: 300px;
//margin: 810px;
border: 1px white solid;
//background-color: green;
right: 3px;
-moz-box-shadow: 6px 6px 12px #888;
-webkit-box-shadow: 6px 6px 12px #888;
box-shadow:6px 6px 12px #888;
border-radius:6px; -moz-border-radius:6px;
}
#conteneur_dte2 {
position: absolute;
top: 306px;
width: 212px;
height: 300px;
min-height: 300px;
right: 3px;
border: 1px white solid;
//background-color: goldenrod;
-moz-box-shadow: 6px 6px 12px #888;
-webkit-box-shadow: 6px 6px 12px #888;
box-shadow:6px 6px 12px #888;
border-radius:6px; -moz-border-radius:6px;
}
*/
#banniere{
height: 150px;
width: 1000px;
background-image:url(images_interfacegraph/banniere.jpg);
background-position: center;
border: 1px white solid;
background-color: red;
-moz-box-shadow: 6px 6px 12px #888;
-webkit-box-shadow: 6px 6px 12px #888;
box-shadow:6px 6px 12px #888;
border-radius:6px; -moz-border-radius:6px;
}
#menubar{
position: absolute;
top: 155px;
width: 900px;
height: 50px;
// border: 1px white solid;
//background-color: green;
text-decoration: none;
text-align: center;
margin-left:50px;
}
.menu_acc{
height: 30px;
width: 876px;
text-align:center;
z-index:3;
moz-opacity:0.8;
opacity:0.8;
MozOpacity:0.8;
KhtmlOpacity: 0.8;
filter:alpha(opacity=80);
padding-left:32px;
display:inline;
text-align: ceter;
}
#menubar a{
font-family:Georgia, "Times New Roman", Times, serif;
font-variant:small-caps;
color: #330000;
font-size:12px;
text-decoration:none;
}
#menu a:hover{
text-decoration: underline;
color:#CC0033;
}
#contenu{
position: absolute;
top: 210px;
width: 550px;
min-height: 528px;
height: auto;
left:355px;
margin-top: -0px;
padding-top: 20px;
border: 1px white solid;
background-color: blue;
-moz-box-shadow: 6px 6px 12px #888;
-webkit-box-shadow: 6px 6px 12px #888;
box-shadow:6px 6px 12px #888;
border-radius:6px; -moz-border-radius:6px;
}
#contenu p{
padding-left: 20px;
padding-right: 20px;
text-align:justify;
color: #666666;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:16px;
}
#copyright{
position: absolute;
//top: 900px;
bottom: 50px;
left: 500px;
height: 40px;
width: auto;
padding-top: 20px;
// border: 1px white solid;
//background-color: blue;
}
#copyright p{
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color:#333333;
}
/*spécial h1 1 Le titre de cette page est réalisé avec display:block alors
que les démonstrations suivantes utilisent le mode inline, sauf l'effet 3D qui requiert que
l'on contrôle précisement la largeur et la hauteur du fond.*/
h1
{
font-size: 32px;
text-shadow: -1px -1px #0c0, 1px 1px #060, -3px 0 4px #000;
font-family:Arial, Helvetica, sans-serif;
color: #090;
padding:16px;
font-weight:lighter;
-moz-box-shadow: 2px 2px 6px #888;
-webkit-box-shadow: 2px 2px 6px #888;
box-shadow:2px 2px 6px #888;
text-align:center;
display:block;
margin:16px;
background-image:url(images/background-h1-wood.jpg);
}
/*spéciale h1 2*/
h
{
font-size: 32px;
line-height: 150px;
text-shadow: -1px -1px #fb6, 1px 1px #d60, -3px 0 4px #000;
font-family:"Segoe print", Arial, Helvetica, sans-serif;
color: #FF9933;
padding:32px;
font-weight:lighter;
-moz-box-shadow: 2px 2px 6px #888;
-webkit-box-shadow: 2px 2px 6px #888;
box-shadow:2px 2px 6px #888;
text-align:center;
display:inline;
}
/*spécil 3 Titre en caractères moyens
Le fond se réduit en fonction de la taille du texte, grâce à la propriété
display:inline. Il faut que l'image choisie pour le fond s'y prête.*/
h
{
font-size: 24px;
text-shadow: -1px -1px #eee, 1px 1px #888, -3px 0 4px #000;
font-family:"Segoe print", Arial, Helvetica, sans-serif;
color:#ccc;
padding:16px;
font-weight:lighter;
-moz-box-shadow: 2px 2px 6px #888;
-webkit-box-shadow: 2px 2px 6px #888;
box-shadow:2px 2px 6px #888;
text-align:center;
display:inline;
line-height:92px;
background-image:url(images/background-h1-metal.jpg);
}
/* effet 3dLa hauteur et la largeur du conteneur, la balise H1 sont ici fixes. L'image
de fond à en fait une marge blanche à gauche et à droite, pour permettre un
titre plus large que l'image, mais c'est un choix qui dépend de l'image présente,
elle aurait pu être plus large.*/
h{
font-size: 48px;
text-shadow: -1px -1px #f00, 1px 1px #a00, -3px 0 4px #000;
font-family:"Segoe print", Arial, Helvetica, sans-serif;
color: #dd0000;
padding:64px 0 0 0;
margin:16px auto;
font-weight:lighter;
-moz-box-shadow:none;
-webkit-box-shadow: none;
box-shadow:none;
text-align:center;
display:block;
min-height:172px;
min-width:800;
max-height:172px;
max-width:800px;
background-image:url(images/background-h1-tesla.jpg);
}
merci j'espère que j'ai pu dire ce que je voudrai
Salut,
je ne vois pas trop ce que tu trouves compliqué, c'est pourtant assez simple.
Il n'y a pas moins de fichier, il y en aurait même plutôt davantage, mais plus petits parce que traitant chacun une portion de la page à construire.
Tu dis une autre chose curieuse : je voudrai que lorsque l'utilisateur clique sur collège géné. qu'uniquement la portion correspondant a cette demande soit exécuté
Lorsque tu cliques sur un lien, ça va charger une page complète, donc de toutes façons tout le processus sera exécuté. Il faut bien distinguer ce qui se passe coté serveur de ce qui se passe au niveau du navigateur. Si tu cliques sur un lien, tu es au niveau du navigateur, et donc ça va envoyer une requête HTTP vers le serveur qui va retourner une page complète. On pourrait ne traiter qu'une partie et ne mettre à jour qu'une portion de la page, mais il faudrait alors introduire du JavaScript et un appel AJAX : à ce stade, ça me semble être une très mauvaise idée et tu vas t'enliser complètement.
Dis-moi plutôt qu'est-ce que tu trouves compliqué dans les explications que j'ai donné précédemment ?
salut Cyrano
je viens d'appliquer à la lettre les information que tu m'as donné sur le découpage, c'est vraiment facile. t'avais raison mes inquiétude ont été élucidé.
- pb:
mais lorsqu'on veut personnalisé par exemple le contenu (un formualire, d'inscription ou faire lire les articles) en fonction de ce que l'on voudrait montrer a l'utilisateur, on devra faire plusieurs variable corps? - voila un autre problème : avant je voudrai savoir l'avantage de travailler avec .phtml?
- un troisieme pb : j'ai défini une variable $entete qui contient l'entete html, head y compris $corps qui contient le corps et tout les blocs possible $pied
je les ai inclu en faisant un echo net comme sur ton exemple sa marche, mais dans le cor j'ai affiché un formulaire, les donnée poster enregistrées dans la bdd je voudrai les récupéré mon pb c'est pas la requête mais comment intégré ou placer le code php dans la variable corps?
Merci pour t'on appui.
Ok, alors pour l'instant, on va juste s'occuper de la partie principale. L'url va toujours passer par index.php. Mais selon qu'on aura ou non un paramètre supplémentaire, on affichera un contenu adapté.
Là, on a vu l'affichage d'une page de base sans paramètre. Le contenu peut avoir ce qui est attendu dans la page d'accueil. Mais supposons par exemple que tu veuilles accéder à un formulaire d'inscription : dans le menu de navigation, tu auras quelque part un lien « Inscription » et l'URL qui sera derrière sera inscription.php.
À la base, inscription.php se trouvera au même endroit que index.php et aura une structure de base similaire : on définit le stade du traitement et on inclut les fichiers nécessaires, à savoir l'en-tête, le principal et le pied. Mais le principal sera un gabarit spécifique qui sera par exemple inscription.phtml. Mais il te faudra dans le cas d'une page avec un formulaire plusieurs gabarits : le contenu global et des sous-gabarits, un pour le formulaire, un autre pour le résultat.
Je ne te mettrai pas tout le code pour l'instant, réfléchis à ça pour tâcher de structurer, fais quelques essais basiques sans me mettre 400 lignes de code par fichier et montre-moi ça, on va avancer pus efficacement si tu comprends et découvres de toi-même les principes.
Pour l'extension « .phtml », c'est purement conventionnel, ça t'indique qu'il s'agit d'un fichier PHP contenant du HTML, donc un gabarit, ça simplifie le classement des fichiers. Le rôle est purement pratique.
Un point important cependant, c'est l'architecture de ton application et l'organisation de tes répertoires. Je te suggère quelque chose comme ceci :
/
|- gabarits/
| |- entete.phtml
| |- principal.phtml
| |- pied.phtml
| |- form_inscription.phtml
| |- resultat_inscription.phtml
|- styles/
|- javascripts/
|- images/
|- index.php
|- inscription.php
Note au passage que lorsque tu nommes un fichier ou un répertoire, il est important de leur donner un nom qui signifie quelque chose à la première lecture. Aujourd'hui, tu maitrises bien ton environnement parce que tu es en plein dedans, mais dans six mois, te souviendras-tu bien de tous les détails ? Pas sûr du tout, alors sois très discipliné là-dessus.
Bonjour Cyrano désolé pour le silence ...
je pensais a un truc concret par exemple un forum
voila mon environnement de travail :
|-forum
|-in_cludes
-menu.php(la portion de code qui correspond au menu et à la banière)
-corps.php (contient le contenu du corps)
-pied.php (pour le footer)
// j'ai préféré remettre l'entête html
| |- pages
| |-inscription_forum.php
| |- authentification.php
| |- ... toutes les autres pages qui vont s'ajouter.
|-images
|- styles_css
|- javascripts
| -index.php
la page index.pho s'affiche mais j'arrive pas comprendre j'ai l'impression que je dois refaire le css ou l'adapté.
du moins voila mon code du fichier index.php :
<?php
//include 'in_cludes/acceuil_forum.php'; <?php include 'in_cludes/entete.php'; ?>
?>
<!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=UTF-8" />
<link rel="stylesheet" href ="http://localhost/forum/pages/style_css/ecole_css_inscription.css" />
<link rel="stylesheet" href ="http://localhost/forum/pages/style_css/css_1_forum.css" />
<link rel="stylesheet" href ="http://localhost/tuto_fonction/css/css_1_fonc_2.css" />
<title>FORUM</title>
</head>
<body>
<div id="conteneur">
<?php include 'in_cludes/menu.php';
echo ''.$baniere_menu.'';?>
<?php include 'in_cludes/corps.php';
echo ''.$corps.'';?>
</div>
<?php include 'in_cludes/pied.php';
echo ''.$pied.'';
?>
</body>
</html>
je me suis dis que comme cela je pourrais facilement agir avec le php et le html sans pb.
Il y a un truc qui ne semble pas clair dans ton esprit, c'est la distinction entre le coté serveur et le coté client.
Pour bien discerner les deux, il faut comprendre ce qui se passe et où ça se passe. Là par exemple, tu évoques le CSS. Mais le CSS, ça se passe coté client. Pour qu'il fasse s'afficher ce que tu veux, il faut que tu saches quel code HTML est reçu par le navigateur. Le navigateur EST le client, il n’interprète que le HTML, le JS et les CSS. Si tu as un problème de CSS, c'est que le HTML reçu ne correspond pas à ce que tu avais prévu.
Là, il faut alors se tourner vers le coté serveur pour vérifier ce qui est effectué et qu'est-ce qui est retourné, et dans quel ordre. Or ce que je t'ai montré dans l'exemple avec le découpage devrait justement simplifier ça. Le fichier PHP qui est exécuté suite à la requête HTTP, ou, formulé autrement, la page demandée, doit exécuter un certain nombre de commandes pour collecter les bouts de HTML et assembler le tout dans le bon ordre pour construire la page complète qui sera retournée au client.
Là, tu me montre un code de page PHP, mais ça donne quoi coté client ?% Affiche ta page, fais un [Ctrl]+[U] pour faire afficher la source, et montre moi un copié collé de la source en question, tu risques d'avoir des surprises et au passage de comprendre pourquoi tu as des problèmes de CSS.
