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.
    medianoche
    medianoche
    MasculinAge : 32Messages : 1

    Ven 19 Avr 2013 - 18:10

    merci <3
    kitel
    kitel
    MasculinAge : 25Messages : 42

    Dim 21 Avr 2013 - 10:04

    merci! :)
    Aelita
    Aelita
    FémininAge : 27Messages : 278

    Dim 21 Avr 2013 - 18:11

    Merci beaucoup ^^
    Emma-Iseult
    Emma-Iseult
    FémininAge : 24Messages : 44

    Lun 22 Avr 2013 - 17:41

    MERCI !
    SweetieBay
    SweetieBay
    FémininAge : 28Messages : 146

    Mer 24 Avr 2013 - 2:19

    merci du partage !
    Flower_*
    Flower_*
    FémininAge : 26Messages : 605

    Ven 26 Avr 2013 - 14:05

    Merci pour ce tuto ! :hug2:
    Pineapples
    Pineapples
    FémininAge : 22Messages : 119

    Sam 27 Avr 2013 - 8:23

    Merci pour ce tutoriel ! :love:
    babou
    babou
    FémininAge : 41Messages : 5

    Mer 1 Mai 2013 - 14:30

    merci
    Zooé
    Zooé
    FémininAge : 23Messages : 66

    Mer 1 Mai 2013 - 18:02

    Merci
    sacha9843
    sacha9843
    MasculinAge : 21Messages : 15

    Mer 1 Mai 2013 - 20:42

    merci
    Aurore13
    Aurore13
    FémininAge : 32Messages : 48

    Jeu 2 Mai 2013 - 14:54

    Merci beaucoup ♥
    cosv
    cosv
    MasculinAge : 25Messages : 260

    Lun 6 Mai 2013 - 18:45

    merci!
    Valhalla
    Valhalla
    MasculinAge : 29Messages : 105

    Mar 7 Mai 2013 - 22:33

    Merci
    Philia
    Philia
    FémininAge : 27Messages : 16

    Mer 8 Mai 2013 - 15:38

    @_@ merci! <3
    immortel
    immortel
    MasculinAge : 26Messages : 31

    Jeu 9 Mai 2013 - 14:24

    Merci
    defenrir
    defenrir
    MasculinAge : 38Messages : 76

    Ven 10 Mai 2013 - 20:30

    Merchi
    Aloha-Mango
    Aloha-Mango
    MasculinAge : 27Messages : 3

    Dim 12 Mai 2013 - 14:25

    Merci pour ce code intéressant Wink
    Skyleen
    Skyleen
    FémininAge : 28Messages : 476

    Mer 15 Mai 2013 - 13:37

    Merci =)



    2013 ▬
    Commandes en cours : 0    ▬ Commandes finis : 2
    CruZa
    CruZa
    MasculinAge : 25Messages : 136

    Mer 22 Mai 2013 - 17:16

    Merci ~


    Canard
    Canard
    FémininAge : 22Messages : 25

    Jeu 23 Mai 2013 - 23:35

    Ow, merci !



    [Navigation Rapide] Bouton qui mène en haut ou en bas de la page - Page 6 186080pingouiiin
    Heartfilia
    Heartfilia
    FémininAge : 21Messages : 98

    Dim 26 Mai 2013 - 11:40

    Cool, merci !



    YOU HELLA SAVED MY LIFE
    - chloe price
    lapinette
    lapinette
    FémininAge : 32Messages : 28

    Lun 27 Mai 2013 - 18:24

    miciiii
    Lorifa
    Lorifa
    FémininAge : 21Messages : 10

    Dim 2 Juin 2013 - 16:02

    Très utile merci :)
    Zaidko
    Zaidko
    FémininAge : 18Messages : 81

    Mer 5 Juin 2013 - 12:12

    Merci ! ça va être utile à beaucoup de forum ;-]
    mathou_inu
    mathou_inu
    FémininAge : 25Messages : 55

    Mar 11 Juin 2013 - 14:44

    Merci pour ce tuto



    Contenu sponsorisé


      La date/heure actuelle est Jeu 4 Mar 2021 - 12:37