Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1675 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°2165382
fnisse
Posté le 24-11-2012 à 23:48:19  profilanswer
 

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
mood
Publicité
Posté le 24-11-2012 à 23:48:19  profilanswer
 

n°2165435
gatsu35
Blablaté par Harko
Posté le 26-11-2012 à 09:09:17  profilanswer
 

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
n°2165610
fnisse
Posté le 27-11-2012 à 14:47:08  profilanswer
 

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
n°2166028
fnisse
Posté le 29-11-2012 à 13:43:35  profilanswer
 

UP!

n°2166033
gatsu35
Blablaté par Harko
Posté le 29-11-2012 à 14:26:54  profilanswer
 

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
n°2166034
fnisse
Posté le 29-11-2012 à 14:33:55  profilanswer
 

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é !  


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
Problème d'affichage IE/OperaZone réactive sur une image. Comment ?
D7. Un ListBox de Jedi ne répond pas au clic.Problème formule à plusieurs conditions
Probleme Warning: session_start() [function.session-start]Problème de select qui sors en erreur
Resolu :Sql : probleme de requete (Subquery returns more than 1 row)Probleme affichage entre IE et mozilla
Problème installation cygwin probléme JAVA: Interface Graphique , l’interaction des boutons
Plus de sujets relatifs à : [Résolu] Problème de bordure rémanente intempestive après clic sur img


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR