Pourquoi pas une iframe?

Une iframe, n'est rien d'autre qu'une frame qui peut être placée n'importe où dans une page. Pour cette raison, elles pose les même problèmes qu'une frame classique.

La théorie

Il faut simplement savoir qu'il est possible de définir la façon dont va se comporter le navigateur avec un bloc lorsque le contenu de celui-ci devient trop grand. On pourra lui demander de cacher le contenu en trop, étendre le bloc conteneur ou encore placer des barres de défilement pour naviguer dans le contenu.

C'est justement cette dernière possibilité qui nous intéresse pour la mise en œuvre de notre copie d'iframe.

Mise en œuvre

Nous allons utiliser pour cela une simple page HTML liée à une feuille CSS externe.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="Content-Type"	content="text/html; charset=UTF-8" />
		<link rel="stylesheet" type="text/css" href="/dotclear/themes/CodeWeb/style.css" media="screen" />
	</head>
	<body>
		<h1>Voyez mon bloc avec des barre de défilement :</h1>
		<div id="scroll">
			<p>Il faut un très grand texte ici pour bien se rendre compte!</p>
		</div>
	</body>
</head>

Penser à placer un texte assez long dans le bloc div si vous souhaitez tester cette exemple.

Sans sa feuille CSS, le code HTML que nous venons de voir affichera le texte en entier en étendant le bloc div. Voici le code CSS à utiliser avec cette page pour obtenir l'effet recherché :

#scroll
{
      /* Il est impératif de fixer les dimensions du bloc */
      width:100px;
      height:100px;
 
      /* overflow (surplus) prend pour valeur auto, ce qui correspond à placer des scrollbar */
      overflow:auto;
}

Il est également possible de ne faire apparaître des barres de défilement que sur la hauteur ou sur la largeur. Dans ce cas, il existe deux solutions, selon vos besoin. Soit vous souhaitez que le bloc conteneur s'étende en largeur ou en hauteur avec son contenu, mais pas dans l'autre sens. Dans ce cas, il ne faudra fixer que la hauteur ou la largeur selon l'effet recherché. Code-web est un exemple de ce genre d'utilisation, comme vous pouvez le voir sur nos blocs d'affichage de codes. Voici le CSS :

#scroll
{
      width:200px;
      overflow:auto;
}

Avec ce code, overflow n'a de sens que pour la largeur du bloc et non pas pour sa hauteur. Ainsi pour un contenu trop haut, le conteneur sera agrandi. En revanche, pour un contenu trop large, une barre de défilement apparaîtra.

Mais vous pouvez également choisir, par exemple, de ne pas afficher le contenu qui dépasse sur la largeur et de placer une barre de défilement sur la hauteur pour le contenu qui dépasse. Vous pourrez utiliser le code suivant :

#scroll
{
      /* Il est impératif de fixer les dimensions du bloc */
      width:100px;
      height:100px;
 
      /* On peut dissocier les overflow selon l'axe */
      overflow-x:hidden; /* Masque le contenu dépassant sur la largeur */
      overflow-y:auto; /* Barres de défilement sur la hauteur */
}

Cette possibilité ne se limite pas au balise div (sur code-web. Elle peut être appliquée à n'importe quel élément de type bloc tant que l'une des dimensions de celui-ci a été fixée. Pour l'appliquer à une élément qui pas de type bloc, il suffit d'utiliser le code suivant :

#monBloc
{
      display:block;
}

Vous pourrez ensuite lui attribuer des dimensions et définir la manière dont le contenu trop volumineux sera affiché (ou masqué bien sur).

Conclusion

Vous n'aurez plus d'excuse pour utiliser les iframes, alors bannissez les une bonne fois pour toutes de vos pages!