Overflow avec fond fixe en <acronym>CSS</acronym>

Overflow avec fond fixe en <acronym>CSS</acronym> 2003-03-21 2003-03-21 Olivier Meunier olivier.meunier@openweb.eu.org Cet article est sous licence Creative Commons Attribution-ShareAlike. Comment créer en CSS un overflow avec une image de fond fixée dans le bloc défilant ? gourou mise_en_page css

Introduction On appelle overflow une méthode consistant à intégrer du texte dans une boite avec ascenseur dans une page Web. L'overflow ressemble beaucoup à ce qu'on appelle iframe avec une différence de taille : l'accessibilité. Un overflow n'étant rien de plus qu'un style CSS appliqué à un bloc, un navigateur qui ne saurait pas gérer ce style affichera quand même le contenu du bloc rendant ainsi votre travail accessible au plus grand nombre. A l'inverse l'utilisation du iframe implique que le navigateur supporte cet élément et repose le problème d'accessibilité des cadres (frame ou iframe). Note : le contenu d'un iframe se trouve dans un fichier à part, comme avec les frame.

Motivations Cet article va se pencher sur le support de l'overflow par MSIE et Gecko (Mozilla, Netscape 7, Chimera, Phoenix, etc), sur les différences entre l'un et l'autre et sur les moyens de les supprimer. Il doit vous permettre de créer un overflow avec une image de fond fixée dans le bloc défilant.

Réalisation

Overflow simple Voici un premier exemple de création d'un overflow très simple. Pensez à insérer du texte assez long dans le bloc. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Page de démonstration</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css">  </style> </head> <body> <div id="bloc1"> texte </div> </body> </html> Comme on peut le constater, la création d'un overflow est très simple, il suffit de spécifier overflow : auto dans le style du bloc où l'on souhaite l'appliquer. Le résultat d'un telle page sera le suivant (n'oubliez pas de mettre du texte) : Overflow simple avec MSIE

Overflow avec image de fond fixe Pour égayer la présentation de la page, nous allons ajouter un fond au bloc et nous allons fixer ce fond pour qu'il ne défile pas. Nous allons également décaler le bloc de 50 pixels vers la gauche et 20 vers le bas. En toute logique, pour fixer le fond, nous allons utiliser la propriété CSS background-attachement: fixed qui va forcer le fond à ne pas se déplacer avec le texte. Pour les besoins de l'exercice vous pouvez utiliser l'image de fond suivante. Image de fond pour l'exercice Voici le code qui permettra de réaliser l'effet escompté : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Page de démonstration</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css">  </style> </head> <body> <div id="bloc1"> texte </div> </body> </html > Avec MSIE, ceci est parfait, le fond est fixe, le bloc est bien placé comme on le désirait (20 pixels à gauche, 50 pixels à droite) et le texte en blanc. Overflow avec fond fixe, Internet Explorer Les choses se compliquent avec Gecko, jugez vous même : Overflow avec fond fixe, Mozilla Que s'est-il passé ? En réalité c'est très simple, la propriété CSS background-attachment: fixed ne fixe pas l'image par rapport au bloc mais par rapport à la page. Ce comportement n'est pas un bogue de Gecko mais bien un comportement standard. Comme l'énonce clairement le W3C : If a background image is specified, this property specifies whether it is fixed with regard to the viewport ('fixed').... La traduction officielle énonçant : Quand on spécifie une image d'arrière-plan, cette propriété indique si l'image est fixe par rapport à la zone de visualisation (pour la valeur 'fixed')[...]. Une très bonne page (à consulter avec un navigateur utilisant Gecko) montre toute l'étendue de cette fonctionnalité et les usages très intéressants que l'on peut en faire : Complexspiral Redux. Bien ! Voici pour l'explication, mais ceci ne fait pas avancer notre problème. Heureusement une solution existe et nous allons maintenant la voir.

La solution : overflow avec fond fixe, espacement intérieur et décalage Afin de permettre d'envisager tout type de mise en page, nous allons corser le problème. Maintenant nous voulons un bloc décalé de 50 pixels à gauche, 20 pixels en haut, une image de fond fixe et le texte à l'intérieur avec un espacement intérieur de 90 pixels à gauche et 40 pixels en haut. La solution va en fait consister à imbriquer 3 blocs les uns dans les autres. Pour les deux premiers blocs nous spécifions leur largeur. Ensuite, pour le premier on spécifie son positionnement, la couleur du texte et l'image de fond. Pour l'image de fond, on utilisera les propriété CSS background-position: top left et background-repeat: no-repeat afin de fixer le fond en haut à gauche du bloc. Dans le second bloc on réalise l'overflow et spécifie la bordure du bloc (ceci restant facultatif). Enfin, dans le troisième et dernier bloc on peut spécifier l'espacement intérieur du texte et si, on le souhaite, ajouter toute sorte de style qui s'appliqueront au texte. Voici donc le code source du document : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Page de démonstration</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css">  </style> </head> <body> <div id="bloc1"> <div id="bloc2"> <div id="bloc3"> texte </div> </div > </div> </body> </html> Le résultat est conforme à nos attentes, que ce soit avec Internet Explorer : Résultat de l'overflow avec fond fixe, Internet Explorer Ainsi qu'avec Gecko : Résultat de l'overflow avec fond fixe, Mozilla

Conclusion La réalisation d'un overflow avec image de fond fixe n'est finalement pas si compliquée qu'il n'y paraît. Cependant le manque de respect des standards du W3C par certains navigateurs peut entraîner le développeur Web sur une mauvaise piste et apporter son lot de perte de temps et de frustration. C'est pourquoi les développeurs Web doivent, autant qu'ils le peuvent, respecter les standards du W3C. Si les concepteurs de navigateurs font de même, alors il deviendra très simple de réaliser des pages Web sophistiquées et accessibles à tous et ce, sans perdre un temps fou, temps qui pourra être consacré au contenu des pages lui-même.

Ressources les spécifications CSS2 en français ; les spécifications CSS2 en anglais ; complexspiral redux par EricMeyer.