[Résolu] Problème de bordure rémanente intempestive après clic sur img

Problème de bordure rémanente intempestive après clic sur img [Résolu] - HTML/CSS - Programmation

Marsh Posté le 24-11-2012 à 23:48:19    

Bonsoir,
 
J'ai eu beau chercher, je ne vois pas pourquoi une cadre de pointillés (qui tire à l'infini vers la gauche) entoure deux de mes boutons après que j'aie cliqué dessus.
Il s'agit des deux boutons de validation W3C que vous trouvez en bas de mes pages, ici.
 
 
http://www.francoisnisse.be/nosite/pbbord.png
 
 
Merci d'avance.


Message édité par fnisse le 12-12-2012 à 16:21:33
Reply

Marsh Posté le 24-11-2012 à 23:48:19   

Reply

Marsh Posté le 26-11-2012 à 09:09:17    

normal, il y a un text-indent:-XXXXpx qui est collé sur ces boutons, ce code permet de cacher du texte et le remplacer par une image.
Met un overflow:hidden sur ces liens afin que la zone reste sur le lien


---------------
Blablaté par Harko
Reply

Marsh Posté le 27-11-2012 à 14:47:08    

Un très grand merci encore, Gatsu !! Tu m'avais déjà aidé précieusement il y a plusieurs mois (t'en souviens-tu ?) pour une question portant sur mon formulaire de contact ou sur une question concernant une mise en exposant dans le texte.
 
En ajoutant 'overlfow:hidden' à chacun de mes liens (je parlais des boutons W3C du bas, mais le problème était en fait présent pour les boutons du haut aussi : les boutons sociaux et les trois boutons d'agrément en haut à droite), le problème est bien réglé ! :-)
 
Je ne pouvais saisir le problème parce que si je fais mon code 'à l'ancienne', ligne par ligne, tout de moi-même ou presque, j'avais, pour cas précis, testé et plus ou moins appris une nouvelle technique.
Pour boutons W3C p. ex. (cela vaut pour tous les boutons précités en fait), il n'y a pas deux images, MAIS une seule (pour les boutons sociaux il n'y a pas quatre images, mais une seule, etc.), en vue d'alléger les temps de chargement bien évidemment.
Cette technique requérait entre autres que je procède à un positionnement de 'background' pour chaque image, ou plutôt pour chacun des boutons (placés dans une liste) et que pour chaque lien je crée un :
 
.classedulien
{  
text-indent: -999em;
direction: ltr;
overflow: hidden;
}
 
Eh bien, je n'ai pas repéré le problème seul parce que je ne pensais plus à cette propriété 'text-indent' et si je n'y pensais plus c'est que je ne la comprenais pas.
Je ne la comprenais pas dans cette fonction. Pour moi il s'agit d'une propriété de texte, de retrait d'alinéa pour la première ligne d'un bloc de de texte, d'un paragraphe.
Sans cette propriété dans chaque lien de bouton, tout partait en couille pourtant.
 
EDITION : en relisant ta réponse, Gatsu, je pense que je comprends mieux. C'est que, tel que mon code est écrit, je devrais normalement voir du texte. J'ai par exemple :

Code :
  1. <li class="soce"><a class="yo" href="contact.php">Me contacter</a></li>


Si je pose une image de fond sur '<a>' comme je le fais, je devrais encore normalement devoir lire le texte puisqu'il s'agit bien d'une balise de texte. 'Text-indent' me permet donc de 'tricher' pour faire disparaître le texte en l'envoyant en Chine (à -9999).
Kapish. J'avais en fait déjà compris ça, mais ça a dû m'échapper en chemin. Par contre, est-ce propre comme technique ou est-ce plutôt du bricolage ?
 
En plus de régler mon problème, dont je ne maîtrise pas bien la question puisque 'text-indent' et cette technique de plusieurs boutons pour une seule image m'échappe en partie, tu m'apprends quelque chose : je n'utilisais que la valeur par défaut d''overflow' (c'est-à-dire 'visible', que je n'écrivais pas) et 'auto' si je voulais des barres de défilement (à l'époque, quand c'était encore chouette ;> ).
Je n'ai pas de texte qui dépasse puisque je règle bien mes 'width' ou 'height' sur 'auto' lorsqu'il le faut.
Donc là, sur l'ensemble de mon CSS, je n'ai qu'une ligne d'overflow, en l'occurrence cet 'hidden' que tu portes à ma connaissance !
 
Vraiment parce que j'aime comprendre, pour apprendre et retirer le max. de ce que l'on me dit :
comment pourrais-je maintenant faire pour qu'il n'y ait pas du tout de bordure autour de mes boutons lorsque j'ai cliqué dessus ? En effet, la longue et infinie bordure n'est plus, mais une petite bordure qui entoure les boutons est toujours présente.


Message édité par fnisse le 29-11-2012 à 13:43:20
Reply

Marsh Posté le 29-11-2012 à 13:43:35    

UP!

Reply

Marsh Posté le 29-11-2012 à 14:26:54    

Laisse cette bordure, c'est mieux en terme de navigation, quand un utilisateur navigue au clavier sur ton site, au moins il voit là ou il est. C'est très important en terme d'accessibilité.
 
Mais si tu n'en a rien à foutre des gens qui naviguent au clavier tu peux mettre un outline:none sur tes éléments


---------------
Blablaté par Harko
Reply

Marsh Posté le 29-11-2012 à 14:33:55    

Un grand merci Gatsu !
Je laisserai donc les choses en l'état et tu m'apprends deux choses pour le prix d'une !
 
Le débat est clos, alors. Ce sujet peut être fermé !  

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed