rectangle en pointillé inopiné lors d'un clic [Résolu]

[r0d]

Bonjour,

je suis en train de développer un site pour un ami. C'est de l'amateur, je ne suis pas développeur web.
Bien qu'il soit en cours de développement, ce site est déjà en ligne ici: http://www.casamustaphadelsur.com/index.html

Comme vous pouvez voir sur le site, ou sur l'image que j'ai ajouté en pièce jointe, lorsque l'on clique sur un élément du menu, il aparait un rectangle en pointillés bleu autour du texte et cela est du plus mauvais effet, m'est avis.

Voici le code css du menu:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#menu 
{
  font-family: "WorstveldSling", Helvetica, Arial, sans-serif;
  margin:0 110px 0 110px;
  height:28px;
  background:url(images/menu_bckg.jpg) no-repeat;
  padding:17px 0 0 15px;
}
 
#menu a 
{
  color:#6bb8ff; <!-- 1 -->
  font-size:28px; 
  padding:5px 20px; 
  text-decoration:none; 
  text-transform:lowercase;
}
 
#menu a:hover 
{
  background:url(images/menu_over.gif) bottom center no-repeat;
  background-position: center;
}

note 1: ça c'est la couleur du texte du menu, et c'est également la couleur du rectangle honni. Ce doit être une piste à suivre j'imagine.

et le html correspondant:

Code :

1
2
3
4
5
6
7
8
9
<div id="menu">
      <a href="index.html">home</a>            
      <a href="donde.html">¿donde?</a>            
      <a href="casa.html">la casa</a>            
      <a href="pueblo.html">el pueblo</a>            
      <a href="alrededores.html">alrededores</a>
      <a href="precios.html">precios</a>
      <a href="contacto.html">contacto</a>
</div>

Ma question est: comment faire pour que n'aparaisse pas ce rectangle en pointillés bleu autour du texte lorsque je clique sur un élément du menu?

Note: j'obtiens le même comportement sous firefox et IE8 (je n'en ai pas testé d'autres pour l'instant).

Merci par avance.

[ornitho13]

Salut,

tu as ces pointillés car il y a un focus sur le clic. Sur Chrome et Safari, il n'y a pas ce comportement, c'est propre à Firefox et IE.

Il me semble qu'il faille utiliser la propriété outline pour enlever ces pointillés:

Code :

1
2
 
outline: 0;

outline est la bordure entre la limite de l'élément html et le margin.

[Bisûnûrs]

Il reste quand même déconseillé de les enlever, car ça gênerait l'expérience de la navigation au clavier.

[adiGuba]

Salut,


Il y a une manière propre de les enlever sans impacter le focus (et donc la navigation clavier) :

Bordure (focus) après un click de souris


a++

[r0d]

Ok, merci beaucoup pour vos réponses

Mais du coup là je me trouve devant un choix cornellien. Car je trouve ce rectangle vraiment très moche. Et du coup, j'ai testé la solution avec outline:0;, et il m'apparait clairement que c'est beaucoup plus joli ainsi. Mais d'un autre côté, je ne souhaite pas perdre en accessibilité. Et effectivement, la navigation avec la touche de tabulation est impossible sans cet affreux rectangle.

Du coup tout un tas de questions surgissent, tel la prolifération incontrôlée de miasmes s'autogénérant spontanément:
1. Du coup, comment ça fonctionne sous Chrome et autres? (je ne peux pas tester ici, je le ferai ce soir chez moi)
2. Ne pourrait-on pas utiliser ce outline:0; mais en ajoutant du code pour faire apparaitre un rectangle lorsqu'on utilise la touche de tabulation?
3. Je constate que, lorsqu'on utilise la navigation avec la touche de tabulation, le "hover" n'est pas activé. Vous voyez ce que je veux dire? Que lorsqu'un élément du menu est sélectionné en utilisant la touche tab, le <a> n'est pas considéré en état de "hover". Est-ce normal? Ne peut-on pas trouver une solution de ce côté-là?

Encore merci pour vos réponses.

[r0d]

adiGuba, je n'avais pas vu ta réponse avant de poster ce précédent post.
Cette solution est parfaite, me semble-t-il.
@ tous.

[adiGuba]

Heu... Je ne sais pas si tu as vu mon message, mais une solution propre qui ne casse pas la navigation clavier y est indiqué

a++