AccueilRechercherS'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.


    [Navigation Rapide] Bouton qui mène en haut ou en bas de la page

    Acnolir
    Acnolir
    MasculinAge : 22Messages : 22

    Jeu 21 Juin 2012 - 20:40

    Rappel du premier message :


    Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
    Lien pour comprendre pourquoi le contenu n'est pas sous hide




    Tuto : Bottom & Up



    Niveau : Facile / Exemple : Par là


    Bonjour à tous, en ce jour d'été, je vais vous montrer comment placer les images/boutons/icônes haut et bas pour accéder directement en haut de la page ou en bas de la page. C'est une sorte de navigation rapide si vous préférez. Bref, sans plus attendre, je vais rentrer dans le vif du sujet.

    Donc pour commencer, vous devrez vous rendre au Panneau d'Administration > Affichage > Templates > Général > overall_header !
    Trouvez la fermeture de la balise "head" :
    Code:
    </head>

    Et juste après, vous trouverez l'ouverture de la balise "body".
    Juste après l'ouverture de la balise body, collez-y juste, ce code :

    Code:
      <div class="haut">
        <a href="#top"><img src="http://2img.net/i/fa/pbucket.gif" alt="RSS" style="border:none" /></a>
      </div>
      <div class="bas">
        <a href="#bottom"><img src="http://2img.net/i/fa/pbucket.gif" alt="RSS" style="border:none" /></a>
      </div>

      <!-- Script pour que le défilement vers le haut ou le bas soit fluide -->
      <script src="http://milouze14.fr/M14smoothscroll.js" type="text/javascript"></script>


    Donc nous allons étudier ce petit code. Donc en premier temps, on retrouve une classe nommé ''haut'' dans une div. Rien de très spéciale. Ensuite, on retrouve cette ligne de code :
    Code:
    <a href="#top">
    Si je ne me trompe pas, c'est une ancre en langage informatique qui nous amènera directement au top, c'est-à-dire en haut de la page lorsqu'on cliquera dessus.

    Puis nous retrouvons ceci :

    Code:
    <img src="http://2img.net/i/fa/pbucket.gif" alt="RSS" style="border:none" />
    C'est très simple. Ce sera l'image que vous choisira comme bouton pour accéder en haut de la page. Personnellement, j'ai choisi une image merdique. Vous pouvez donc la changer directement ou ultérieurement si vous préférez.

    Bref, si nous allons un peu plus loin, la div se referme puis une nouvelle div s'ouvre cette fois avec comme classe '' bas ''. C'est le même principe que l'autre div. On retrouve une ancre qui mène directement au bottom, c'est-à-dire au bas de la page puis l'image que vous choisirez pour représenter le bouton ''bottom/bas'' dont vous pouvez changez.

    À la toute fin, on retrouve un code java dont vous n'avez pas besoins de vous préoccuper.

    Donc c'est tout pour le code html. Assurez-vous de bien enregistrer et de confirmer en cliquant sur le ''+'' en vert qui servira à publier.


    Ce n'est pas encore fini. Nous allons maintenant nous diriger vers le CSS.

    Donc cette fois, c'est Panneau d'administration > Affichage > Images et Couleurs > Couleurs > Feuille de style CSS !

    Collez une fois que vous y êtes ce code CSS :

    Code:
    .haut{
            position:fixed;
            bottom:500px;
            left:10px;}
           
    .bas{
            position:fixed;
            bottom:460px;
            left:10px;}
    Comme vous pouvez le constater, on retrouve les deux classes qu'on a vu plus tôt dans la template overall_header : ''haut'' et ''bas''. On retrouve la position fixe évidemment et sa place. Il est libre à vous de personnaliser les deux boutons comme vous le voulez en rajoutant une bordure, un hover, etc. Si vous ignorez comme coder en CSS, vous pouvez suivre le cour détaillé sur le "Site du Zero". Une fois que vous avez fini, enregistrez et le tour est joué. Vous avez terminé et votre navigation rapide est officiellement présente.

    C'est tout. Si vous avez une quelconque question, n'hésitez pas à la dans la section "problème avec mon code".


    Acnolir : Toute reproduction partielle ou complète est strictement interdite.
    Sacha Chan
    Sacha Chan
    FémininAge : 22Messages : 21

    Dim 21 Oct 2012 - 13:26

    Merci du partage Very Happy
    Battosai
    Battosai
    MasculinAge : 20Messages : 29

    Dim 28 Oct 2012 - 10:11

    Merci Very Happy
    Dezaia
    Dezaia
    FémininAge : 26Messages : 40

    Lun 29 Oct 2012 - 16:13

    Merci *-* Je trouve ce code drôlement pratique *^*
    *va le tester toute suite*



    [Navigation Rapide] Bouton qui mène en haut ou en bas de la page - Page 3 69802510
    Cassiopë
    Cassiopë
    FémininAge : 25Messages : 9

    Ven 9 Nov 2012 - 11:28

    Merci, c'est géant ! ♥
    LeFimoteur
    LeFimoteur
    MasculinAge : 21Messages : 18

    Jeu 22 Nov 2012 - 21:48

    Merci !
    guarana
    guarana
    MasculinAge : 24Messages : 22

    Sam 24 Nov 2012 - 12:29

    thank
    Rosela
    Rosela
    FémininAge : 27Messages : 10

    Lun 26 Nov 2012 - 15:07

    Merci beaucoup =)
    LittleChan
    LittleChan
    FémininAge : 30Messages : 62

    Dim 2 Déc 2012 - 15:19

    Thanks !



    [Navigation Rapide] Bouton qui mène en haut ou en bas de la page - Page 3 34ex18y
    Black Laugh
    Black Laugh
    FémininAge : 20Messages : 14

    Mar 4 Déc 2012 - 17:30

    Merci :)



    [Navigation Rapide] Bouton qui mène en haut ou en bas de la page - Page 3 Signa_11
    Kitsuki
    Kitsuki
    FémininAge : 21Messages : 22

    Ven 7 Déc 2012 - 20:46

    J'ai beaucoup envie de savoir comment faire ça ^^ Merci !
    Samluna
    Samluna
    FémininAge : 21Messages : 96

    Dim 9 Déc 2012 - 12:13

    *o* Mais vous êtes des robots ou quoi xD Je veux faire des codes pareille OUINNNNNN T.T

    Merki du partage :3 ^^

    Edit : Dans la feuille de CSS où la met-on ?


    Dernière édition par Samluna le Dim 9 Déc 2012 - 12:36, édité 1 fois




    Priez pour Paris. Priez pour la liberté.
    Priez pour Paris. Priez pour l'égalité.
    Priez pour Paris. Pour la fraternité.

    #Pray for Paris
    [Navigation Rapide] Bouton qui mène en haut ou en bas de la page - Page 3 Tumblr_n4vso3dRJP1qf9mevo1_500
    alexiaaa
    alexiaaa
    FémininAge : 21Messages : 45

    Dim 9 Déc 2012 - 12:35

    merci
    Kimchi
    Kimchi
    FémininAge : 24Messages : 22

    Lun 10 Déc 2012 - 20:51

    Merci du partage ! Very Happy



    [Navigation Rapide] Bouton qui mène en haut ou en bas de la page - Page 3 1390754963-jinx
    Maï-li
    Maï-li
    FémininAge : 29Messages : 30

    Mar 11 Déc 2012 - 14:40

    ... O.O ^^
    shala
    shala
    FémininAge : 28Messages : 213

    Mar 11 Déc 2012 - 16:07

    merci



    Philia
    Philia
    FémininAge : 27Messages : 16

    Mar 11 Déc 2012 - 18:05

    merci Very Happy
    blade li britannia
    blade li britannia
    MasculinAge : 28Messages : 90

    Mar 11 Déc 2012 - 21:46

    merci
    Taylor ♥
    Taylor ♥
    FémininAge : 22Messages : 11

    Dim 16 Déc 2012 - 11:27

    Merci
    Siprano
    Siprano
    FémininAge : 23Messages : 295

    Lun 17 Déc 2012 - 21:11

    merci
    Corkyie
    Corkyie
    FémininAge : 23Messages : 75

    Mer 19 Déc 2012 - 17:36

    Merci c'est un code très utile, surtout pour les forums assez longs (pas pratiques, d'ailleurs xD)
    Stitch56
    Stitch56
    FémininAge : 27Messages : 209

    Jeu 20 Déc 2012 - 10:55

    merci^^
    Depp
    Depp
    FémininAge : 29Messages : 299

    Sam 22 Déc 2012 - 19:09

    Merci beaucoup Very Happy



    [Navigation Rapide] Bouton qui mène en haut ou en bas de la page - Page 3 Tumblr_nenygwIlcz1s4u464o1_500
    Edel
    Edel
    FémininAge : 27Messages : 378

    Sam 22 Déc 2012 - 22:31

    Waiiiii...merci beaucoup !!! :hug2:



    Mon métier et mon art, c'est vivre - Montaigne
    Kaa.nameless
    Kaa.nameless
    FémininAge : 29Messages : 20

    Dim 23 Déc 2012 - 14:27

    merci bien ! Very Happy
    Febrilis
    Febrilis
    FémininAge : 70Messages : 8

    Ven 28 Déc 2012 - 11:52

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Dim 28 Fév 2021 - 1:20