1484 sujets

Web Mobile et responsive web design

Bonjour.

Je suis en train de refaire mon site internet (uniquement HTML5 et CSS3) et j'ai un bug insolite qui se présente.

En effet, lorsque j'utilise des liens hypertextes, ceux-ci ne sont pas cliquables dans certains cas (je vais expliquer).

- Le phénomène ne se produit que pour une configuration verticale, avec téléphone et tablette (j'ai 5 versions de présentation: téléphone vertical, tablette vertical, moniteur de base, moniteur large, moniteur très large). En position horizontale, tout va bien.

- Le phénomène empêche de cliquer sur des liens hypertexte pour toute la partie gauche de l'écran avec environ 60% de l'écran à gauche qui ne réagit pas (cela se produit sur mon téléphone, sur ma tablette, mais également sur un émulateur de téléphone dans le navigateur Brave)

- Le phénomène ne touche QUE les liens hypertextes du texte principal.

- Si un lien hypertexte s'étend sur toute la largeur de la page (en vertical toujours), le même lien n'est pas cliquable à gauche, mais est parfaitement fonctionnel dès qu'on appuie dessus depuis la droite de l'écran.

- le phénomène ne touche PAS d'autres liens : 1. logo image en haut à gauche OK 2. menu "burger" à gauche, avec liens qui apparaissent mais restent sur la partie gauche de l'écran OK.

- le phénomène est encore plus étrange (sur ma page d'accueil) pour le bas de page. J'ai 5 liens en bas de page, en partie gauche. Les 2 premiers ne sont pas cliquables (alors qu'ils sont bien programmés), alors que les 3 derniers, placés plus bas le sont.


REFLEXION PERSONNELLE POUR L'INSTANT :

En toute logique, il y a quelque chose dans ma mise en forme CSS pour les configurations verticales, qui rend la partie gauche de l'écran insensible à certaines actions.

Plus exactement, cela touche donc le texte principal et pas les parties accessoires (haut de page, menu burger, bas de page mais uniquement si ce bas de page n'est pas trop haut).

En y réfléchissant différemment, c'est comme si on appliquait une tache de peinture rendant insensible l'écran sur la partie gauche de l'écran, mais sans aller jusqu'au bout (puisque le haut et le bas ne sont pas concernés).

Avez-vous déjà rencontré une énigme pareille ?


voici le lien de ma page en test (qui en est noindex) :
https://www.insitu-valorisation.fr/index-2024.html


si vous voulez comprendre le phénomène, vous pouvez notamment :

- regarder vers le bas de l'écran, et tenter de cliquer sur la phrase "N'hésitez pas à joindre....". Pas de réaction à gauche, alors que ça fonctionne à droite.

- regarder les liens de bas de page : 2 premiers liens non cliquables, puis les 3 derniers fonctionnent




REFLEXION QUI ME VIENT EN ECRIVANT CE MESSAGE :

Le menu burger peut-il être en cause ? Ca pourrait être la zone en question, si j'y pense...
En effet, je n'ai de menu de navigation "burger" QUE pour les configurations verticales.
Modifié par AlexInSi (19 Apr 2024 - 10:31)
Je viens de tester moi-même, après ma dernière réflexion en date.

Le menu burger développé (étiré vers la droite) couvre bien la zone exacte qui rend insensible aux clics le texte placé en-dessous.


COMMENT FAIRE pour conserver ce menu burger tout en enlevant les inconvénients ?



nota bene :
ce menu burger étant d'un niveau technique trop élevé pour moi, je l'ai intégré depuis une source extérieure sur internet.
Modérateur
Bonjour,

C'est effectivement .menu qui en se positionnant au dessus des contenus capte l'interaction.

pointer-events peut-être une solution:
https://developer.mozilla.org/fr/docs/Web/CSS/pointer-events a écrit :

La propriété CSS pointer-events permet de contrôler les circonstances dans lesquelles un élément graphique peut être une cible, c'est-à-dire recevoir des évènements de la souris, du pointeur ou du doigt.

/* on retire l'interaction */
.menu {
  pointer-events: none;
}
/* on rend l'interaction au label et à la liste */
#hamburger-logo,#listeliens {
  pointer-events: auto;
}


Le padding-top:16vw pour les li, peut cacher les derniers items , peut-être voir une valeur en vh ou en em?

cdt
Modifié par gcyrillus (19 Apr 2024 - 11:16)
Meilleure solution
@GCYRILLUS :

Je vous adresse un énorme remerciement. La solution fonctionne immédiatement.
Je ne sais pas si j'aurais pu trouver cette solution facilement, voire la trouver un jour, même en épluchant toutes les ressources internet.

Il faudra que j'étudie cette propriété à terme, une fois que j'aurai terminé la mise à jour de mon site, car elle a l'air très utile.

Encore merci.

Cordialement.

sujet clos - réponse trouvée -
Modifié par AlexInSi (19 Apr 2024 - 15:17)