• Flèche haut et bas de page

    Ce tutoriel vous apprend à mettre des petits liens sur le côté de la page qui renvoient en haut ou en bas.

    - Commencez par créer les images qui vous servirons de liens (je vous conseille de faire deux flèches, c'est assez compréhensible pour les visiteurs)

    - Une fois que vous avez vos flèches, mettez le code suivant dans un module simple (de cette façon, il apparaitra sur toutes les pages de votre blog)

    <div id="fleche">
       <a href="#header"> 
          <img src="http://img15.hostingpics.net/pics/856927monte.png" />
       </a>
       <a href="#footer">
          <img src="http://img15.hostingpics.net/pics/952333descnd.png" />
       </a>
    </div>

    Ce code fonctionne. Vous pouvez remplacer les liens par les url de vos image. Le premier correspond à la flèche du haut, et le deuxième à celle du bas.

    Le lien #header renvoie vers la bannière, donc le haut de la page
    Le lien #footer renvoie vers le pied de page, donc en bas 

    Validez votre HTML, et publiez votre menu. Vous devriez maintenant avoir deux flèches dans votre module. Il faut donc les "sortir" de ce module pour les afficher sur un côté de la page.

    Passons donc au CSS :

    #fleche {position: fixed;
             top: 50%;
             left: 3%;

    fleche est le nom du groupe qui contient mes deux images et les liens.

    la propriété position: fixed permet de sortir la flèche du module et de la fixer sur la page

    top et left permettent de positionner les flèches sur la page. Vous pouvez changer les valeurs en rouge pour changer leur position.
    Par exemple :

    •Pour center verticalement: top: 50%;
    •Pour le mettre tout à gauche: left: 0%;
    •Pour le mettre tout à droite: left: 100%

    Note: Vous pouvez également utiliser des valeurs en px ou em


    Tags Tags : , , , ,
  • Commentaires

    1
    Jeudi 7 Juin 2012 à 20:08

    Promisjurécrachéceweekend XD

    Il est un peu plus long à expliquer que celui là, donc je le posterais samedi (si j'ai pas trop de trucs à faire //SBAFF//)

    2
    Vendredi 8 Juin 2012 à 12:02

    merci pour les flèches^^je viens de le faire c'est bien

    mille fois merci^^

    3
    Odd Dellarobia Profil de Odd Dellarobia
    Samedi 9 Juin 2012 à 11:30

    Moi ça marche pas ! --" Enfin, si les fléches sont là ou je veux quelles soit (j'ai pris les même que toi vu que c'était celles qui était dans le code HTML), j'ai mis le code css, bon tout me convient ! Suaf que quand je clique sur la fléche du bas pour descendre au pied de page ça marche pas !! Voilà, j'attend ton aide Ô grande Nagalia !

    une capture pour illustrer comment ça marche pas >

    Mais ça mets aussi (parfois) une page de recherche sur mon blog avec écrit "ERREUR 404".......

    AIDEZ MOI !!!!

    4
    Odd Dellarobia Profil de Odd Dellarobia
    Samedi 9 Juin 2012 à 11:38

    Okay.......MERCI MIMILLE511 !!!ç amarche !! merci ! Tu ne saurais pas comment on fait pour que ça suivent notre déplacement sur la page ? Comme sur ce blog !

    5
    Odd Dellarobia Profil de Odd Dellarobia
    Samedi 9 Juin 2012 à 11:54

    Ok !! Merci mimille511 ! Je passerais peut être sur ton blog !

    6
    Samedi 9 Juin 2012 à 16:14

    Pas mal ! J'avais réussis avant de connaître ton code XP (bien évidemment grace à tes autres tutos, une fois qu'on a compris...) 

    7
    Samedi 9 Juin 2012 à 16:15

    Mais je n'ai pas mis la même chose à a href, j'ai mis:

    #top 

    et pour le bas

    #footer

    directement, et ça marche aussi 

    8
    Dimanche 10 Juin 2012 à 13:56

    Nagalia => Est-ce que j'peux prendre tes flèches et changer leurs couleurs ?_?

    Edit : 0-0 j'arrive pas ca me fait "Une erreur est survenue lors du chargement.

    Merci de réessayer" (screenshot => http://data0.ek.la/testdefonds/mod_article46714247_4fd4928c4bf78.png?7639)

    9
    Dimanche 10 Juin 2012 à 15:16

    Actualise ta page. ça me fais ça quelque fois aussi ^^'

    10
    Dimanche 10 Juin 2012 à 15:34

    Ça marche toujours pas ._. Tu peux essayer : http://theworldofgroovie.id.st/

    Pss : Désolé pour l'invasion de la guerre des comm's pour l'article du blablatage xD (ça fait un peu long là xD)

    11
    Dimanche 10 Juin 2012 à 19:23

    J'ai réessayé, ça a chargé pendant 5sec et ça m'a remis la même chose.

    12
    Mercredi 13 Juin 2012 à 17:15

    J'vois toujours pas pourquoi ça marche pas :s

    13
    Mercredi 13 Juin 2012 à 17:41

    Je peux voir ton code?

    14
    Mercredi 13 Juin 2012 à 17:47

    HTML

    <div id="fleche"><a href="/fleche-haut-et-bas-de-page-a46682589#header"> <img src="http://ekladata.com/54Y7uS-OPp_4B2P9M57kztCxMsI.png" alt="Revenir en Haut" /> </a> <a href="/fleche-haut-et-bas-de-page-a46682589#footer"> <img src="http://ekladata.com/DmP3eLBajy5zltrN_-rq_2O1Ba0.png" alt="Aller en Bas" /> </a></div>

    CSS

     #fleche {positionfixed;
               top50%;
               left0%;

    15
    Mercredi 13 Juin 2012 à 17:50

    Non! 

    Il faut mettre

    <div id="fleche"><a href=" #top"> <img src="http://ekladata.com/54Y7uS-OPp_4B2P9M57kztCxMsI.png" alt="Revenir en Haut" /> </a> <a href=" #footer"> <img src="http://ekladata.com/DmP3eLBajy5zltrN_-rq_2O1Ba0.png" alt="Aller en Bas" /> </a></div>

    Un truc du genre 

    16
    Mercredi 13 Juin 2012 à 17:52

    Nagalia, pour le bas, #bottom ça marche aussi nan ? 

    17
    Mercredi 13 Juin 2012 à 17:53

    Yep DpZ ;)

    "href", c'est uniquement le lien. Pour remonter ou descendre une page, il suffit d'indiquer l'élément en haut et l'élément en bas:
    #top
    #footer 

    18
    Mercredi 13 Juin 2012 à 17:55

    merci :3

    Edit : Pour le haut #header marche aussi

    19
    Mercredi 13 Juin 2012 à 18:00

    Je viens de voir que l'article avait un problème, désolé ^^'

    Mais je ne comprend pas d'ou sort ce truc en plus... Je ne vois rien quand j'édite --'

    20
    Mercredi 13 Juin 2012 à 18:02

    au moins le problème est réglé xD

    21
    Vendredi 15 Juin 2012 à 22:36

    Ca ne marche pas de mon côté :/ .

    22
    Vendredi 15 Juin 2012 à 22:51

    je peux voir ton code?

    23
    Vendredi 15 Juin 2012 à 23:39

    <div id="fleche"><a href="/fleche-haut-et-bas-de-page-a46682589#header"><img src="http://i45.servimg.com/u/f45/17/45/11/93/flache10.png" alt="" /> </a><a href="/fleche-haut-et-bas-de-page-a46682589#footer"><img src="http://i45.servimg.com/u/f45/17/45/11/93/flache11.png" alt="" /> </a></div>

     

    J'ai fait une erreur quelque part ? :$

    24
    Samedi 16 Juin 2012 à 00:01

    --' Vais me pendre... Pourquoi ça bug?!

    C'est pas ta faute, j'ai un bug avec le code: Un morceau qui se rajoute quand j'édite l'article...
    Voilà le bon code:

    <div id="fleche"><a href="#header"><img src="http://i45.servimg.com/u/f45/17/45/11/93/flache10.png" alt="" /> </a><a href="#footer"><img src="http://i45.servimg.com/u/f45/17/45/11/93/flache11.png" alt="" /> </a></div>

    25
    Samedi 16 Juin 2012 à 00:25

    Non te pends pas ! . Qui va nous aider après : 0 :okjesors:

    Désolé mais ça marche toujours pas ='/ . Pardon de t'enquiquiner comme ça ><' ~

    26
    Samedi 16 Juin 2012 à 00:27

    Ah? Je viens de tester, ça marche ^^'

    Actualise ta page peut être

    27
    Samedi 16 Juin 2012 à 00:31

    Aucun changement. Mais je vois pas ou il y aurait une faute ><' . Peut-être dans le CSS mais je vois pas :

    #fleche {position: fixed;
     top: 100%;
     left: 10%;}

    28
    Samedi 16 Juin 2012 à 00:36

    J'ai pas essay, mais je pense que top:100% fais sortir les flèches de ta page. Si tu veux les mettre tout en bas, met plutôt "bottom: 0%"
    Tu veux les positionner comment? 

    29
    Samedi 16 Juin 2012 à 00:40

    Les placer à gauche centré verticalement xDxD Ben j'étais à l'opposé ..

    T'avais raison, 100 ça fait sortir les flèches  ><' . Merci & je te revaudrais ça un jour :] . Mais comment ? Quel jour ? Tel est la question :0 .

    30
    Samedi 16 Juin 2012 à 00:43

    top: 50%;
    left: 0%

    De rien ;) 

    31
    Samedi 16 Juin 2012 à 22:36

    c'était le même code css pour moi xD (voir un peu plus haut dans les comm's)

    32
    Dimanche 17 Juin 2012 à 10:47

    Ah oui xD

    33
    Mercredi 20 Juin 2012 à 20:19

    Nagalia ! :)

    En fait, merci pour tes libres services et tes tuto' !!! :o 

    Et à propos de cet article, j'ai vu les comm's, en fait j'ai eu aussi ces bugs et j'ai juste remplacé : 

    <div id="fleche">
    <a href="/fleche-haut-et-bas-de-page-a46682589#header"> 
    <img src="http://img15.hostingpics.net/pics/856927monte.png" />
    </a>
    <a href="/fleche-haut-et-bas-de-page-a46682589#footer">
    <img src="http://img15.hostingpics.net/pics/952333descnd.png" />
    </a>
    </div>

    Par : 

    <div id="fleche">
    <a href="#header"> 
    <img src="http://img15.hostingpics.net/pics/856927monte.png" />
    </a>
    <a href="#footer">
    <img src="http://img15.hostingpics.net/pics/952333descnd.png" />
    </a>
    </div>


    Bon en gros si c'est déjà expliqué, ben désolée x) je ne lis pas je survole les comm's...

    Merci mille fois pour tes tuto's :D (ceux que je connaisais pas ou que je ne maîtrisais pas bien)


    34
    Dimanche 8 Juillet 2012 à 14:37

    Mon ordi se fiche de moi là ...

    Depuis tout à l'heure je mets : 

    top : 50px

    left : 100px

    et ça n'apparaît pas

    Là j'essaye :

    top : 50px

    left : 0px

    et ça marche - -'

     

    35
    Jeudi 19 Juillet 2012 à 19:58

    Comment faire pour que les flèches soit l'une et à côté de l'autre et non l'une en dessous de l'autre ?
    Merci d'avance :)

    36
    Jeudi 19 Juillet 2012 à 21:30

    Heu, j'ai pas compris ^^'

    Enfin, merci quand même =)

    37
    Dimanche 22 Juillet 2012 à 18:22

    Non, mon code n'est pas du tout comme ça O_O

    38
    Mercredi 25 Juillet 2012 à 15:40

    Mimille: Ton code (pour mettre les flèches l'une par dessus l'autre) ne marche pas :/

    Nagalia: Comment on me tles flèches l'une sur l'autre, et comment on met le point d'intérrogation ??

    39
    Mercredi 25 Juillet 2012 à 18:19

    Comment ça "l'une sur l'autre" ?

    Pour le point d'intérogation, c'est juste une autre image avec un lien que j'ai mis entre mes deux flèches

    40
    Mercredi 25 Juillet 2012 à 19:30

    Les flèche en vertical si tu préfère ;)

    Ok^^

    41
    Vendredi 27 Juillet 2012 à 11:35

    Non c'est bon^^'

    Mais juste, sa me fait une marge blanche sur le côté droit (la ou il y'a les flèches) tu pourrais m'aider ?Tu peu voir la marge sur mon blog : http://leslegendairesshimyjadina.eklablog.fr

    Merci d'avance ;D

    42
    Samedi 28 Juillet 2012 à 03:56

    Je vois pas de blanc sur le côté droit ^^'

    En même temps, vu l'heure... je regarderais mieux dans quelques heures XD

    43
    Uryu Profil de Uryu
    Samedi 28 Juillet 2012 à 18:40

    Je ne comprend pas comment ou est ce qu'on met le code html (et aussi comment le code CSS comprend quel "fleche" on veut mettre quelqu'un peut m aider? >w<

    44
    Samedi 28 Juillet 2012 à 18:49

    Le code HTML ce mets dans un module  simple ! Tu clique sur le petit icôn HTML ! Pour le css, c'est par rapport au selecteurs que tu as mis qu'il sait à quel fléche appliqués les effets que tu veux ! J'ésépre t'avoir aider ! :)

    45
    Uryu Profil de Uryu
    Samedi 28 Juillet 2012 à 18:51

    En faites c est ce que j ai fait mais sa marche pas!! (en faites la flèche est dans le module simple et pis c est tout)!!

    46
    Samedi 28 Juillet 2012 à 19:18

    Je suis pas un pro (et encore moins un anarqueur), mais peux tu me donner la perm 3 sur le blog auquel tu veux faire ça ? Je comprendrais que tu refuse ! 

    47
    Samedi 28 Juillet 2012 à 19:24

    Akemi, tu mets le code HTLM, après avoir cliqué sur l'icon [HTLM] lorsque tu as ouvert l'édition de ton module de menu (la fenêtre pour écrire du texte), dans la fenêtre d'HTLM : 

    <div id="fleche">
    <a href="#header"> 
    <img src="http://img15.hostingpics.net/pics/856927monte.png" />
    </a>
    <a href="#footer">
    <img src="http://img15.hostingpics.net/pics/952333descnd.png" />
    </a>
    </div>


    Ensuite tu cliques vas sur "apparence", "modifier le thème" puis "ajouter du CSS". Tu ajoutes ça :

    #fleche {position: absolute;
               top: X%;
               left: X%;} 


    Tu remplaces les valeurs X (en rouge) par un chiffre pour placer tes flèches sur ton blog :)

    Si tu n'y arrives pas, je peux te montrer en images ^^

    48
    Uryu Profil de Uryu
    Samedi 28 Juillet 2012 à 19:28

    C'est ce que j ai fait mais sa marche pas! X'( (et en passant je kiff ton avatar)

    49
    Samedi 28 Juillet 2012 à 19:51

    Ok attends je vais regarder et ben si ça ne marche toujours pas faudra attendre Nagalia :/ (Merci xD)

    50
    Samedi 28 Juillet 2012 à 19:56

    Désolée ça ne fonctionne pas xD Sinon mets seulement ça  : xD

    HTLM : <div id="fleche"><a href="#header"> <img src="http://ekladata.com/1SyMkbKRMGsNeXmvVdFQGxXGtbw/happy01.png" alt="" /> </a></div>

    Et CSS : #fleche {positionfixed;

               top63%;
               left86%;


    Ce serait mieux xD


    Desolée pour le blabla Nagalia ><

    51
    Uryu Profil de Uryu
    Samedi 28 Juillet 2012 à 20:00

    Attend je vais voir^^

    52
    Trendy Profil de Trendy
    Mardi 31 Juillet 2012 à 15:26

    Merci pour ce tuto tu explique trop bien :D

    53
    Trendy Profil de Trendy
    Mardi 31 Juillet 2012 à 15:30

    J'ai un petit problème j'aimerais le mettre au même endroit que toi mais je sais pas comment faire ?

    54
    Mardi 31 Juillet 2012 à 15:32

    C'est simple, tu joue avec les % du code CSS et quand ça te plait, tu laisse ! :) (si tu veux que ça suive ta page, n'oublie pas de remplacer "absolute" par "fixed") ^^

    55
    Trendy Profil de Trendy
    Mardi 31 Juillet 2012 à 16:08

    Oui mais j'arrive pas :(

    56
    Mardi 31 Juillet 2012 à 16:32

    Attend je vais t'aider, je finis mes (nombreuses) commandes et je m'occupe de toi !! Si mimilles511 veut intervenir, elle peut ! X) ce serais un honneur pour moi, su'elle vienne m'aider à t'aider ! %)

    57
    Trendy Profil de Trendy
    Mardi 31 Juillet 2012 à 18:07

    ok merci

    58
    Mardi 31 Juillet 2012 à 18:39

    J'ai presque fini...désolé ! Bon je vais quand même t'aider vite fait ! ^^ Essaye de mettre "top: 50%___left: 100%"

    59
    Mardi 30 Octobre 2012 à 11:10

    euuh je suis pas graphuse preofessionnelle... Et comment on fait des fleches ? >w<( turquoise :D )

    60
    Mardi 30 Octobre 2012 à 11:16

    Cherche des brush flèche pour ton logiciel ;)

    61
    Vendredi 9 Novembre 2012 à 12:53

    Alors moi, j'ai un problème. Les flèches sont sur le milieu de la page et ne sont pas fixe ! Ils sont collés à la page. Aahhhh ! Au secours ! X')

    62
    Vendredi 9 Novembre 2012 à 13:17

    Regarde : #fleche {position: absolute;

               top: X%;
               left: X%;} 

    Ca, c'st ton CSS par défaut, tu change "absolute" par "fixed". (sans les guillemets) Ensuite, tu régle l'endroit ou tu veux qu'elles soient, en modifier les X% (exemple: top: 40%; left: 50%) Après, tu choisis les valeurs que tu veux ! :)

    63
    Vendredi 9 Novembre 2012 à 13:21

    Oh merci ! :) Mais ça me fait tout le temps erreur du chargement ! :'(

    64
    Vendredi 9 Novembre 2012 à 13:48

    Verifie ton code HTML ! :)

    65
    Vendredi 16 Novembre 2012 à 16:52

    merci bc sa marche :)

    66
    Mercredi 26 Décembre 2012 à 10:39

    Moi sa marche pas , sa met les fleche et tout mais quant je clik sur les fleche , sa me renvoi pas vert le haut ou le bas , sa me met '' Erreur '' 

    67
    Dimanche 10 Février 2013 à 11:36

    <p><a href="#">remonter en haut</a></p>

     

    tu met ça dans un module simple en html, tu peux mettre l'adresse de tesflèches à la place de remonter en haut !

    68
    Vendredi 17 Mai 2013 à 18:12

    Bonjour et merci pour l'aide que vous apportez. Après avoir bien galeré je viens enfin de mettre les fleches pour descendre directement en bas de page. J'y suis enfin arrivée, même si la flèche turquoise ne me plait pas vraiment puisque ça fonctionne je laisse comme ça pour le moment.

    Amicalement

    69
    Tagadada Profil de Tagadada
    Mardi 2 Juillet 2013 à 12:59

    J'ai trouver comment mettre les flèches verticlement ! :

    il faut rajouter <p> dans le html >>

    <div id="fleche">
    <a href=#header> 
    <img src="http://img15.hostingpics.net/pics/856927monte.png" />
    </a>

    <p>
    <a href=#footer>
    <img src="http://img15.hostingpics.net/pics/952333descnd.png" />
    </a>
    </div>

    70
    Mardi 2 Juillet 2013 à 14:27

    Comment ça "verticalement" ?

    Mh, ça marche peut être, mais il vaut mieux éviter d'ouvrire une balise sans la refermer...

    71
    crinière Profil de crinière
    Mercredi 3 Juillet 2013 à 18:19

    Merci beaucoup pour ce tuto , j'ai eu un peu de mal,

    mais j'y suis arrivée ! encore merci !

    72
    Mizuru Profil de Mizuru
    Dimanche 7 Juillet 2013 à 13:00

    Bonjour, cela va faire trois jours que je me suis inscrite sur EklaBlog UwU' Je découvre donc le fonctionnement -w-... Bref, (je fais trop sérieuse là xD)

    J'aimerai bien faire aussi ces flèches, j'ai suivit le tuto et... Ca marche pas ToT !!! Au secours ouinnn ça va faire 3 heures que j'essaie en vaint X.X ! Que j'actualise les pages, que j'essaie d'autres codes des commentaires... Rien ! Hum, bref...

     Bon, alors voici mon code ce que j'ai mis dans le module simple (HTML);

    <div id="fleche"><a href="#header"><img src="http://50.img.v4.skyrock.net/7952/87727952/pics/3172866681_0_5_Of1ZX4HI.png" alt="" /> </a><a href="#footer"><img src="http://50.img.v4.skyrock.net/7952/87727952/pics/3172866681_0_3_hz6qbF9t.png" alt="" /> </a></div>

     

    Et le CSS ;

    #fleche {position: absolute;
               top: 50%;
               left: 100%;}

     

    Bon, j'explique le problème... Le CSS marche, il passe... Par contre le code HTML (je crois) se note dans le module et ça ne marche pas .w.'' Bref, merci d'avancee~

    73
    Dimanche 7 Juillet 2013 à 14:05

    Bienvenue sur Ekla :D

    Pour tes flèches, si tu veux les positionner à droite, met:

    #fleche {position: absolute;
    top: 50%;
    right: 0%;}

    left:100% les fait sortir de la page

    Pour qu'elles soient l'une en dessous de l'autre, rajoute un saut de ligne entre les deux images:

    <div id="fleche">
    <a href="#header"><img src="http://50.img.v4.skyrock.net/7952/87727952/pics/3172866681_0_5_Of1ZX4HI.png" alt="" /> </a>
    <br/>
    <a href="#footer"><img src="http://50.img.v4.skyrock.net/7952/87727952/pics/3172866681_0_3_hz6qbF9t.png" alt="" /> </a></div>

     

    74
    Mizuru Profil de Mizuru
    Dimanche 7 Juillet 2013 à 14:17

    Bienvenue sur Ekla :D ------> Mercii

    merci mais ça marche toujours pas TwT''

     

    HTML

    <div id="fleche">
    <a href="/fleche-haut-et-bas-de-page-a46682589#header"><img src="http://50.img.v4.skyrock.net/7952/87727952/pics/3172866681_0_5_Of1ZX4HI.png" alt="" /> </a>
    <br/>
    <a href="/fleche-haut-et-bas-de-page-a46682589#footer"><img src="http://50.img.v4.skyrock.net/7952/87727952/pics/3172866681_0_3_hz6qbF9t.png" alt="" /> </a></div>

     

    CSS

    #fleche {position: absolute;
    top: 50%;
    right: 0%;}

    75
    Dimanche 7 Juillet 2013 à 14:40

    Heu... bizarre, ça marche chez moi ^^'

    Essaie avec:

    #fleche {position: fixed;

    top: 50%;

    right: 0%;}

    76
    Mizuru Profil de Mizuru
    Dimanche 7 Juillet 2013 à 14:58

    Ca marche paaas ToT

    Et ce que c'est l'habillage du blog qui poserait problème ?

    77
    Dimanche 7 Juillet 2013 à 15:02

    @Mizuru : Je viens d'aller sur ton blog et je voulais savoir si tu avais bien mis le code html dans "Html" dans ton module car je vois le code :/

    78
    Mizuru Profil de Mizuru
    Dimanche 7 Juillet 2013 à 15:08

    Ohhh *^*

    Alors maintenant il y a les flèches, mais le liens marche pas xD

    Mais merciiiii on avance *^*

    79
    Dimanche 7 Juillet 2013 à 15:09

    De rien, heureuse d'avoir pu aider ! Reste juste à trouver les problème du lien , mais je ne pense pas être assez qualifiée pour ça alors je laisse faire Nagalia ... 

     Bon tant pis ... Je crois n'avoir pas vu dans votre code "<a href=#footer>" ainsi que le lien vers le header, je me trompe ? Après peut-êter qu'ils sont planqués ... Je ne sais pas si c'est la solution ou si je suis juste une grosse gourde en HTML ...

    80
    Mizuru Profil de Mizuru
    Dimanche 7 Juillet 2013 à 15:14

    Mhh.... ben ;

    <div id="fleche"><a href="/fleche-haut-et-bas-de-page-a46682589#header"><img src="http://50.img.v4.skyrock.net/7952/87727952/pics/3172866681_0_5_Of1ZX4HI.png" alt="" /> </a> <br /> <a href="/fleche-haut-et-bas-de-page-a46682589#footer"><img src="http://50.img.v4.skyrock.net/7952/87727952/pics/3172866681_0_3_hz6qbF9t.png" alt="" /> </a></div>

    81
    Dimanche 7 Juillet 2013 à 15:22

    Je crois que c'est le rouge dans ces parties là qui est à enlever ... Naglaia avait corrigé un problème comme ça avant :)

    href="/fleche-haut-et-bas-de-page-a46682589#header">

    href="/fleche-haut-et-bas-de-page-a46682589#footer">

    Ce qui nous donne :

    <div id="fleche"><a href="#header"><img src="http://50.img.v4.skyrock.net/7952/87727952/pics/3172866681_0_5_Of1ZX4HI.png" alt="" /> </a> <br /> <a href="#footer"><img src="http://50.img.v4.skyrock.net/7952/87727952/pics/3172866681_0_3_hz6qbF9t.png" alt="" /> </a></div>

    82
    Mizuru Profil de Mizuru
    Dimanche 7 Juillet 2013 à 15:25

    Ouaaah ça marchhe !! *^* Mercii

    83
    Dimanche 7 Juillet 2013 à 15:27

    Ah bon ? Ouah j'y croyais pas ... Heureuse d'avoir pu aider à nouveau alors :) De rien et bonne installation sur eklablog ! 

    84
    takeshi-dan Profil de takeshi-dan
    Samedi 13 Juillet 2013 à 14:29

    Merci beaucoup, ça marche, sauf que moi, les flèches ne descendent pas en meme temps que la page... donc quand on est plus bas dans la page, les fleches sont restés en haut. C'est normal ? ^^

    85
    takeshi-dan Profil de takeshi-dan
    Samedi 13 Juillet 2013 à 14:56

    C'est bon j'ai compris =) il fallait mettre "fixed"

    86
    Mercredi 30 Octobre 2013 à 13:25

    bjr, j'ai un site avec des flèches mais elle ne me conviennent pas j'aimerais avoir

    les flèches qui sont sur fanstasy elles iraient bien sur mon site .

    Comme je suis novice si c'est possible des les avoir, il faut bien m'expliquer, car je suis très, très très novice merci

    cordialement

    87
    Dimanche 8 Décembre 2013 à 18:31

    coucou ca ne fonctionne pas j ai mis ce code et les fleches sont la mais quand j appuye dessus ca ne fonctionne pas ca me dit une erruer est survenue

    merci de m aider voici mon code <div id="fleche"><a href="/fleche-haut-et-bas-de-page-a46682589#header"><img src="http://img15.hostingpics.net/pics/845140haut.png" alt="" /> </a> <br /> <a href="/fleche-haut-et-bas-de-page-a46682589#footer"><img src="http://img15.hostingpics.net/pics/824827bas.png" alt="" /> </a></div>

    88
    Dimanche 8 Décembre 2013 à 18:43

    Le code correct se trouve dans l'article. Copie et colle le tel quel pour commencer, et change les images par la suite. Les liens ne sont pas à modifier.

    89
    Dimanche 8 Décembre 2013 à 19:51

    oui merci j ai reussi juste une chose comment peux t on faire pour mettre les fleches  l une en dessous de l autre merci bisous

    90
    Dimanche 8 Décembre 2013 à 22:22

    Donne à ta div la largeur d'une flèche :

    #fleche {position: absolute;
               top: X%;
               left: X%;
               width: Xpx;      /*largeur de la flèche*/

    91
    Lundi 9 Décembre 2013 à 16:35

    hello bonjour merci NAGALIA je vais essayer bonne journee bisous

    92
    Mercredi 11 Décembre 2013 à 22:44

    BOBSOIR NAGALIA COMMENT JE FAIT POUR QUE MES FLECHES SIOS SUR TOUTE LES PAGES MERCI CAR LA MIENNE EST JUSTE SUR LA PAGE D ACCEUIL

    93
    Mercredi 11 Décembre 2013 à 23:10

    Il faut entrer le code dans un module simple.

    94
    Mercredi 11 Décembre 2013 à 23:15

    MERCI NAGALIA DESOLEE POUR LE DERANGEMENT BISOUS BONNE FIN DE SOIREE

    95
    Jeudi 12 Décembre 2013 à 15:30

    Pas de problème :)

    (J'ai l'impression d'être agressée avec l'écriture en majuscule XD)

    96
    Jeudi 12 Décembre 2013 à 18:44

    coucou desolee NAGALIA pas fait expres j ai oublier de mettre en minuscule et j ai editer le message bonne soiree bisous

    97
    Mercredi 8 Janvier 2014 à 15:32

    comment faire pour que ça reste fixe ?

    98
    Mercredi 8 Janvier 2014 à 16:40

    Dans le css, met "position: fixed" au lieu de "position: absolute"

    99
    Mercredi 8 Janvier 2014 à 18:13

    ok merci !

    100
    Samedi 18 Janvier 2014 à 08:40

    Merci infiniment pour le renseignement dont j'avais besoin (mettre une flêche en début de page pour se rendre immédiatement en fin de page aux com.) merci vraiment je viens de la faire pour ma page des "dernières nouvelles" et c'est exactement ce dont j'avais besoin. J'ai mis un lien de ton blog dans le mien pour ne pas te perdre de vue. Merci beaucoup. Bonne journée.

    101
    Samedi 1er Février 2014 à 11:13

    Merci pour ce tutoriel :)

    102
    Dimanche 25 Mai 2014 à 16:17

    Merci mille fois pour ce code.

    103
    Jeudi 29 Mai 2014 à 19:59

    Coucou ^^

    Comment faire en sorte qu'elles soient bien l'une au dessus de l'autre STP :3 ?

    104
    Vendredi 30 Mai 2014 à 12:21

    Il faut le que conteneur de tes liens (#fleche si tu as gardé mon code) est la même largeur que tes images 

    #fleche {position: fixed;
         top: 50%;
         left: 3%;
         width: Xpx; /*X = largeur de l'image*/

    105
    Vendredi 30 Mai 2014 à 13:39

    D'accord :3 Merci beaucoup Nagalia, je te tiens au courant :3

    106
    Vendredi 30 Mai 2014 à 13:53

    Ça marche merci ! :3

    107
    Samedi 31 Mai 2014 à 15:47

    J'ai un autre question :3, comment faire pour qu'elle n'apparaisse qu'a un certain endroit dans la page (Comme toi) S'il te plait :3 ?

    108
    Samedi 31 Mai 2014 à 16:00

    Là, c'est un peu plus compliqué, il faut le faire en JS

    J'ai déjà fait un tuto de ce style pour fixer un menu à partir d'un endroit (comme ici le menu graphisme /codage /... est fixe en haut de la page une fois qu'on a dépassé le header)

    => http://fanstasy-graph.eklablog.net/fixer-un-menu-au-defilement-a106457588

    Il faudra un peu l'adapter pour les flèches. Je te laisse déjà regarder, si tu arrives à modifier le code

    109
    Samedi 31 Mai 2014 à 16:03

    Wow, c'est très compliqué ^^

    Je vais tenter de modifier mais ne t'embête pas pour ça, c'est pas important ^^ si je n'y arrive pas abandonnerais plutôt XD

    110
    Samedi 31 Mai 2014 à 16:07

    Haha en plus c'est pour le blog d'une amie, elle a pas activé le JS. XD. C'est pas grave ^^

    111
    Samedi 31 Mai 2014 à 16:07

    Essaie quand même et demande moi si ça ne marche pas ;)

    112
    Samedi 31 Mai 2014 à 16:10

    Non ça n'a pas marché ^^ Manque de JS ^^

    113
    Samedi 31 Mai 2014 à 16:12

    Tant pis ^^'

    Je n'ai pas de solution en CSS...

    114
    Samedi 31 Mai 2014 à 16:13

    Ce n'est pas grave ^^ ! Merci beaucoup quand même, j'ai les flèches c'est déjà ça :3 !

    115
    Jeudi 5 Juin 2014 à 02:14

    Bonjour,

    Y'a t'il moyen de cacher le menu sans que ça cache les flèches?

    J'ai essayer avec ce code

    #module_menu141423274 {
    display: none;
    }

    mais ça cache inévitablement les flèches aussi he

    Merci par avance pour votre réponse

    116
    Vendredi 6 Juin 2014 à 12:42

    #module_menu141423274 {
       width: 0px;
       height: 0px;
    }
    #module_menu141423274 .module_menu_titre {
      display: none;
    }

    Il faut mettre une taille 0*0 au module, et masquer le titre

    117
    Vendredi 6 Juin 2014 à 18:58

    C'était si simple que je n'y es pas pensé mad

    Merci beaucoup

    118
    Vendredi 11 Juillet 2014 à 14:38

    Est-ce que je peux modifier tes flèches ?

    119
    Lundi 14 Juillet 2014 à 13:47

    Merci pour le partage de ce tuto "il est bien expliqué" ^^

    120
    Dimanche 10 Août 2014 à 20:59

    Merci pour le code :)

    121
    Vendredi 29 Août 2014 à 12:23

    PS:parcontre,on peut tout simplement mettre nos flèches puis mettre en liens:

    #footer ou #header 

    122
    Dimanche 5 Octobre 2014 à 22:47

    Merci de faire des tutos comme ça, c'est super cool ! Je suis fière du rendu de mon blog pour la première fois :3 En plus, j'adore ton blog :)

    123
    Dimanche 12 Octobre 2014 à 16:38

    Bonjour je voudrai savoir comment on fait pour les mettre droite et non l'une de chaque coté

    Merci d'avance ^^

    124
    Dimanche 14 Décembre 2014 à 18:23

    C'est encore moué 8D J'voulais savoir comment mettre les flèche en opacité genre un peu comme la transparence dd'un blog ? Car les miennes sont trop "flachies" et j'voudrais les fondre un peu ^^'

    125
    Dimanche 14 Décembre 2014 à 18:34

    Je sais je suis chiante ! o/ Mais j'ai un soucis avec mes flèches x) elles sont pas fonctionnelles genre quand on clique dessus elles ne vont ni vers le haut ni vers le bas elles affichent la flèche en plus grande sur fond blanc x) Je fait comment ? Merci ~ 

    126
    Vendredi 22 Mai 2015 à 16:43

    Bonjour,

    J'aurai voulu savoir si il est possible d'avoir 2 fonds différents pour les articles.

    Je m'explique:

    Avoir un fond sur les articles sur la page d'accueil

    Et un autre fond qui s'affiche quand on clic sur "lire la suite"

    Merci d'avance

    Sergio63

    127
    Dimanche 20 Septembre 2015 à 17:43

    Merci pour ce tuto, il rend mon blog plus esthétique et convivial. Seul hic; j'ai du coller le code dans chacune des page, faute d'un module simple.

     

    128
    Lundi 27 Juin 2016 à 11:12

    Merci pour le tutoriel mais je ne comprends pas comment faire pour que les flèches soit l'une en dessous de l'autre et non l'une à côté de l'autre. A chaque fois que je tente de le modifier pour arranger ça, certes elles ont l'une en dessous de l'autre mais ça met "erreur".

    Merci d'avance...

      • Lundi 27 Juin 2016 à 16:28

        Dans le css, rajoute simplement :

        width: Xpx;  /*X étant la largeur d'une flèche*/

        Dans mon exemple, mes flèches font 50px de large

      • Lundi 27 Juin 2016 à 17:20

        Perso je les mets tout simplement l'une en dessous de l'autre dans mon module ^_^

      • Lundi 27 Juin 2016 à 18:51

        Merci Nagalia ça fonctionne !

        Eliaze j'avais déjà essayé mais ça ne fonctionnait toujours pas.

    129
    Lundi 5 Février 2018 à 21:43

    C'est super ! Merci beaucoup c'est très bien expliqué.

    130
    Samedi 6 Octobre 2018 à 20:14

    Merci beaucoup pour ces codes, compréhensibles et efficaces.^^

    131
    JF
    Mardi 27 Août 2019 à 15:57

    Bonjour,

    J'ai utilisé le code qui marche très bien (juste pour remonter et avec une flèche perso), mais au bout d'un moment l'image disparait et il reste un carré vide ou un carré bleu avec un point d'interrogation (ça fonctionne toujours mais sans image).

    Je ne comprend pas pourquoi.

    Cordialement,

    JFMartin

     

    132
    Lundi 9 Septembre 2019 à 12:43

    merci beaucoup pour ce tutoriel :D très bien expliqué.

    meme si au début j'avais inversé le css et le html XDD 

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :