Ancres dans les messages

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Astuce Ancres dans les messages

Message par Ea le Lun 12 Sep 2011 - 18:53

Ancres dans les messages


Objet de l'astuce :

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 ( voilà plus d'informations sur les liens et ancres ici ).

Pour faire un exemple, voici un index avec des ancres dans cette page :

Index :



Comment ajouter une ancre soi-même ? (index)

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 très 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 .

Exemples :

  • En ayant le html activé ( voir ceci ), cela fonctionnera :

    Code:
    <a name="lettre-a"></a>
    albert
    alphonse

    <div id="lettre-b"></div>babar
    boris

    <span id="lettre-l">laurent
    lazarre
    louis</span>

  • On aura bien 3 ancres lettre-a, lettre-b et lettre-l.

  • Pour le cas du html désactivé il n'est pas possible de mettre un "équivalent" d'un <a name="nom-de-ancre"> par contre on peut mettre un id="nom-de-ancre" grâce à l'utilisation de la balise bbcode de tableau :

    Code:
    [table id="lettre-a"][/table]
    albert
    alphonse

    [table id="lettre-b"][/table]babar
    boris

    [table id="lettre-l"][/table]laurent
    lazarre
    louis

  • Nous donnera également 3 ancres lettre-a, lettre-b et lettre-l.


Quels sont les ancres qui existent de base sur forumactif ? (index)

Il y en a un bon nombre, vous pouvez très bien regarder la source ( 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 2 écrans de haut  Mr. Green  Wink.

  • #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 Smile).

Comment faire un lien vers une ancre ? (index)

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:
http://forum.forumactif.com/t308422-nouveaute-forumactif-gestion-des-codes-javascript

On a mis une ancre #edit-temp ( grâce à un tableau  Wink et donc en allant sur le lien :

Code:
http://forum.forumactif.com/t308422-nouveaute-forumactif-gestion-des-codes-javascript#edit-temp

On arrive au niveau de l'ancre #edit-temp.

Il y a également trois trucs intéressants à connaitre :

  • 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="/t308422-nouveaute-forumactif-gestion-des-codes-javascript#edit-temp">lien vers le message pour les templates</a>

  • Commencer l'adresse par un / permet simplement de faire un lien "interne" à votre forum, à la place du / ça aurait été pareille d'avoir mis http://monforum.forumactif.com/ à part qu'en cas de changement d'adresse, vous n'aurez aucun problème de mauvais lien.

  • Si vous êtes indécis sur le nombre de message par page vous pourriez très bien avoir une ancre #index-lettre-u et que suivant le moment ça se retrouve sur la page 3 ou sur la page 4, dans ce cas il y a moyen d'utiliser un raccourci vers la bonne page en fonction du numéro du message, il suffit de mettre :

    Code:
    [url=http://forum.forumactif.com/viewtopic.forum?p=2695094#edit-temp]lien vers le message pour les templates[/url]

  • Le 2695094 est le numéro du message ( qu'on peut par exemple avoir dans l'adresse en éditant le message ) et avec un lien de cette forme on sera redirigé sur la bonne page du bon sujet ( en gardant l'ancre #edit-temp ).

    Si le html est activé on peut évidemment le combiner à la première astuce pour avoir un lien :

    Code:
    <a href="/viewtopic.forum?p=2695094#edit-temp>lien vers le message pour les templates</a>

  • Pour finir, si on est certain que l'ancre est sur la même page que le message et que le html est activé, on peut simplement faire :

    Code:
    <a href="#nom-de-l'ancre">lien vers ancre</a>

  • Et on sera directement emmené sur l'ancre qui se trouve sur la page qu'on consulte ( ou rien ne se passera si l'ancre n'est pas sur la page ).

Ea
Aidactif
Aidactif

Messages : 23427
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum