Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Faire une zone scrollable dynamique grâce aux CSS

Compatible CSS. Cliquer pour en savoir plus sur les compatibilités.Compatible PHP. Cliquer pour en savoir plus sur les compatibilités.Par SIBELIUS, le 04 janvier 2007

Partie 1 : construction

Les cadres (frames et iframes) sont fréquemment utilisés pour faire une mise en page avec des parties fixes. Cependant, cette technique, heureusement peu voire non utilisée par les sites professionnels tout-publics présente de nombreux désavantages, notamment pour le référencement, la mise en favoris, l'impression de page, mais aussi et surtout sa non-Accessibilité aux personnes handicapées (voir les fiches techniques de acces-pour-tous.net)… Par exemple, le principal avantage que l'on donne aux frames est celui d'accélérer l'affichage alors qu'il n'en est rien car les pages sont, quoi qu'il arrive, mises en mémoire cache de l'ordinateur.

Introduction :

Nous allons donc nous y prendre différemment, sans avoir de recours à des Frames, mais en utilisant une propriété très utile des balises div*, le overflow: auto. (Voir le résultat ici)

Comme on peut le voir sur la page de résultat, seule la partie centrale de contenu est fluide et scrolle verticalement. Tout le reste du design reste fixe.

En pratique, cette page est découpée en 4 parties : la partie haute, fixe, qui contient le titre du sitela partie gauche, fixe, qui contient le menu (une simple image dans notre exemple)la partie de contenu, scrollable verticalement selon la taillela partie basse, fixe, qui peut contenir les références, les droits d'auteurs et les coordonnées

La partie CSS :

Voici le code CSS, que l'on placera soit dans la partie HEAD du document, soit en fichier externe (Note : /* ces textes sont des commentaires explicatifs, ils peuvent être supprimés*/) :

<style type="text/css">
<!--
body {
margin: 0;
font-family: verdana, arial, sans-serif;
}
.haut {
width: auto;
height: 126px;
background-color: #06C;
color: #fff;
font-size: 36px;
padding: 10px;
}
.gauche {
float: left;
width: 180px;
height: 338px;
background-image: url(gauche.gif);
}
.frame {
margin-left: 200px; /* on place ce bloc ?roite du bloc menu de 180px de large */
width: auto;
height: 338px;
overflow: auto; /* cette propri? va permettre le scroll de ce bloc */
font-size: 14px;
}
.bas {
width: auto;
height: 30px;
background-color: #06C;
color: #fff;
font-size: 12px;
padding: 10px;
}
-->
</style>

La partie HTML :

La structure générale (le code HTML que vous placerez au sein de vos balises <body>), est celle-ci :

<div class="haut">mon site .com</div>
<div class="gauche"></div>
<div class="frame">
  <h1>une présentation sans Frames !</h1>
  <p>test</p>
  <p>test</p>
...
</div>
<div class="bas">Cette partie basse reste fixe</div>

Il est également possible de rendre ce bloc dynamique, c'est à dire de modifier son contenu pour simuler les jeux de cadres (frame) : votre site restera fixe mais cette partie centrale variera en fonction des choix dans le menu.

:remarque Balise div : Les balises <div> sont des balises neutres servant de conteneurs, de blocs. Ils désignent une boite rectangulaire invisible. Généralement, la balise <div> est assimilée au concept de “calque” (surtout sur les éditeurs html comme Dreamweaver). Un calque est un <div> qui a été positionné avec la propriété “position: absolute” ou “position: relative”. Mais rien ne nous oblige à imposer cette propriété de position, on peut souvent s'en passer en plaçant les div les uns par rapport aux autres grâce à la propriété “margin”.

Partie 2 : dynamisme

A présent, vous avez un site construit sans iframe et pourtant scrollable. Il est également possible de rendre ce bloc dynamique, c'est à dire de modifier son contenu pour simuler les jeux de cadres (frame) : votre site restera fixe mais cette partie centrale variera en fonction des choix dans le menu. (Voir le résultat ici)

Comme on peut le voir sur la page de résultat, seule la partie centrale de contenu est fluide et scrolle verticalement. Tout le reste du design reste fixe. Important : des notions minimales en langage PHP seront nécessaires pour suivre ce tutoriel

L'idée sera d'utiliser la fonction PHP include. Cette fonction permet d'insérer une partie de code dans une autre. En clair, vous pourrez insérer une page dans un endroit précis de votre site, là où se trouve la fonction include.

En pratique, c'est notre bloc central (celui qui scrolle) qui aura la charge d'inclure les autres pages. De cette manière, il n'y aura que cette partie du site qui variera en fonction des choix du visiteur.

Pour cela, nous devrons recharger la page en précisant que la partie centrale doit être changée. Ceci peut être fait un transmettant une variable (la variable sera $_GET['page']). En effet, la variable est passée dans l'url, nous pouvons donc la récupérer à l'aide du table $_GET. Selon la valeur de la variable, le contenu central va inclure une page différente. Par exemple, si la valeur “2” est donnée à la variable $page, cela signifiera (par exemple), que la page “presentation.htm” doit être inclue.

Le code PHP :

Voici le code PHP qui sera placé au sein de notre bloc central (balise div class=“frame”) :

<?
$page = $_GET['page'];
if ($page=='1') {
    include('accueil.htm');
} elseif ($page=='2') {
    include('presentation.htm');
} elseif ($page=='3') {
    include('suite.htm');
} elseif ($page=='4') {
    include('fin.htm');
} else {
    include('accueil.htm');
}
 
?>

Le code est clair : selon la valeur de $_GET['page'], la page inclue sera différente. Par défaut, la page inclue est “accueil.htm”

Pour transmettre la variable $page d'une page à l'autre, il suffit de l'écrire dans le lien du menu, par exemple :

<a href="?page=2">Présentation</a>/p>

Explications :

Ce lien n'indique aucune page web, cela signifie que c'est la même page qui sera rechargée. Il commence par un ”?”, qui annonce qu'une variable va être transmise. Ensuite “page=2” donne la valeur 2 à la variable $_GET['page']. A partir de là, la page sera rechargée en transmettant la valeur 2 à $_GET['page']. Le code PHP situé dans le bloc central interprêtera cette valeur en incluant la page appropriée.

Et voilà : notre site dynamique sans frames ni iframes est en place ! N'oubliez pas de donner l'extension .php à la page qui contient le code, afin qu'il soit interprêté.

Pour plus de détails sur le code PHP et sa mise en place pour les pseudo-frames, voir le tutorial sur les fichiers réutilisables en PHP.

Note sur la fonction include : cette instruction est TRES différente des frames ou iframes : elle ne simule pas l'insertion, mais insère vraiment tout le code de la page… et les liens de la page inclue se calculent alors à partir de la page conteneur. Supposons que la page conteneur se trouve à la racine et que la page insérée se trouve dans le répertoire ”/galerie”. Tant que la page insérée n'est pas inclue, les liens de la sorte : href=“toto.htm” vont rechercher le fichier toto.htm dans le répertoire “galerie”. MAIS, dès que la page est inclue, elle appartient totalement à la page conteneur, il va donc chercher toto.htm … à la racine ! Conclusion : le meilleur moyen de s'en sortir avec les include est d'utiliser des liens absolus dans les pages inclues (href="http://www.monsite.com/repertoire/lien.htm" et NON href=“lien.htm”)

Autre chose importante : l'instruction include insère un fichier directement au sein du code de la page parent. En clair, il ne FAUT PAS que ce code (fichier) inséré ait des balises qui pourraient être redondantes : il suffit de lui supprimer toutes les balises <html>, <head>, <body>… pour ne garder que la partie interne qui sera insérée. Sinon vous allez vous retrouver avec une page contenant deux balises d'en-tete, deux html, deux head, deux body, etc… et un risque sérieux de conflit