Une frise sur votre site Web
Nous allons utiliser le motif créé précédemment pour ajouter une frise fixe en bas d’une page Web (et par osmose, d’un site Web).
Le principe d’un motif est d’être raccordable, c’est-à-dire, que l’on peut placer côte à côte plusieurs exemplaires de l’image, on ne verra pas les bordures. Le motif de frise conçu la dernière fois est raccordable sur les bords droit et gauche uniquement.
La frise est affichée grâce à la déclaration d’un bloc conteneur (div) dans la feuille de style (CSS, cascading style sheet) et l’insertion de ce bloc directement dans la page HTML.
La feuille de style
La feuille de style est un fichier portant généralement l’extension .css et appelé depuis l’en-tête de la page HTML. Entre les balises <head> et </head> on trouve une ligne ressemblant à ceci :
<link rel="stylesheet" type="text/css" href="style.css">
Si elle n’y figure pas, à vous de la rajouter. Si votre site Web est conçu avec un logiciel de gestion de contenu (CMS, content management system), il en utilise forcément une.
Habiller une page HTML avec une feuille de styles CSS
Voici donc la définition du style d’un bloc div ayant pour identifiant « frise ». La syntaxe #nom définit l’identifiant d’un style destiné à n’être utilisé qu’une seule fois, à l’inverse d’une classe.
div#frise
{
bottom: 0;
left: 0;
width: 100%;
height: 152px;
position: fixed;
background: url("calanque-neige.png") left bottom repeat-x;
z-index: 1000;
}
Détaillons la CSS
La première des choses à faire est de définir la position du bloc accueillant la frise.
On veut qu’il soit placé en bas de la page et sur toute la largeur.
Donc, on commence par le caler dans le coin en bas (bottom: 0) à gauche (left: 0).
Pour qu’il occupe toute la largeur on définit cette dernière comme maximale : width: 100%.
Pour ce qui est de la hauteur, elle doit être égale à la hauteur du motif, ici 152 pixels, ce qui donne : height: 152px.
Réduction d’image
Attention, si vous trouvez que votre motif est trop haut, ne réduisez pas sa taille dans la feuille de style. Réduisez-là dans un logiciel de traitement d’images, adapté à ce genre d’opérations, comme GIMP. Vous ne devez jamais laisser le soin à votre navigateur Web de réduire une image à l’affichage car il ne manquera pas de dégrader ce dernier.
Par défaut, la position que nous avons spécifiée précédemment est relative au bas de la page. Or nous voulons que ce soit par rapport à l’écran et que la frise soit toujours dans la partie basse, quelque soit la longueur de la page et la position de l’ascenseur. D’où la ligne position:fixed.
Une fois le cadre définit nous pouvons en tapisser le fond : c’est l’objet de la propriété background qui prend plusieurs valeurs.
- Le nom du fichier contenant l’image est donné avec la commande
url. Attention, il faut mentionner le chemin vers ce fichier. Ici, on suppose que l’image est dans le même répertoire que la feuille de style. - La position pour caler l’image de fond avec
left bottom, donc, le coin inférieur gauche. - Le mode de répétition. Ici, on ne veut de répétition que sur la largeur, donc, sur l’axe des abscisses, ou encore, sur l’axe X. D’où la valeur
repeat-x.
Positionner un élément en CSS
Notez la présence de notions venant des mathématiques : X pour l’axe des abscisses, Y pour les ordonnées (axe vertical) et même Z pour l’axe de la troisième dimension. C’est la propriété z-index qui force l’affichage de la frise à un plan très élevé (1000) qui sera forcément supérieur à tout autre contenu dans la page.
Mise en place de la frise
Reste maintenant à insérer ce bloc dans votre page Web. Rien de plus simple, il suffit d’ajouter, n’importe où entre les balises <body></body> (soit, dans le corps de la page), la paire de balises suivante (et rien à l’intérieur).
<div id="frise"></div>
Si vous voulez ajouter la frise dans un CMS, cherchez comment ajouter du contenu dans le pied de page par exemple. L’essentiel étant que le div « frise » soit affiché pour que la frise le soit.
Notre frise, mise en place
Cet article a été publié dans Linux Pratique Essentiel n°23 sous les termes de la licence CC BY-NC-ND.
Voir aussi comment créer le motif de frise avec GIMP et comment insérer une frise dans un document papier avec Scribus.