Bouton Wagrid avec une image

Hello Hllade (ça fait longtemps que je n'ai pas posté, mais je reste fière au forum)

Je ne trouve pas de solution, même dans le forum Intuisphere. En fait je veux mettre des boutons non pas avec du texte ou des couleurs mais avec une image.
Je précise que j'utilise le Bouton Grid, y a t il un Style qq chose à faire ?

dans le Head de la page j'ai un truc qui commence par :

Code:


/* mettre un style par bouton */
<style>
.lebouton1{
 position: absolute;  /*les .picto-item deviennent référents*/
cursor: "pointer" !important;
height:200px; /* hauteur bouton */
background:url(/wa_files/pierre.jpg);
}.....


dans le CSS du bouton je mets bien "lebouton1"
La hauteur du bouton est prise en compte mais pas le background. J'y perd mon latin (perdu depuis longtemps)

En espérant que ton expertise m'aide :-)

Bonjour mgranger

Je reviens un petit peu plus tard (après le repas) et je vais t'expliquer ça  

@ +

Je viens de voir sur intuisphere que tu avais réussi ton bouton avec image.
As-tu toujours besoin de mon aide ?

Et j'ai vu ton autre question pour le style des boutons, c'est juste que tu as des fonctions en plus maintenant avant tu avais 3 tailles à choisir mais maintenant tu peux dimensionner et personnaliser ton bouton complètement à ton choix hauteur largeur arrondi et taille de police. Que du plus

Alors, je viens de réussir mais c'est du bricolage pour l'instant : voici le code mais j'ai quelques problèmes étranges

Code:


.lebouton1:hover:after,
.lebouton1:focus:after {
  content: "ICI VOUS DECOUVREZ\A \A UN SUPER GARS \A MAIS MEFIANCE \A sa jolie femme m'a dit que c'est un voyou ";  /* mon texte */
  position: absolute;
  left: 0;
transform: translate(80px, -120px);

 z-index: 10000; /* pour s'afficher au dessus des éléments en position relative */
padding: 15px 15px;
background: white;
color: #3d3d3d;
border-radius: 4px;
border: double;
border-color: #000;
font-size: 14px;
font-family: "Libre Franklin";

max-width : 400px;
min-width: 400px;
white-space: break-spaces;
}

@media (max-width: 700px){
.texte2:hover:after,
.texte2:focus:after {
  display: none;
  }
}
</style>

<style>
.lebouton2{
  position: absolute;  /*les .picto-item deviennent référents*/
 cursor: "pointer" !important;

height:150px; /* hauteur bouton */
/* background-color: transparent !important; */
background-image:url('/wa_files/fred.jpg') !important;
background-repeat: no-repeat;
}

/* on génère un élément :after lors du survol et du focus :*/

.lebouton2:hover:after,
.lebouton2:focus:after {
  content: "Là c'est un autre\A \A il fait aussi parti des cambrés \A c'est un club privé et confidentiel ";  /* mon texte */
  position: absolute;
  left: 0;
transform: translate(80px, -120px);

 z-index: 10000; /* pour s'afficher au dessus des éléments en position relative */
padding: 15px 15px;
background: white;
color: #3d3d3d;
border-radius: 4px;
border: double;
border-color: #000;
font-size: 14px;
font-family: "Libre Franklin";

max-width : 400px;
min-width: 400px;
white-space: break-spaces;
}

@media (max-width: 700px){
.texte2:hover:after,
.texte2:focus:after {
  display: none;
  }
}
</style>


Quelque commentaires :
mettre l'image dans les fichiers du projet
ne pas la référencer en http://..... car sinon ça ne marche pas en mode test tant que l'on a pas publier

Par contre un truc bizarre :
Pour que ça marche en mode test j'ai du publier une fois
l'image 1 ne marche pas en mode test alors que la 2 marche
Sinon sur le texte de mes 2 boites blanches étrangement le premier est centré et le deuxième est à gauche.... je suppose que cela vient que le premier est un vieux bouton du projet alors que le deuxième je viens de le créer, mais je ne vois pas le rapport

Et viollou, tu as quand même remarqué que si je ne m'en sort pas je viens chez toi :-)
Si ce code arrive a être amélioré est propre, tu pourrais le mettre en "Tuto" ?

Alors avec le nouvelle éditeur de bouton ça devient très facile.
Tu fais ton bouton
Tout ce qu'il y a de plus neutre un fond gris clair uni par exemple
Tu lui donnes une class (on va changer) monbouton2
Tu vas lui donner une hauteur et largeur qui correspondra à la taille et au ratio de ton image c'est maintenant possible et c'est une très bonne chose.

Et dans le head de la page (les proriétés)
Tu vas placer ce code

Code:

<style>
.monbouton2 {
background-image:  url("/wa_files/pierre.jpg");
background-size: cover;
background-position: center;
</style>


Tu as juste à ajuster la dimension du bouton par rapport à l'image
Et si tu ne veux pas de texte sur cette image, tu ne mets rien dans le texte du bouton.
Attention ne t’affoles pas si tu vois ton bouton se rétrécir en peau de chagrin à l'instant où tu retires le texte, il suffit de luis donner à nouveau sa largeur et hauteur.

Chez moi ça fonctionne hyper bien je pense que ça devrait coller pour toi aussi
C'est propre clair et net, enfin à mon goût ...

Génial, en // j'avais trouvé Cover mais pas Center. en // il faut que je détruise et recrée le premier bouton pour avoir les mêmes "styles" --> c'est idiot de devoir faire ça

Bon en supprimant et re-créant le bouton 1 tout marche pile poil.
Me reste un truc étrange : le bouton 2 marche en mode test et pas le bouton 1 .... je cherche :-)

Tu peux donner l'adresse de la page ?

tu es rapide ;-)
https://www.yikingdo.eu/page6.html?nocache=248

Chez moi les 2 fonctionnent
Qu'est-ce qui ne fonctionnerait pas ?

Tout fonctionne bien une fois publié. Mais que je suis en mode Test de Grid, la premiere image ne s'affiche pas alors que la seconde oui.. Pas très gênant, mais ça me gène d'avoir un bug

Effectivement pierre n'est pas là même à la publication pour moi.
Tu n'as pas du faire ton import de fichier attaché en faisant ton code, l'image n'est pas trouvée.

Gagné !!!!! merci, tout semble ok, tu peux juste faire un test pour voir si tout est ok quand tu te connecte ? si ok je passe en résolu

C'est Ok je vois pierre et Fred

tu es top