Auteur: antonio
Création: 18 août 2005
Dernière mise à jour: 18 août 2005
Version: 1

Cet article détaille les étapes nécessaires pour placer une vignette dans la colonne de navigation de votre blog, comme le montre la capture d'écran ci-dessous:



Niveau : débutant
Durée : 5 minutes

En route vers l'éditeur CSS

Dans la console de gestion, cliquez sur le module 'Apparence', puis le sous-module 'Editeur CSS'. Saisissez ensuite le code suivant :

#zone1Left { BACKGROUND: transparent url(/ouais/ouais.jpg) no-repeat top center; }

Cette ligne va modifier le comportement de la zone 'zone1Left'. Cette zone est la colonne de navigation située sur la gauche du blog.

L'attribut BACKGROUND accepte 5 informations:

  1. la couleur d'arrière-plan;
  2. l'adresse de l'image placée en arrière-plan;
  3. le mode de répétition;
  4. l'emplacement vertical;
  5. l'emplacement horizontal;

Couleur d'arrière-plan

Comme d'habitude, la couleur peut être spécifiée de deux manières. Par son nom, en anglais: yellow,green, white, black, etc:

#zone1Left { BACKGROUND: green url(/ouais/ouais.jpg) no-repeat top center; }
#zone1Left { BACKGROUND: white url(/ouais/ouais.jpg) no-repeat top center; }
#zone1Left { BACKGROUND: purple url(/ouais/ouais.jpg) no-repeat top center; }

Ou par son trigramme rouge (Red) - vert (Green) - blue (Bleu) :

#zone1Left { BACKGROUND: #AA0000 url(/ouais/ouais.jpg) no-repeat top center; }
#zone1Left { BACKGROUND: #87A876 url(/ouais/ouais.jpg) no-repeat top center; }
#zone1Left { BACKGROUND: #AB11AB url(/ouais/ouais.jpg) no-repeat top center; }

(utilisez un logiciel de traitement d'image si vous souhaitez trouver ces codes, tous les logiciels un peu potables vous l'indiquent lorsque vous choisissez une couleur)

 

L'adresse de l'image

L'adresse, sous forme d'URL, là aussi comme d'habitude l'adresse peut être relative (on indique le chemin par rapport à la page courante) ou absolue (on indique le chemin entier, avec le nom de domaine et tout et tout).

Des exemples:

#zone1Left { BACKGROUND: green url(/uploads/123456789/monimage.jpg) no-repeat top center; }
#zone1Left { BACKGROUND: green url(http://www.monblog.ch/uploads/123456788/monimage.jpg) no-repeat top center; }

Vous pouvez trouver le chemin d'une image que vous avez publiée à partir du module 'Images' en affichant la liste de vos images et en cliquant sur celle qui vous intéresse. Votre navigateur affichera le chemin de l'image dans la barre de recherche.

 

Le mode de répétition

Si vous souhaitez que votre fond se répète horizontalement : repeat-x.

Si vous souhaitez qu'il se répète verticalement: repeat-y.

Et dans les deux directions: repeat.

Les exemples:

#zone1Left { BACKGROUND: green url(/ouais/ouais.jpg) no-repeat top center; }
#zone1Left { BACKGROUND: white url(/ouais/ouais.jpg) repeat-x top center; }
#zone1Left { BACKGROUND: purple url(/ouais/ouais.jpg) repeat top center; }

 

Le positionnement vertical

De haut en bas: top, middle, bottom.

Les exemples:

#zone1Left { BACKGROUND: green url(/ouais/ouais.jpg) no-repeat top center; }
#zone1Left { BACKGROUND: green url(/ouais/ouais.jpg) no-repeat middle center;

 

Le positionnement horizontal

De gauche à droite: left, center, right

Les exemples:

#zone1Left { BACKGROUND: green url(/ouais/ouais.jpg) no-repeat top left; }
#zone1Left { BACKGROUND: green url(/ouais/ouais.jpg) no-repeat top center; }
#zone1Left { BACKGROUND: green url(/ouais/ouais.jpg) no-repeat top right; }

 

Un exemple concret

Pour obtenir le résultat de la capture d'écran: l'on souhaite placer l'image "avatar_content.jpg", le fond doit être transparent, l'image doit être centré horizontalement et positionnée tout en haut.

Le fond d'écran ici étant un vignette, il faut aussi penser à éloigner le texte des derniers commentaires du haut. Elle mesure 250 pixels. Nous allons donc ajouter une règle spécifiant que le contenu doit être éloigné de ce haut de la colonne. La propriété 'PADDING-TOP' (espacement à partir du haut) nous offre cette possibilité.

Au final , nous avons donc:  

#zone1Left {BACKGROUND: transparent url('/uploads/200503091442226/avatar_content.jpg') no-repeat top center;   PADDING-TOP: 250px;}

Ce qui nous donne l'apparence de ce blog :

Fin du tutoriel ! Toujours en vie ? ; )