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://i758.photobucket.com/albums/xx227/Cherryiis/PHA%20V10/UP.png" alt="RSS" style="border:none" /></a>
      </div>
      <div class="bas">
        <a href="#bottom"><img src="http://i758.photobucket.com/albums/xx227/Cherryiis/PHA%20V10/DOWN.png" 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://i758.photobucket.com/albums/xx227/Cherryiis/PHA%20V10/UP.png" 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
    Kortyx
    MasculinAge : 27Messages : 81

    le Mar 28 Juil 2015 - 16:23

    Merci :)
    avatar
    rosebleudu10
    FémininAge : 27Messages : 186

    le Mer 29 Juil 2015 - 19:54

    merci
    avatar
    Lusso
    MasculinAge : 20Messages : 36

    le Sam 1 Aoû 2015 - 21:52

    Merci ! :)
    avatar
    Err0r
    FémininAge : 23Messages : 122

    le Mer 5 Aoû 2015 - 10:06

    je pique ^^



    avatar
    Kelalin
    FémininAge : 24Messages : 1492

    le Mer 5 Aoû 2015 - 11:23

    Thank youuu ! (*´・v・)
    avatar
    NanoiHime
    FémininAge : 18Messages : 543

    le Dim 16 Aoû 2015 - 14:43

    merci !





    avatar
    Laeta
    FémininAge : 16Messages : 73

    le Jeu 20 Aoû 2015 - 18:00

    merci!
    avatar
    Romann
    FémininAge : 23Messages : 183

    le Mer 26 Aoû 2015 - 23:23

    merci ^^



    avatar
    RyuTsuki
    FémininAge : 26Messages : 40

    le Sam 29 Aoû 2015 - 20:54

    Merci beaucoup c'est très pratique !
    avatar
    LyN[ss]
    FémininAge : 25Messages : 104

    le Ven 11 Sep 2015 - 17:57

    Merci pour le partage =)



    ❝Y.O.U G.E.T L.Y.N.[.S.S.].'.E.D❞
    how could you hate me? When all I ever wanted to be was you ? How could you love me? When all you ever gave me were open wounds ? Tell me why you broke me down and betrayed my trust in you ?
    avatar
    melinnus
    FémininAge : 21Messages : 16

    le Mer 16 Sep 2015 - 20:24

    merci ! j'adore
    avatar
    shadows
    MasculinAge : 22Messages : 5

    le Sam 26 Sep 2015 - 1:08

    Merci , enfin j'ai trouvé
    avatar
    Sid'
    FémininAge : 27Messages : 67

    le Sam 26 Sep 2015 - 9:09

    Merci :)
    avatar
    Lessien
    FémininAge : 34Messages : 151

    le Ven 16 Oct 2015 - 19:32

    Thank you !
    avatar
    Nodox
    MasculinAge : 27Messages : 149

    le Dim 18 Oct 2015 - 14:48

    Merci !
    avatar
    Girly
    FémininAge : 19Messages : 116

    le Dim 18 Oct 2015 - 22:58

    merci
    avatar
    Orkais
    FémininAge : 23Messages : 118

    le Lun 19 Oct 2015 - 21:05

    Meerci :)



    "A lot of people say you need love to live. Oxygen is even more important..."
    avatar
    Kya-chan
    FémininAge : 21Messages : 71

    le Sam 24 Oct 2015 - 0:03

    Merci, c'est bien pratique quand on a pas une navigation fixée sur le haut de la page du forum =)




    If I had a hammer...
    I wanna do bad things with you~

    avatar
    Kira de Shola
    FémininAge : 20Messages : 59

    le Mer 28 Oct 2015 - 23:55

    Merci!
    avatar
    Sakura-chan
    FémininAge : 19Messages : 180

    le Jeu 29 Oct 2015 - 13:33

    Merci du partage. ^^
    avatar
    Invité

    le Mer 4 Nov 2015 - 20:37

    merci
    avatar
    Youp
    FémininAge : 22Messages : 574

    le Sam 7 Nov 2015 - 23:06

    ça m'intéresse fortement ! Merci ^^



    avatar
    Nat
    FémininAge : 22Messages : 42

    le Dim 8 Nov 2015 - 12:55

    Merci bien, quand le forum est long, ça aide bien !
    avatar
    Vixen Smile
    FémininAge : 23Messages : 9

    le Jeu 12 Nov 2015 - 11:20

    Merci bien :) !
    avatar
    Kanra
    FémininAge : 16Messages : 113

    le Dim 15 Nov 2015 - 13:59

    sankyu
    Contenu sponsorisé


      La date/heure actuelle est Mar 30 Mai 2017 - 11:11