[Sujet Déplacé] Delimitation zone cliquable Mobile

Vos requêtes concernant Mozilla Firefox, le navigateur Gecko alternatif, ne trouvèrent point de réponses lorsque vous cherchâtes ? Toute l'équipe Geckozone est prête à vous aider.

Modérateurs : myahoo, nico@nc, Mori, jpj

exen
Arias
Messages : 5
Inscription : 03 sept. 2018, 16:08

[Sujet Déplacé] Delimitation zone cliquable Mobile

Message par exen »

[Sujet Déplacé]viewtopic.php?f=32&t=138975


Bonjour à tous,

Voila, en ce moment je fait des boutons pour interface mobile sur une page web, et je me retrouve face à un problème tout bête.

La délimitation des zones cliquables sous les navigateurs. Je m'explique.

Quand on pose le doigt sur un bouton sous FireFox on voit apparaitre la zone cliquable en gris, et je cherche à faire disparaitre cette fameuse zone grise.
Par exemple voici une page :
Image

Quand on clique dessus voila ce que ça donne sous chrome, je l'ai entouré en rouge, mais sous FireFox cette même zone serra grise:
Image

Ce que je cherche à faire, c'est faire disparaitre cette fameuse Zone qui apparait, je l'ai entouré en rouge.

Avez vous une idée, pour éviter ceci ?

Merci d'avance pour vos réponses.
Dernière modification par exen le 03 sept. 2018, 21:40, modifié 1 fois.
Avatar de l’utilisateur
chriss..
Varan
Messages : 1181
Inscription : 13 nov. 2011, 23:15

Re: Delimitation zone cliquable Mobile

Message par chriss.. »

bonjour,
peut tu donner le code ?

lire http://css.mammouthland.net/boutons-en-css-rollover.php
ou encore ceci à "bouton simple" https://openweb.eu.org/articles/bouton_css
--
Christian....
exen
Arias
Messages : 5
Inscription : 03 sept. 2018, 16:08

Re: Delimitation zone cliquable Mobile

Message par exen »

Déjà merci pour ta réponse.
Je n'ai rien contre te donner le code maquette, même si c'est totalement inutile, vu que c'est un problème récurrent.
C'est à dire qu'il se produit sur tout les liens du net, de toutes les pages web quand tu pose le doigt dessus depuis un smartphone.

Code : Tout sélectionner


<!DOCTYPE html>
<html lang="fr">

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<title>Pages Test TMP OCRM</title>

<!-- my css include -->
<script defer src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>

<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- LE CSS 
<META HTTP-EQUIV="Refresh" CONTENT="8" /> -->

<style type="text/css">

html body{
  margin: 0;
  background-color: black;
}


/*   GRID   */

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: 100px 100px;
  grid-gap: 10px;
  padding: 10px;
}

/*   BOUTON   */

.bouton  {
  display: flex;
  justify-content: space-around;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.8em;
  width:3.5em;
  height: 3.5em;
  text-align:center;
  background: linear-gradient( 
    #ccc6c3 0%,
    #000 100%); 
  border-radius:15px;
  box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
}

.abtn{
    font-size: 0.8em;
    color:white;
    opacity: 0.85;
    font-weight: bold;
    text-decoration:none;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1.4em;
    
}

.abtn2{
    font-size: 0.8em;
    color:white;
    opacity: 0.85;
    font-weight: bold;
    text-decoration:none;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0.8em;
}

</style>

</head>


<body>

<!--    GRID    -->

<div class="grid-container">

  <div class="item1">
    <div class="bouton">
        <a class="abtn2" href="#">Bouton bouton</a>
    </div>
  </div>

  <div  class="item2">
    <div class="bouton">
        <a class="abtn" href="#">Bouton</a>
        
    </div>
  </div>

  <div class="item3">
    <div class="bouton">
        <a class="abtn" href="#">Bouton</a>
    </div>
  </div>

  <div class="item4">
    <div class="bouton">
        <a class="abtn" href="#">Bouton</a>
    </div>
  </div>

  <div class="item5">
    <div class="bouton">
        <a class="abtn" href="#">Bouton</a>
    </div>
  </div>

  <div class="item6">
    <div class="bouton">
        <a class="abtn" href="#">Bouton</a>
    </div>
  </div>

  <div class="item7">
    <div class="bouton">
        <a class="abtn" href="#">Bouton</a>
    </div>
  </div>

  <div class="item8">
    <div class="bouton">
        <a class="abtn" href="#">Bouton</a>
    </div>
  </div>

</div>

</body>
</html>


Avatar de l’utilisateur
chriss..
Varan
Messages : 1181
Inscription : 13 nov. 2011, 23:15

Re: Delimitation zone cliquable Mobile

Message par chriss.. »

ah ok...
j'avais compris que c,était juste dans ton code..
as tu essayé "Redémarrer avec les modules désactivés.." ? (dans options > aide)
--
Christian....
exen
Arias
Messages : 5
Inscription : 03 sept. 2018, 16:08

Re: Delimitation zone cliquable Mobile

Message par exen »

je n'ai pas de modules actif, de plus il est de base comme monsieur et madame tout le monde.
J'ai fait des testes sur différents mobiles, différentes build Android, et le problème est toujours là, à chaque fois.
La seul fois ou j'ai réussit à ne pas avoir se comportement c'est en testant une gesture de hammerjs.

En gros tu peut tester avec ton smartphone, tu lance Firefox tu vas sur un site et tu appuie sur un lien, tu reste un peut et tu vois apparaitre ce cadre gris de délimitation de zone cliquable.

Et mon but est qu'elle n'apparaisse pas.
Avatar de l’utilisateur
pepersan
Tyrannosaurus Rex
Messages : 3258
Inscription : 31 janv. 2017, 10:57

Re: Delimitation zone cliquable Mobile

Message par pepersan »

Bonsoir

le forum dédié est ici : viewforum.php?f=32

Firefox 124 -Linux Mint 20 Ulyana

Pour mettre en [Résolu] éditer le premier message du post, en cliquant sur le crayon blanc dans un carré bleu, modifier le titre, en y ajoutant [Résolu]

Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 20 invités