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.
    marie-noelle
    marie-noelle
    FémininAge : 63Messages : 112

    Mar 19 Avr 2016 - 2:57

    merci
    Ju08
    Ju08
    FémininAge : 31Messages : 26

    Mar 19 Avr 2016 - 22:02

    merci
    FeliceFelicis
    FeliceFelicis
    FémininAge : 30Messages : 89

    Mer 4 Mai 2016 - 18:45

    thanks :3
    Sighild
    Sighild
    FémininAge : 34Messages : 225

    Sam 7 Mai 2016 - 17:13

    Merci beaucoup! Cela peut toujours être utile.
    avatar
    Irisia Anderson
    FémininAge : 26Messages : 28

    Lun 9 Mai 2016 - 19:11

    merci du partage !
    Kai Parker
    Kai Parker
    FémininAge : 22Messages : 154

    Jeu 12 Mai 2016 - 3:36

    Merci !!

    Inoue Musaki
    Inoue Musaki
    FémininAge : 31Messages : 147

    Ven 13 Mai 2016 - 21:23

    merci
    Nemesis
    Nemesis
    FémininAge : 29Messages : 217

    Dim 15 Mai 2016 - 2:01

    merci
    Rebekaah
    Rebekaah
    FémininAge : 26Messages : 51

    Mar 17 Mai 2016 - 22:10

    Mercii !
    Shi
    Shi
    MasculinAge : 29Messages : 59

    Jeu 19 Mai 2016 - 12:50

    Merci!
    Candy Libertine
    Candy Libertine
    FémininAge : 22Messages : 136

    Dim 22 Mai 2016 - 16:11

    MERCI !!
    Kyandi
    Kyandi
    FémininAge : 22Messages : 157

    Dim 22 Mai 2016 - 18:50

    Parfait pour une navigation simple et rapide ! Merci ! ♥



    [Navigation Rapide] Bouton qui mène en haut ou en bas de la page - Page 17 1401912845-sans-titre-8


    alas
    alas
    FémininAge : 30Messages : 20

    Sam 28 Mai 2016 - 19:50

    Merci !
    Black_cherry
    Black_cherry
    FémininAge : 23Messages : 13

    Lun 30 Mai 2016 - 1:49

    Merci pour ce tuto !
    Flavien1309
    Flavien1309
    MasculinAge : 27Messages : 39

    Ven 3 Juin 2016 - 15:23

    Un grand merci !
    Clémentine
    Clémentine
    FémininAge : 28Messages : 223

    Lun 6 Juin 2016 - 0:25

    merciii ^^



    [Navigation Rapide] Bouton qui mène en haut ou en bas de la page - Page 17 9w9t
    Rimaï J. Godwin
    Rimaï J. Godwin
    MasculinAge : 25Messages : 91

    Lun 6 Juin 2016 - 19:11

    Merci toi 8D
    Suisen
    Suisen
    FémininAge : 26Messages : 52

    Mer 8 Juin 2016 - 12:37

    Merci du partage ♥
    Anonymous
    Invité

    Jeu 16 Juin 2016 - 21:37

    merciii ! :)
    Anonymous
    Invité

    Jeu 23 Juin 2016 - 4:23

    Merci :)
    Mawie62
    Mawie62
    FémininAge : 26Messages : 125

    Jeu 23 Juin 2016 - 12:37

    Merci ça va me servir :)



    [Navigation Rapide] Bouton qui mène en haut ou en bas de la page - Page 17 Signat10
    Okalem
    Okalem
    FémininAge : 20Messages : 63

    Sam 25 Juin 2016 - 4:51

    merciiii
    Sybline
    Sybline
    FémininAge : 34Messages : 23

    Jeu 7 Juil 2016 - 11:00

    Merci ^^
    Asarigolo
    Asarigolo
    MasculinAge : 28Messages : 29

    Lun 11 Juil 2016 - 13:07

    Merci !
    Yagami Suseri
    Yagami Suseri
    FémininAge : 29Messages : 18

    Jeu 14 Juil 2016 - 15:32

    Merci!
    Contenu sponsorisé


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