Bonjour bonjour !

Dans ce tutoriel, vous allez apprendre à créer un ascenseur pour naviguer sur le forum ; si vous ne voyez pas ce que c'est, regardez le truc en bas à droite de votre écran sur CSSActif.
(ou en haut à gauche ^^)

I - Explications

Alors, tout d'abord, comment ça marche ?
En réalité, c'est très simple, ce sont de simples ancres.
Mais qu'est-ce qu'une ancre ?
Non, ce ne sont pas les ancres de bateau (bien que ça aurait pu ). Ce sont des liens qui permettent d'aller à un endroit précis de la page. En ce qui nous concerne, on va installer ces ancres pour aller en haut et en bas de la page. Mais en fait, on a de la chance car les forums ForumActif ont déjà posé des ancres pour aller en haut et en bas de la page ; il ne nous reste qu'à créer des liens pour y aller donc. Eh bien, c'est partie mon kiki !

II - Création

Nous devons donc créer des liens pour aller aux ancres. Oui mais comment on fait ça ???
Une fois de plus, c'est très simple.

Il suffit de créer un lien, comme ceci (exemple) :

Code:

<a href="">Voici un lien</a>

Sauf que là, à la place de placer l'adresse d'un site, on va mettre le nom de l'ancre. Car oui, les ancres ont des noms pour les reconnaître. Et à chaque fois on doit mettre un # pour dire que c'est une ancre et non un lien. Donc pour aller en haut, il faut mettre "#top", et pour aller en bas, il faut mettre "#bottom". C'est simple comme bonjour, non ?
Tenez, un exemple :

Cliquez pour retourner en haut !
Cliquez pour aller en bas !

Code:

<a href="#top">Cliquez pour retourner en haut !</a>
<a href="#bottom">Cliquez pour aller en bas !</a>

Donc c'est bon, je pense que vous avez tous compris

III - Mise en place

Ben oui, maintenant qu'on a les liens, il faut bien les mettre quelque part, non ?
Et c'est ici que ça se complique un peu, car vous aurez besoin d'un petit peu de connaissance en codage HTML/CSS. Voici un code pour placer l'ascenseur en haut à gauche :

Partie HTML :

Code:

<div class="ascenseur">
<a href="#top"><img src="http://www.fastuces.toile-libre.org/fleche_haut.png" /></a>


<a href="#bottom"><img src="http://www.fastuces.toile-libre.org/fleche_bas.png" /></a>
</div>

Ajout de Hαrιcoow :

Pour ceux qui ont accès aux templates, le code est à placer dans le overall_footer juste avant ‹/body›.

Pour ceux qui n'ont pas accès aux templates, le code est à placer dans une Annonce quelconque (PA » Général » Messages et Emails » Annonces).

Partie CSS :

Code:

.ascenseur {
position: fixed; /*--- Cette ligne permet de toujours afficher l'ascenseur à l'écran ---*/
top: 50px; /*--- On le place à 50 px du haut de l'écran ---*/
left: 0px; /*--- On le place à 0px de la gauche de l'écran ---*/
background-color: #e7dfcf; /*--- On donne une couleur au fond ---*/
-moz-border-radius: 0px 35px 35px 0px; /*--- On arrondit les bords ---*/
-webkit-border-radius: 0px 35px 35px 0px;
border-radius: 0px 35px 35px 0px;
}

Et si vous regardez en haut à gauche, vous aurez un exemple de ce que ça donne

Bon bah je pense que je vous ai tout dit, bon codage !

Très pratique, merci o/