AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Bloc de navigation rapide (haut, bas et ancres)

    Okhmhaka
    Okhmhaka
    FémininAge : 34Messages : 31851

    le Lun 25 Juin 2012 - 17:08

    Rappel du premier message :



    Navigation flottante

    Ancres & Liens


    Bonjour !

    Voici un tutoriel sur les bloc de navigation comme vous trouvez parfois sur la droite ou la gauche des forum en "flottement", permettant d'aller en haut de page, bas de page, mais aussi à divers endroits du forum.
    Tout d'abord, si vous recherchez simplement un tutoriel pour le "haut" et "bas", je vous oriente vers celui-ci qui vous suffira amplement.

    Celui que je vous propose abouti à un résultat que vous pourrez voir sur ce forum test : il s'agit du bloc jaune à gauche, survolé il s'ouvre et vous propose 4 types de liens que je vais détailler dans le tutoriel.

    - les ancres de base (haut et bas)
    - les liens normaux (liens que vous voulez mettre à disposition, il peut s'agir du règlement, du contexte, etc...)
    - les ancres crées (points de repères crées sur le forum)
    - les ancres crées avec changement de page au besoin (c'est un lien + ancre qui fera que même dans une page au fin fond du forum, le lien vous amènera vers la catégorie choisie)

    En cas d'utilisation de ce tutoriel, merci de mettre sur votre forum un CREDIT pour Never-Utopia. Ce geste de remerciement simple nous permet de "vivre" et de pouvoir vous apporter toujours plus d'aide ! Merci d'avance !


    I/ Création du bloc : template + css

    ▬ Tout d'abord allons ajouter notre bloc dans le template overall_header. Repérez cette ligne de code, ligne 195 environ (et si vous n'êtes pas sur phpBB2, repérez simplement la balise body, même si elle ne ressemble pas à cela) :

    Code:
    <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

    En dessous, ajoutez votre code du bloc navigation :
    Code:
        <div id="fast_links">
       
        <div id="fast_links_contenu">
          <a href="#top" class="fast_link">Haut</a>
          <a href="#" class="fast_link">Lien 1</a>
          <a href="#" class="fast_link">Lien 2</a>
          <a href="#ancre1" class="fast_link">Ancre simple</a>
          <a href="http://jesuisunelegende.forumactif.com/#ancre2" class="fast_link">Ancre avec changement de page</a>
          <a href="#bottom" class="fast_link">Bas</a>
          </div>
       
      </div>

    => mon contenu est un exemple des différents liens possibles, à vous de voir lesquels vous gardez ensuite.

    Information : si votre forum comporte déjà des changements sur ce template, notamment une navigation en haut de page, placez ce bloc avant ou après la navigation mais les distances du css seront peut-être à adapter (notamment celle du "margin-top" ou "marge haute").

    N'oubliez pas de valider votre modification.

    ▬ Allez ensuite dans votre feuille css et affichez le css suivant :

    Code:
    /* FAST LINKS */

    #fast_links
    {
      position: fixed;
      z-index: 999;
      width: 300px;
      height: 200px;
      margin-top: -200px;
      margin-left: -250px;
      background: url(http://img11.hostingpics.net/pics/672640fondnavig.png) center center no-repeat;
      transform: all;
      -moz-transform: all;
      -o-transform: all;
      -htm-transform: all;
      -webkit-transform: all;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    #fast_links:hover
    {
      margin-left: -10px;
      transform: all;
      -moz-transform: all;
      -o-transform: all;
      -htm-transform: all;
      -webkit-transform: all;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    #fast_links_contenu
    {
      margin-top: 25px;
      margin-left: 25px;
    }
    .fast_link
    {
      display: block;
      width: 200px;
      padding: 4px;
      background-color: #ebe4d0;
      font-weight: bold;
      border-left: 2px solid #a1883a;
      border-right: 2px solid #a1883a;
      text-align: center;
      font-size: 12px;
      text-shadow: 1px 1px 0px #ffffff;
    }
    .fast_link:hover
    {
      background-color: #f8f6f0;
      border-left: 2px solid #f5d553;
      border-right: 2px solid #f5d553;
    }

    Informations : merci de changer l'image de fond, celle-ci étant utilisée sur un forum. Réalisez une image de même taille avec une illustration sur la droite pour faire l'onglet d'ouverture.

    Validez votre css, adaptez au besoin les tailles/placement du bloc, ainsi que la mise en forme des liens normaux et survolés à votre goût.


    II/ Les Ancres de base et liens simples

    Il y a deux types de lien que vous pouvez mettre très facilement :

    ▬ les ancres de base qui ont pour adresse "#top" et "#bottom" mèneront en haut et en bas de votre forum. Elles sont déjà placées sur le template donc pas besoin de la toucher si vous les voulez. Vous pouvez les remplacer par des flèches si vous le souhaitez.

    ▬ les liens simples : c'est tout simplement les liens vers votre règlement, les présentations des membres, ou tout topic important de votre forum.

    Conseil : changer ces liens signifie être sur le compte fondateur et aller dans le template, ce qui est donc fatalement plus compliqué de l'aller juste dans la PA. Du coup, il n'est pas réellement conseillé de mettre des liens que vous savez devoir changer à court terme, comme des concours, ou des événements ponctuels. Il est préférable d'afficher des liens génériques qui n'auront pas à être modifiés trop souvent. Après, c'est à votre choix x)

    Ces deux types de liens sont très simples à mettre et ne demandent pas d'autres modification, je vous laisse donc les ajouter tranquillement. Pour cela bien sûr il faut retourner éditer le template overall_header en modifiant/ajoutant vos liens.


    III/ Les Ancres crées

    Bon, stop, un petit point de codage avant tout, pour les curieux ou simplement ceux qui ne veulent pas copier bêtement du code :
    Qu'est-ce qu'une ancre ? C'est un point que l'un crée sur une page, sous forme d'un lien qui n'en est pas vraiment un (le texte ne peut mener à rien) et qui par la suite va nous permettre de créer un autre lien qui nous mènera vers ce point. C'est pas clair ? En gros si sur une même page vous avez un pavé de dix paragraphe, vous pouvez mettre une ancre à chaque titre de paragraphe, puis créer une navigation en haut de page dans laquelle chaque lien mènera à l'un des titres de paragraphe. Concrètement, on ne change pas de page, il s'agit d'un lien menant vers un élément de la page.

    Vous l'aurez compris, il ne suffit pas de mettre un lien, il faut d'abord créer l'ancre elle-même. Pour cela, vous allez devoir vous rendre dans vos titres de catégorie. Pour plus de simplicité, on mettra les ancres sur les titres de catégorie car elles ne modifient pas ce titre, ça ne gêne rien.
    ▬ Allez donc dans votre titre de catégorie (celui que vous voulez placer en ancre), et affichez-le comme ceci :

    Code:
    <a name="ancre1">Votre 1ère catégorie</a>

    "Votre 1ière catégorie" = le titre normal de votre catégorie.

    Une fois fait, allez dans votre template overall_header et placez votre ancre en guise de lien comme ceci :

    Code:
    <a href="#ancre1" class="fast_link">Ancre simple</a>

    Ce code est déjà présent puisque c'est mon exemple, mais veillez à ce que votre nom d'ancre soit le même ! Ici pour moi "ancre1" doit se retrouver aux deux endroits : dans le titre de catégorie ET dans le lien de la navigation.

    Testez : le fait de cliquer sur ce lien dans la navigation amène à la catégorie voulue.


    IV/ Les Ancres crées avec changement de page

    Vous constaterez que ces ancres là ne fonctionnent que si vous êtes sur la page d'accueil, sans quoi ça vous ramène en haut du premier message par exemple, mais c'est tout. Si vous voulez que même ailleurs sur le forum ce lien vous ramène à la première page en vous centrant sur la catégorie choisie, il faut procéder autrement :
    ▬ le début reste le même, l'ancre a été placée, elle ne change pas.
    ▬ le lien à mettre dans la navigation doit comporter la page d'accueil de votre forum + l'ancre, comme ceci :

    Code:
    <a href="http://jesuisunelegende.forumactif.com/#ancre2" class="fast_link">Ancre avec changement de page</a>

    Là aussi le code était déjà présent dans mon exemple. Vous pourrez essayer d'aller à l'intérieur du forum, au milieu d'un sujet et cliquer sur ce lien de la navigation rapide, il vous remettra sur la première page du forum sur la catégorie choisie.

    D'autres ancres ? Plein d'ancres ?? Yep ! Vous pouvez en faire autant que voulu, sur toutes vos catégories, le tout est que chaque duo "ancre"/"lien d'ancre" aient le même nom ! Dans mon cas "ancre1, ancre2, etc... J'ai fait simple x), mais ça peut être vos noms de catégorie ou autre chose.
    Il est cependant VITAL que ce nom ne comporte ni espace ni caractère spéciaux !


    En cas d'utilisation de ce tutoriel, merci de mettre sur votre forum un CREDIT pour Never-Utopia. Ce geste de remerciement simple nous permet de "vivre" et de pouvoir vous apporter toujours plus d'aide ! Merci d'avance !

    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^


    Dernière édition par Sparrow-style le Jeu 28 Mar 2013 - 12:35, édité 1 fois



    Bloc de navigation rapide (haut, bas et ancres) - Page 4 Unchai10
    ♕ William
    ♕ William
    MasculinAge : 22Messages : 72

    le Mar 18 Déc 2012 - 16:56

    Merci ! :)



    Bloc de navigation rapide (haut, bas et ancres) - Page 4 Right_10
    William
    carotte
    carotte
    FémininAge : 23Messages : 23

    le Jeu 20 Déc 2012 - 18:56

    super, ce que je recherchais, merci beaucoup !
    Reeta
    Reeta
    FémininAge : 24Messages : 34

    le Ven 21 Déc 2012 - 22:54

    Merci du partage x)
    Alenn
    Alenn
    FémininAge : 27Messages : 192

    le Dim 23 Déc 2012 - 15:12

    Merci !



    Rien de nouveau.
    Ouat
    Ouat
    FémininAge : 35Messages : 74

    le Lun 31 Déc 2012 - 10:16

    C'est vraiment très pratique pour éviter de chercher partout les liens importants ! Merci beaucoup pour cette astuce
    Lycoris
    Lycoris
    FémininAge : 26Messages : 23

    le Ven 11 Jan 2013 - 18:43

    Pratique quand on a un long forum !
    Merci beaucoup pour le partage, une fois de plus ham1
    Moriarty
    Moriarty
    FémininAge : 24Messages : 85

    le Sam 12 Jan 2013 - 14:43

    Merci beaucoup !
    Léoshadow
    Léoshadow
    MasculinAge : 20Messages : 47

    le Sam 12 Jan 2013 - 17:08

    Bonjour,
    Merci du partage !



    Mon texte Very Happy
    Bôma Wolf
    Bôma Wolf
    MasculinAge : 27Messages : 87

    le Jeu 17 Jan 2013 - 10:31

    Encore un truc énorme... Vous aurez toujours mes remerciements. Merci !




    Bloc de navigation rapide (haut, bas et ancres) - Page 4 Lkxa3-1d8bc28
    Graph
    Graph"X"
    MasculinAge : 33Messages : 268

    le Ven 18 Jan 2013 - 16:23

    merci



    Bloc de navigation rapide (haut, bas et ancres) - Page 4 906554signaturegraphXAnonymous
    Bloc de navigation rapide (haut, bas et ancres) - Page 4 3150065406_1_2_RyY9oMWP
    Bloc de navigation rapide (haut, bas et ancres) - Page 4 3150229838_1_2_05FjnHrV
    Mon forum Reptile:
    Bloc de navigation rapide (haut, bas et ancres) - Page 4 3150620990_1_2_UZN7D24G

    [W]endy
    [W]endy
    FémininAge : 28Messages : 117

    le Mar 22 Jan 2013 - 11:15

    Merci (:
    TUC
    TUC
    FémininAge : 31Messages : 103

    le Mer 23 Jan 2013 - 9:28

    merci :)



    Bloc de navigation rapide (haut, bas et ancres) - Page 4 Tumblr_msx9fygOsJ1qlujrso1_250 Bloc de navigation rapide (haut, bas et ancres) - Page 4 Tumblr_msx9fygOsJ1qlujrso2_250 Bloc de navigation rapide (haut, bas et ancres) - Page 4 Tumblr_msx9fygOsJ1qlujrso3_250 Bloc de navigation rapide (haut, bas et ancres) - Page 4 Tumblr_msx9fygOsJ1qlujrso4_250
    Rin Nikky
    Rin Nikky
    FémininAge : 20Messages : 37

    le Mer 23 Jan 2013 - 19:38

    Oh sympa cette astuce ^^ Merci !
    Apokalip'z
    Apokalip'z
    MasculinAge : 26Messages : 290

    le Sam 26 Jan 2013 - 1:31

    merci du partage Sparrow'
    Kureijï-girl
    Kureijï-girl
    FémininAge : 24Messages : 45

    le Sam 26 Jan 2013 - 20:57

    Merci c'est justement ce que je cherchais *^*



    Merci à Sweet's pour son avatar trop mimi >.<
    Cissy
    Cissy
    FémininAge : 26Messages : 63

    le Lun 4 Fév 2013 - 14:59

    MErci :)
    Mitsuomi Takayanagi
    Mitsuomi Takayanagi
    Age : 27Messages : 76

    le Ven 15 Fév 2013 - 14:23

    Merci =)



    Bloc de navigation rapide (haut, bas et ancres) - Page 4 Bannol1xj5
    Euterpe
    Euterpe
    FémininAge : 33Messages : 326

    le Sam 16 Fév 2013 - 15:33

    merci
    Alzufen
    Alzufen
    MasculinAge : 23Messages : 2103

    le Sam 16 Fév 2013 - 18:06

    Merci encore une fois, troisième code utilisés sur mon nouveau forum avec un remerciement à chaque fois, merci encore une fois de tout ce que vous faites (Ou tu fais ahahah...) =D



    LazuliNight
    LazuliNight
    MasculinAge : 25Messages : 52

    le Lun 18 Fév 2013 - 1:09

    Merci beaucoup :3



    Bloc de navigation rapide (haut, bas et ancres) - Page 4 SPtWNU
    katia06
    katia06
    FémininAge : 50Messages : 203

    le Mar 19 Fév 2013 - 16:37

    super c'est ça que je cherchais, merci



    Esther Amyko
    Esther Amyko
    FémininAge : 19Messages : 42

    le Mar 19 Fév 2013 - 18:59

    Merciii ^^

    MyNameIsTanalia
    MyNameIsTanalia
    FémininAge : 22Messages : 25

    le Mar 19 Fév 2013 - 19:43

    Merci !
    Sun01
    Sun01
    FémininAge : 26Messages : 24

    le Jeu 21 Fév 2013 - 13:07

    merci
    avatar
    TATACARO13
    FémininAge : 44Messages : 80

    le Lun 25 Fév 2013 - 18:38

    merci



    Bloc de navigation rapide (haut, bas et ancres) - Page 4 967953logodusite

    Bloc de navigation rapide (haut, bas et ancres) - Page 4 381658signatureBAU
    Contenu sponsorisé


      La date/heure actuelle est Lun 19 Aoû 2019 - 3:36