Ancres dans les messages

par Ea Lun 12 Sep 2011 - 18:53

Une ancre est la partie #ancre qu'il y a dans la barre d'adresse et pour laquelle si il y a bien un élément ancre du nom mis après le # sur la page, le navigateur nous mettra à la hauteur de cet élément. Pour une explication détaillée du fonctionnement des ancres, vous pouvez vous référer à cet article.

En guise d'exemple, voici un index avec des ancres dans ce tutoriel :

Sommaire :

Comment ajouter une ancre soi-même ?

Explications

Pour les détails vous avez le lien précédent, mais en résumé donc il y a moyen de la faire de deux façons :

Mettre un id="nom-de-ancre" à n'importe quelle balise : cela permet, par la même occasion, de mettre du CSS pour la balise, mais cette méthode n'est pas reconnue par certains anciens navigateurs ;
Mettre un name="nom-de-ancre" à une balise <a> : cela permet de mettre plus de caractère spéciaux dans nom-de-ancre.

Pour ce qui est de ce qu'on peut mettre comme nom-de-ancre, il faut pour bien faire que ça commence par une lettre (de a à z ou de A à Z) puis ça peut être suivi par n'importe quel nombre de lettre (encore de a à z et de A à Z (les lettres accentuées ne sont pas conseillées)), chiffres (0 à 9) ou des caractères -_: et .

Exemple : Cas où le HTML est activé

Si le HTML est activé sur les messages de votre forum [Voir le tutoriel] ou dans un espace où le HTML est autorisé (par exemple, lors de la création d'une page HTML [Voir le tutoriel] ou dans un widget [Voir le tutoriel]), vous pouvez rédiger vos ancres selon les différentes possibilités suivantes :

Code:: <a name="lettre-a"></a>
Albert
Alphonse

<div id="lettre-b"></div>
Babar
Boris

<span id="lettre-l"></span>
Laurent
Lazarre
Louis

Ainsi, vous avons bien trois ancres : lettre-a, lettre-b et lettre-l.

Exemple : Cas où le HTML est désactivé

Pour le cas du HTML désactivé, il n'est pas possible de mettre un "équivalent" d'un <a name="nom-de-ancre">. Toutefois, on peut mettre un id="nom-de-ancre" grâce à l'utilisation de la balise BBcode d'un tableau :

Code:: [table id="lettre-a"][/table]
Albert
Alphonse

[table id="lettre-b"][/table]
Babar
Boris

[table id="lettre-l"][/table]
Laurent
Lazarre
Louis

Ainsi, vous avons bien trois ancres : lettre-a, lettre-b et lettre-l.

Quels sont les ancres qui existent de base sur Forumactif ?

Il y en a un bon nombre, vous pouvez très bien regarder la source de cette page (clic-droit sur une page puis "afficher la source") et rechercher dedans les name="" d'une balise <a> ainsi que les id="" de toutes les balises. En voici quelques-unes qui peuvent être utiles :

#page-body : qui est à la hauteur du "contenu" de la page, c'est à dire en dessous de la bannière et de la barre de navigation, cela peut-être utile pour arriver directement à hauteur du haut d'un sujet par exemple (surtout si vous avez une bannière de deux écrans de haut) ;
#top : le haut de la page ;
#bottom : le bas de la page ;
#chiffre : sur les pages de sujet, pour chaque message il y a une ancre qui est en fait le chiffre qui identifie le message (on le voit dans la barre d'adresse en éditant le message par exemple), cette ancre dans le système "existant" de Forumactif permet par exemple d'arriver au dernier message d'un sujet (ou même au dernier message non-lu si le sujet est en non lu) et également de retomber à la hauteur du message que vous auriez édité ou posté après l'avoir fait.

Toutes les ancres d'une page (celles qui y sont à la base ou celles qu'on a ajouté) sont utilisables dans nos liens (voir la partie suivante pour comment les utiliser).

Comment faire un lien vers une ancre ?

Il suffit de faire un lien vers la page où se trouve l'ancre et d'y ajouter #nom-de-ancre, par exemple pour le sujet :

Code:: https://forum.forumactif.com/t403562-systeme-de-j-aime-et-je-n-aime-pas#3366492

On a mis une ancre #phpbb2 (grâce à un tableau) et donc en allant sur le lien :

Code:: https://forum.forumactif.com/t403562-systeme-de-j-aime-et-je-n-aime-pas#phpbb2

On arrive au niveau de l'ancre #phpbb2.

Avec le HTML activé, vous pouvez utiliser un lien relatif, ce qui vous permettra que le lien reste bon même si l'adresse du forum change, pour ce faire vous pouvez donc mettre un lien comme ceci :

Code:: <a href="/t403562-#phpbb2">Personnaliser le système J'aime en version PhpBB2</a>

Commencer l'adresse par un / permet simplement de faire un lien "interne" à votre forum. A la place du / cela revient à la même chose que de mettre https://monforum.forumactif.com/ à part qu'en cas de changement d'adresse, vous n'aurez aucun problème de mauvais lien.

Ancres dans les messages

Vous et Forumactif...

Trucs et astuces