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
    Ariess
    MasculinAge : 18Messages : 44

    le Mer 11 Juil 2012 - 17:45

    Mercii ! n_n



    avatar
    Kâ Lys
    MasculinAge : 54Messages : 299

    le Mer 18 Juil 2012 - 6:59

    merci ^^



    avatar
    kamisama19
    FémininAge : 23Messages : 17

    le Jeu 19 Juil 2012 - 11:17

    Merci pour ce tutoriel !
    avatar
    Drizzle
    FémininAge : 19Messages : 135

    le Lun 30 Juil 2012 - 16:31

    Thanks



    avatar
    #CHEVALISSE
    FémininAge : 23Messages : 25

    le Mer 1 Aoû 2012 - 13:27

    super je kiff merciii :heart:
    avatar
    NellyFée
    FémininAge : 21Messages : 62

    le Mer 8 Aoû 2012 - 8:53

    Thanks Very Happy
    avatar
    luangue
    MasculinAge : 29Messages : 34

    le Mer 15 Aoû 2012 - 20:50

    merci



    avatar
    Ocean Lounge.
    FémininAge : 23Messages : 128

    le Jeu 16 Aoû 2012 - 2:16

    Merci pour cette astuce
    avatar
    Jonana
    FémininAge : 27Messages : 57

    le Jeu 23 Aoû 2012 - 21:23

    Parfait, merci :)
    avatar
    Invité

    le Ven 31 Aoû 2012 - 17:47

    merci
    avatar
    Gouttou †
    FémininAge : 19Messages : 50

    le Mer 12 Sep 2012 - 17:59

    Merci :3



    avatar
    Kureijï-girl
    FémininAge : 22Messages : 45

    le Sam 15 Sep 2012 - 16:44

    merci beaucoup du partage ^^



    Merci à Sweet's pour son avatar trop mimi >.<
    avatar
    BlueOcelot
    FémininAge : 27Messages : 25

    le Mar 18 Sep 2012 - 0:39

    Merci! ^^
    avatar
    cerizz
    FémininAge : 24Messages : 45

    le Jeu 27 Sep 2012 - 19:26

    Merci!
    avatar
    Khouro13
    FémininAge : 18Messages : 208

    le Sam 29 Sep 2012 - 16:57

    Merci ! (:



    avatar
    laora.
    FémininAge : 29Messages : 13

    le Lun 1 Oct 2012 - 13:47

    merci
    avatar
    Motoko
    FémininAge : 19Messages : 39

    le Mer 3 Oct 2012 - 14:38

    Ouah c'est génial, merci beaucoup Wink
    avatar
    Acnolir
    MasculinAge : 18Messages : 22

    le Ven 5 Oct 2012 - 18:51

    Plaisir :)
    avatar
    bibi0712
    FémininAge : 39Messages : 66

    le Lun 8 Oct 2012 - 13:36

    J'en ai déjà essayé qui ne fonctionne que pour descendre et qui ne veulent pas remonter , j'espère que celui ci fonctionnera ^^
    Merci à toi je vais essayer de suite
    avatar
    staYoung
    FémininAge : 19Messages : 7

    le Lun 8 Oct 2012 - 17:06

    Merci! :)
    avatar
    MoonTears
    FémininAge : 23Messages : 10

    le Mer 10 Oct 2012 - 3:19

    Ah cool ! Je voudrais bien voir ce tutoriel, ça risque de m'être utile ^^ Merci beaucoup !
    avatar
    Fares
    MasculinAge : 24Messages : 51

    le Sam 13 Oct 2012 - 20:44

    @Kana-Chii a écrit:Merci ^^
    avatar
    Elricka
    MasculinAge : 26Messages : 77

    le Jeu 18 Oct 2012 - 17:49

    Thanks !
    avatar
    mini-mimi
    FémininAge : 20Messages : 75

    le Sam 20 Oct 2012 - 20:44

    Merci
    avatar
    Mademoiselle Xina
    FémininAge : 23Messages : 20

    le Dim 21 Oct 2012 - 10:46

    Merci pour le tuto *-*
    Contenu sponsorisé


      La date/heure actuelle est Dim 23 Juil 2017 - 22:36