N'activer que les flèches haut bas sur PC

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu N'activer que les flèches haut bas sur PC

Message par Mat le Dim 2 Juil 2017 - 20:51

Bonjour Wink,
j'ai suivi ce tuto :
http://forum.forumactif.com/t325685-ajouter-des-boutons-haut-bas
Pour ajouter des flèches haut et bas sur mon forul Wink
Mais elle apparaissent aussi sur la version mobile Wink
Alors que sur la version mobile je veux pas qu'elle apparaissent, car une flèches haut est déja présente Wink

Merci d'avance Wink
avatar

Mat
*****

Messages : 817
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: N'activer que les flèches haut bas sur PC

Message par ◦Jay◦ le Lun 3 Juil 2017 - 7:30

Bonjour FkS_DjMat, vous pouvez mettre les flèches dans votre template overall_header pour qu'elles n'apparaissent pas sur la version mobile.

En mettant ce code dans votre template après ceci
Code:
<!-- END google_analytics_code -->

Code:
<!----fleche bas------->
 <div class="boubas"><a href="#bottom"><img src="https://illiweb.com/fa/empty.gif" class="flechedown" alt="Aller en bas" /></a></div>
  <!----fin  fleche bas------->
  <!---- fleche haut------->
<div class="bouhaut"><a href="#top"><img src="https://illiweb.com/fa/empty.gif" class="flecheup" alt="Aller en haut" /></a></div>
  <!----fin  fleche haut------->

Vous avez donc pour le moment une image vide, il faut ensuite placer l'image sur votre forum par CSS, comme ceci :

Code:
.flechedown{
width:(largeur de l'image en bas en px);
height:(hauteur de l'image en bas en px);
background:url("URL de votre image") no-repeat;}
.flecheup{
width:(largeur de l'image en haut en px);
height:(hauteur de l'image en haut en px);
background:url("URL de votre image") no-repeat;}

Et ce CSS pour placer vos images sur votre forum :

Code:
/*fleche en haut*/
.bouhaut
{
top: 175px;/*se trouvera à 175px du bord haut de l'écran*/
right: 0px;/*se trouvera à 0px du bord droit de l'écran*/
position: fixed;
z-index: 100;
}
/*fleche en bas*/
.boubas
{
top: 406px;/*se trouvera à 406px du bord haut de l'écran*/
right: 0px;/*se trouvera à 0px du bord droit de l'écran*/
position: fixed;
z-index: 100;
}

Vous pouvez bien entendu supprimer vos anciennes flèches.

Bien à vous.





avatar

◦Jay◦
Créactif
Créactif

Masculin
Messages : 3827
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: N'activer que les flèches haut bas sur PC

Message par Mat le Lun 3 Juil 2017 - 12:43

Alors merci Wink, mais ça ne marche pas (enfin si elle fonctionnent) mais le problèmes c'est qu'elle sont en haut à gauche, et elles créent un espace entre la toolbar, et le "reste du forum" Wink
Je voudrais bien, si possible, les avoirs en bas à droite Wink, comme sur l'ancien tuto Wink
avatar

Mat
*****

Messages : 817
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.

Résolu Re: N'activer que les flèches haut bas sur PC

Message par ◦Jay◦ le Lun 3 Juil 2017 - 16:06

Quel est le forum concerné ?


avatar

◦Jay◦
Créactif
Créactif

Masculin
Messages : 3827
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: N'activer que les flèches haut bas sur PC

Message par Mat le Lun 3 Juil 2017 - 16:14

Celui-ci :
http://bit.ly/2oPwMrS
Mais j'ai enlevé le code, vu qu'il causais un bug Wink
Dois-je le replacer Wink?
avatar

Mat
*****

Messages : 817
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: N'activer que les flèches haut bas sur PC

Message par ◦Jay◦ le Lun 3 Juil 2017 - 16:16

Oui, remettez tout que je puisse voir mais si vous n'avez pas touché au css que j'ai donné, les flèches devrait être à droite...


avatar

◦Jay◦
Créactif
Créactif

Masculin
Messages : 3827
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: N'activer que les flèches haut bas sur PC

Message par Mat le Lun 3 Juil 2017 - 16:26

Ok, juste une petite question, je dois placer les liens dans quels code Wink :
Le deuxième, ou les deux Wink?
@◦Jay◦ a écrit:
Code:
<!----fleche bas------->
 <div class="boubas"><a href="#bottom"><img src="https://illiweb.com/fa/empty.gif" class="flechedown" alt="Aller en bas" /></a></div>
  <!----fin  fleche bas------->
  <!---- fleche haut------->
<div class="bouhaut"><a href="#top"><img src="https://illiweb.com/fa/empty.gif" class="flecheup" alt="Aller en haut" /></a></div>
  <!----fin  fleche haut------->

Vous avez donc pour le moment une image vide, il faut ensuite placer l'image sur votre forum par CSS, comme ceci :

Code:
.flechedown{
width:(largeur de l'image en bas en px); 
height:(hauteur de l'image en bas en px); 
background:url("URL de votre image") no-repeat;}
.flecheup{
width:(largeur de l'image en haut en px); 
height:(hauteur de l'image en haut en px); 
background:url("URL de votre image") no-repeat;}
avatar

Mat
*****

Messages : 817
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: N'activer que les flèches haut bas sur PC

Message par ◦Jay◦ le Lun 3 Juil 2017 - 16:37

Les liens des images ? La ou il est écrit "URL de votre image" flèche du bas à .flechedown et flèche du haut à .flecheup


avatar

◦Jay◦
Créactif
Créactif

Masculin
Messages : 3827
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: N'activer que les flèches haut bas sur PC

Message par Mat le Lun 3 Juil 2017 - 16:46

@◦Jay◦ a écrit:Les liens des images ? La ou il est écrit "URL de votre image" flèche du bas à .flechedown et flèche du haut à .flecheup
Oui, c'est ce que j'ai fait alors Wink
Tout à l'heure, j'avais ajouter les urls ici aussi, à la place des icônes transparentes Wink :
Code:
      <!----fleche bas------->
 <div class="boubas"><a href="#bottom"><img src="https://illiweb.com/fa/empty.gif" class="flechedown" alt="Aller en bas" /></a></div>
  <!----fin  fleche bas------->
  <!---- fleche haut------->
<div class="bouhaut"><a href="#top"><img src="https://illiweb.com/fa/empty.gif" class="flecheup" alt="Aller en haut" /></a></div>
  <!----fin  fleche haut------->

Et là elles s'affichaient Wink
Mais pas comme je le voulais Wink
Mais maintenant que j'ai fait tout correctement, rien ne s'affiche Wink
Le code est en place si vous voulez jeter un oeil Wink
avatar

Mat
*****

Messages : 817
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.

Résolu Re: N'activer que les flèches haut bas sur PC

Message par ◦Jay◦ le Lun 3 Juil 2017 - 16:54

Bon, ne touchez à rien pour le moment.


avatar

◦Jay◦
Créactif
Créactif

Masculin
Messages : 3827
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: N'activer que les flèches haut bas sur PC

Message par ◦Jay◦ le Lun 3 Juil 2017 - 16:55

Copiez et collez moi votre css ici entre balise code svp.


avatar

◦Jay◦
Créactif
Créactif

Masculin
Messages : 3827
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: N'activer que les flèches haut bas sur PC

Message par Mat le Lun 3 Juil 2017 - 16:58

Voici Wink :
Code:
/**Ajouter des flèches haut et bas début*/
.flechedown{
width:(largeur de l'image en bas en px);
height:(hauteur de l'image en bas en px);
background:url("https://i.servimg.com/u/f11/19/61/23/00/flyche10.png") no-repeat;}
.flecheup{
width:(largeur de l'image en haut en px);
height:(hauteur de l'image en haut en px);
background:url("https://i.servimg.com/u/f11/19/61/23/00/flyche11.png") no-repeat;}
/*fleche en haut*/
.bouhaut
{
top: 175px;/*se trouvera à 175px du bord haut de l'écran*/
right: 0px;/*se trouvera à 0px du bord droit de l'écran*/
position: fixed;
z-index: 100;
}
/*fleche en bas*/
.boubas
{
top: 406px;/*se trouvera à 406px du bord haut de l'écran*/
right: 0px;/*se trouvera à 0px du bord droit de l'écran*/
position: fixed;
z-index: 100;
}
/**Ajouter des flèches haut et bas fin*/
avatar

Mat
*****

Messages : 817
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: N'activer que les flèches haut bas sur PC

Message par ◦Jay◦ le Lun 3 Juil 2017 - 17:04

Supprimez absolument tout le CSS que vous avez mis pou ces flèches et mettez celui-ci :

Code:
/**Ajouter des flèches haut et bas début*/
.flechedown{
width:38px;
height:48px;
background:url("https://i.servimg.com/u/f11/19/61/23/00/flyche10.png") no-repeat;}
.flecheup{
width:38px;
height:48px;
background:url("https://i.servimg.com/u/f11/19/61/23/00/flyche11.png") no-repeat;}
/*fleche en haut*/
.bouhaut
{
top: 650px;/*se trouvera à 175px du bord haut de l'écran*/
right: 0px;/*se trouvera à 0px du bord droit de l'écran*/
position: fixed;
z-index: 100;
}
/*fleche en bas*/
.boubas
{
top: 688px;/*se trouvera à 406px du bord haut de l'écran*/
right: 0px;/*se trouvera à 0px du bord droit de l'écran*/
position: fixed;
z-index: 100;
}
/**Ajouter des flèches haut et bas fin*/


avatar

◦Jay◦
Créactif
Créactif

Masculin
Messages : 3827
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: N'activer que les flèches haut bas sur PC

Message par Mat le Lun 3 Juil 2017 - 17:07

Merci Wink
Ca fonctionne Wink
Voici le résultat pour ceux qui voudrais appliquer le tuto Wink :


Encore un grand merci Jay Wink
avatar

Mat
*****

Messages : 817
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum