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.
    Kitket
    Kitket
    FémininAge : 37Messages : 106

    Dim 17 Juil 2016 - 18:04

    Merci!
    Lexis
    Lexis
    FémininAge : 31Messages : 40

    Lun 18 Juil 2016 - 17:55

    merci beaucoup :)
    yooh
    yooh
    FémininAge : 29Messages : 143

    Mar 19 Juil 2016 - 13:40

    merciiiii
    Géranium
    Géranium
    FémininAge : 20Messages : 56

    Jeu 21 Juil 2016 - 12:21

    MERCI !<3
    Pados
    Pados
    MasculinAge : 25Messages : 5

    Ven 22 Juil 2016 - 18:34

    Merci sa peu etre utile
    Velcuum
    Velcuum
    MasculinAge : 22Messages : 41

    Jeu 28 Juil 2016 - 13:30

    merciii
    Kovu
    Kovu
    FémininAge : 19Messages : 256

    Jeu 28 Juil 2016 - 15:14

    merci !
    Professeur
    Professeur
    FémininAge : 23Messages : 13

    Mer 17 Aoû 2016 - 15:13

    Merci Very Happy
    Ylkhana
    Ylkhana
    FémininAge : 27Messages : 329

    Jeu 18 Aoû 2016 - 22:52

    Merci!
    dean winchester
    dean winchester
    MasculinAge : 26Messages : 85

    Ven 19 Aoû 2016 - 2:39

    merci !
    Yoyami Shinosuke
    Yoyami Shinosuke
    FémininAge : 23Messages : 22

    Sam 20 Aoû 2016 - 15:24

    Merci beaucoup



    [Navigation Rapide] Bouton qui mène en haut ou en bas de la page - Page 18 Sans_t29
    MissDream
    MissDream
    FémininAge : 25Messages : 151

    Sam 20 Aoû 2016 - 20:18

    merci!



    MissDream
    N'ais pas peur de rêver

    Recommandation
    HazelW
    HazelW
    FémininAge : 27Messages : 51

    Dim 21 Aoû 2016 - 15:51

    Merci !!



    [Navigation Rapide] Bouton qui mène en haut ou en bas de la page - Page 18 Wsld90[Navigation Rapide] Bouton qui mène en haut ou en bas de la page - Page 18 GryffindorBase[Navigation Rapide] Bouton qui mène en haut ou en bas de la page - Page 18 Gryffindor-gryffindor-21480238-100-100
    avatar
    Nal Souclade
    MasculinAge : 22Messages : 167

    Lun 22 Aoû 2016 - 19:55

    Merci beaucoup !
    Anonymous
    Invité

    Mar 23 Aoû 2016 - 19:40

    Merci!
    Syo
    Syo
    FémininAge : 28Messages : 32

    Mar 23 Aoû 2016 - 19:53

    merci!
    mon-etoile
    mon-etoile
    FémininAge : 32Messages : 140

    Sam 27 Aoû 2016 - 8:15

    Merci
    Moses.
    Moses.
    MasculinAge : 24Messages : 552

    Ven 23 Sep 2016 - 23:27

    Merci :)
    PrincesseÔ
    PrincesseÔ
    FémininAge : 23Messages : 220

    Jeu 13 Oct 2016 - 9:54

    Merci **
    En ligne
    Edward Speleers
    Edward Speleers
    MasculinAge : 32Messages : 460

    Jeu 13 Oct 2016 - 13:13

    Cool, c'est ce que je cherche, merci



    [Navigation Rapide] Bouton qui mène en haut ou en bas de la page - Page 18 Edkidd11
    Hyuna
    Hyuna
    FémininAge : 23Messages : 98

    Sam 15 Oct 2016 - 19:18

    Merci c'est ce que je cherchais !
    Neya
    Neya
    FémininAge : 21Messages : 164

    Jeu 20 Oct 2016 - 15:58

    MERCIII
    Samiro
    Samiro
    MasculinAge : 24Messages : 52

    Sam 22 Oct 2016 - 19:46

    Merci je vais teser pour mi forum
    avatar
    Darouine Lius
    MasculinAge : 31Messages : 65

    Dim 30 Oct 2016 - 14:25

    merci bien
    Ervael
    Ervael
    MasculinAge : 37Messages : 18

    Sam 5 Nov 2016 - 15:53

    Merci pour cette astuce ^^



    on loading ham3
    Contenu sponsorisé


      La date/heure actuelle est Ven 5 Mar 2021 - 23:06