Fiche N°3 - Mettre un bandeau en haut des pages

par manu

Objectif : Mettre un bandeau en haut de vos pages

Créer un bandeau en dégradés et l’envoyer sur le site

  • En utilisant le gimp ou tout autre programme de traitement d’images, créez une image de 1 pixel de large sur 90 pixels de haut. Vous pouvez par exemple créer un dégradé.
  • Sauvegardez cette image dans le répertoire squelettes/css/img en l’intitulant "bandeau.png". [1]
  • Dans le fichier perso.css nous allons définir la taille du div de classe header [2] et lui donner bandeau.png pour fond :
    1. .header {
    2. height: 90px;
    3. margin: 0;
    4. background : url('img/bandeau.png') repeat-x;
    5. }

Remplacer le bandeau précédent par une couleur unie

  • Il nous suffit de modifier la ligne background du div bandeau :
    1. .header {
    2. height: 90px;
    3. margin: 0;
    4. background : #NNNNNN;
    5. }

Remplacer le bandeau précédent par une photo

  • Faire un bandeau avec le GIMP, dimension (donnée ici à titre indicatif) : 900x90 px
  • Sauvegarder le fichier en jpg, toujours dans le répertoire squelettes/css/img, en lui donnant comme nom de fichier : bandeau-photo.jpg [3]
  • Remplacer le code précédent par :
    1. .header {
    2. height: 90px;
    3. margin: 0;
    4. background : url('img/bandeau-photo.jpg');
    5. }

ATTENTION : Cette dernière solution présente l’inconvénient de générer des pages nettement plus lourdes, le temps de chargement risque d’être plus important.

[1Vous pouvez aussi télécharger un fichier bandeau.png

[2Sous zpip header est un id et non une classe, de sorte qu’il vous faudra mettre dans le css #header et non pas .header

[3Vous pouvez aussi télécharger un fichier bandeau-photo.jpg