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.


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

    Partagez
    avatar
    Acnolir
    MasculinAge : 18Messages : 22

    le 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://illiweb.com/fa/pbucket.gif" alt="RSS" style="border:none" /></a>
      </div>
      <div class="bas">
        <a href="#bottom"><img src="http://illiweb.com/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://illiweb.com/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.
    avatar
    sweetheart.
    FémininAge : 29Messages : 120

    le Mer 25 Nov 2015 - 9:30

    Merci



    Un bisou pour Invité


    Un bisou pour...
    Invité
    avatar
    Smikyou
    FémininAge : 23Messages : 85

    le Dim 29 Nov 2015 - 4:16

    ty
    avatar
    Aishitteru
    FémininAge : 21Messages : 66

    le Dim 6 Déc 2015 - 11:15

    Merci. :3
    avatar
    Nord
    MasculinAge : 17Messages : 165

    le Sam 12 Déc 2015 - 20:48

    Merci, c'est sympa
    avatar
    Akiro
    FémininAge : 24Messages : 54

    le Lun 28 Déc 2015 - 21:35

    Merci pour ce code, il est particulièrement pratique! Razz
    avatar
    Doo
    FémininAge : 26Messages : 42

    le Mer 30 Déc 2015 - 21:41

    merci pour le partage!
    avatar
    MeowLowDee
    FémininAge : 25Messages : 72

    le Jeu 28 Jan 2016 - 16:14

    Thanks :)
    avatar
    MeowLowDee
    FémininAge : 25Messages : 72

    le Ven 29 Jan 2016 - 12:17

    Merci beaucoup :) C'est très utile sur les longs forums...
    avatar
    Wiss
    FémininAge : 12Messages : 53

    le Dim 31 Jan 2016 - 20:01

    Merci




    Autre signa:
    avatar
    Fantôma
    MasculinAge : 15Messages : 67

    le Dim 7 Fév 2016 - 14:21

    sympa, merci !



    avatar
    Kilda
    FémininAge : 37Messages : 73

    le Mer 10 Fév 2016 - 22:59

    mici
    avatar
    Nono-Chan
    FémininAge : 19Messages : 273

    le Jeu 18 Fév 2016 - 22:13

    Merki
    avatar
    Tinkky
    FémininAge : 27Messages : 87

    le Lun 29 Fév 2016 - 19:04

    Merci du partage ^_^
    avatar
    Ghost of Darkness
    FémininAge : 23Messages : 41

    le Mar 1 Mar 2016 - 19:14

    Voilà qui est bien pratique ! Merci ♥



    Ghost of Darkness
    All my friends are heathens, take it slow. Wait for them to ask you who you know. Please dont make any sudden moves. You don't know the half od the abuse.


    avatar
    FanDeFofo
    MasculinAge : 40Messages : 16

    le Mer 2 Mar 2016 - 16:37

    gnbn
    avatar
    Aya Hanazawa
    FémininAge : 26Messages : 72

    le Sam 5 Mar 2016 - 13:09

    merci
    avatar
    Ellebasi
    FémininAge : 49Messages : 111

    le Jeu 17 Mar 2016 - 5:48

    Merci pour le tuto.



    avatar
    Coco-Lapin02
    MasculinAge : 49Messages : 147

    le Sam 26 Mar 2016 - 15:46

    Merci
    avatar
    Saphire
    FémininAge : 19Messages : 146

    le Sam 26 Mar 2016 - 18:44

    merci
    avatar
    Liia
    FémininAge : 21Messages : 91

    le Mar 29 Mar 2016 - 16:23

    Merci x)
    avatar
    Mondo Gecko
    MasculinAge : 32Messages : 51

    le Jeu 7 Avr 2016 - 21:41

    Thank you <3





    avatar
    Yuki Kaga
    FémininAge : 17Messages : 261

    le Ven 8 Avr 2016 - 18:20

    Merci beaucoup ! Very Happy
    avatar
    yukiyuki
    FémininAge : 22Messages : 85

    le Lun 11 Avr 2016 - 23:36

    merchii :3
    avatar
    KTMiz
    MasculinAge : 18Messages : 47

    le Mar 12 Avr 2016 - 14:42

    merci



    avatar
    Euterpe
    FémininAge : 31Messages : 285

    le Mar 12 Avr 2016 - 17:34

    merci
    Contenu sponsorisé


      La date/heure actuelle est Dim 20 Aoû 2017 - 11:53