-
Flèches monter / descendre
Bonjour ! Petite astuce pour mettre des flèches qui vous permettront de monter ou de descendre plus rapidement de votre page. Le code est en deux parties, une HTML et une CSS.
Partie HTML.
<p><a title="#footer" href="#footer"><img id="id1" src="FLÈCHE BAS.PNG" alt="" /></a> <a title="#top" href="#top"><img id="id2" src="FLÈCHE HAUT.PNG" alt="" /></a></p>
Ce code HTML est à coller dans le code source (<>) d'un module simple, ou dans les statistiques, ça marche aussi.
• En rouge: les identifiants, j'ai noté id1 et id2, vous pouvez changer, mais dans ce cas, il faudra noter ces mêmes identifiants dans le code CSS plus tard.
• En rose: adresses URL de vos images (flèches), une qui part vers le bas et l'autre vers le haut.
• En vert: le titre / nom qui apparaîtra au survol de l'image (vous pouvez noter ce que vous voulez "monter", "top"...).Partie CSS.
#id1{position: fixed;
right: 5px;
bottom: 10%; }
#id2{position: fixed;
right: 5px;
bottom: 20%; }• En rouge, on retrouve bien les mêmes identifiants utilisé dans le code HTML.
• En vert, la position fixed permet à vos images de rester fixe sur votre blog. Elles ne bougeront pas en cas de scroll, et donc seront toujours visibles.
• En rose : la position des flèches sur votre blog, right par rapport au bort droit et bottom du bas. Vous pouvez mettre les valeurs en % ou en px.Une fois les deux parties installées, vos flèches Monter/Descendre sont fonctionnelles. Vous pouvez également les personnaliser, comme les rendre plus discrètes par exemple en jouant sur l'opacité.
#id1{position: fixed;
right: 5px;
bottom: 20px;
opacity: 0.3;}
#id2{position: fixed;
right: 5px;
bottom: 70px;
opacity: 0.3;}
#id1:hover {opacity: 1;}
#id2:hover {opacity:1;}Les flèches auront une opacité de 0.3 (légèrement transparente) et au survol (:hover), une opacité de 1, soit totalement visible.
Où trouver des flèches ?
Voilà le tuto est terminé, j’espère qu'il vous sera utile !
Tags : Flèches, fleches monter, descendre
-
Commentaires
Merci beaucoup pour ces explications claires et précises !
Au passage, j'adore le design de ton blog.
Vous devez être connecté pour commenter
Bonjour !
Je tenais à te remercier pour les codes que tu nous donne car ça m'a vraiment aidé ! Surtout pour les flèches, là, je n'y arrivais pas. Je sais pas ce que je faisais de mal mais zut quoi. Alors que là, c'est allé tip top. C'est magnifique je suis trop contente merci beaucoup !
J'ai tout de même une question, tu les trouves où les images des flèches ? Sur internet tout bêtement ou il y a un endroit aussi pratique que ton blog ?
Bonne soirée/ journée !
Bonjour !
De rien, contente si l'article a pu t'aider :) (j'avoue c'est pratique de les avoir sur son blog ^.^)
Pour les flèches je les trouve directement sur google image ou sur ce site.
Bonne soirée !
Ah merci c'est super gentil de ta part ! Merci vraiment beaucoup