Flèche haut et bas de page

Ce tutoriel vous apprend à mettre des petits liens sur le côté de la page qui renvoient en haut ou en bas.

- Commencez par créer les images qui vous servirons de liens (je vous conseille de faire deux flèches, c'est assez compréhensible pour les visiteurs)

- Une fois que vous avez vos flèches, mettez le code suivant dans un module simple (de cette façon, il apparaitra sur toutes les pages de votre blog)

<div id="fleche">
   <a href="#header"> 
      <img src="http://img15.hostingpics.net/pics/856927monte.png" />
   </a>
   <a href="#footer">
      <img src="http://img15.hostingpics.net/pics/952333descnd.png" />
   </a>
</div>

Ce code fonctionne. Vous pouvez remplacer les liens par les url de vos image. Le premier correspond à la flèche du haut, et le deuxième à celle du bas.

Le lien #header renvoie vers la bannière, donc le haut de la page
Le lien #footer renvoie vers le pied de page, donc en bas 

Validez votre HTML, et publiez votre menu. Vous devriez maintenant avoir deux flèches dans votre module. Il faut donc les "sortir" de ce module pour les afficher sur un côté de la page.

Passons donc au CSS :

#fleche {position: fixed;
         top: 50%;
         left: 3%;
} 

fleche est le nom du groupe qui contient mes deux images et les liens.

la propriété position: fixed permet de sortir la flèche du module et de la fixer sur la page

top et left permettent de positionner les flèches sur la page. Vous pouvez changer les valeurs en rouge pour changer leur position.
Par exemple :

•Pour center verticalement: top: 50%;
•Pour le mettre tout à gauche: left: 0%;
•Pour le mettre tout à droite: left: 100%

Note: Vous pouvez également utiliser des valeurs en px ou em