26744 sujets

CSS et mise en forme, CSS3

Bonjour à tous et à toutes,

Nous avons un site e-commerce, sous Prestashop 1.6 qu'on passe, sur un autre serveur, sous Prestashop 1.7.
En ce moment, je personnalise un thème que nous avons acheté.
Pour ce faire, je passe par une sorte de Page Builder (Ap Hook Builder) qui fonctionne avec le thème.
A droite de notre logo, j'ai 3 icônes/boutons :
- Recherche
- Se connecter/Créer un compte
- Panier

Bizarrement, les 2 dernier(e)s boutons/icônes, ne fonctionnent pas (ils/elles ne sont pas cliquables). J'ai donc posé la question du pourquoi à celui qui a conçu le thème.

En attendant sa réponse, et comme je peux le faire avec ce page builder, j'ai créé un bouton en HTML brut pour le bouton Se connecter.
Je vous la fais courte, j'ai repris le lien où, quand on clique dessus, ça affiche une popup où on choisi soit de se connecter, soit de créer un compte. J'ai aussi repris l'icône (en SVG) silhouette.
Bref, j'arrive à afficher mon bouton/icône et que ça soit cliquable. Problème, l'icône est énorme (je vois que le haut de l'icône tellement elle est grosse Smiley murf ).
Pas grave, je mets un width:17px; (soit la taille de l'icône initiale) en direct, grâce à la console de dév de Firefox (ou Chrome, c'est quasiment la même).
Le problème que j'ai c'est que dès que je règle la taille (que je mets un width:17px;), l'icône/le bouton n'est plus cliquable.
Est-ce que vous sauriez pourquoi ? Et surtout comment faire pour que ça soit cliquable quelle que soit la taille ?

D'avance merci pour vos réponses.
Bonne journée Smiley cligne
Modifié par spip93 (18 Jun 2019 - 16:38)
Administrateur
Bonjour,

10 raisons possibles sans voir le DOM dans les Devtools Smiley decu
Pour défricher :
- est-ce que le code HTML de ta page est valide W3C ?
- est-ce que le SVG a un attribut viewport (euh viewBox, mal réveillé…) ?
- c'est quel genre d'utilisation de SVG : inline ou externe, sprite avec symbols, autre ?
- avec les Devtools en survolant ton élément dans le DOM, l'élément est mis en valeur dans ta page (rectangle bleu sur toute sa surface, marges, etc) : qu'est-ce qui change entre les 2 états cliquable / pas cliquable ? Est-ce qu'il y a des ::pseudos, des éléments pouvant le recouvrir à proximité, etc ?
Une bonne lecture sur les bonnes pratiques en matière de SVG https://la-cascade.io/comment-travailler-avec-des-icones-en-svg/ à partir de "Apprendre un peu de SVG" par le bien connu par ici Florens V. Smiley smile
Meilleure solution
C'est bon je viens de résoudre le problème.
Les icônes en question sont à droite du logo. la dive qui accueille le logo prend toute la largeur et en fait quand je réduisais mon icône, celle-ci passait sous la div du logo.
Le gars qui avait créé le thème avait mis un z-index à la div du logo.
J'ai enlevé le z-index et tout est rentré dans l'ordre. Les icônes sont (re) passées au-dessus de la div du logo et sont redevenues cliquables.
Tu avais raison Felipe, c'était bien des éléments pouvant le recouvrir à proximité.

Merci pour ta réponse
Bonne journée Smiley cligne