[Résolu] Border: none;

Bonjour,

Petit problème d'esthétique simplement...

Pour un lien sur une image, on peut supprimer la bordure par

border: none;

dans le css ou

border="0"

dans la balise de l'image.

Cependant, j'ai constaté que lorsque je clique sur l'image (le lien), j'ouvre la nouvelle page, mais si je reviens en arrière de suite par le bouton Retour du navigateur, j'ai une ligne bleu temporaire autour de l'image tant que je n'ai pas cliqué n'importe où sur la page...

Une astuce ?

Merci

@+
Modifié par Jason (21 Jun 2012 - 23:40)

Bonjour,
Quel navigateur utilises-tu ? Ca doit être un bug d'affichage Oo

Ou alors, si ton <img/> est dans un <a>, il peut s'agir d'un :focus, :active ou :visited sur ta balise <a>. Rien de tel ?

Bonjour,

Merci pour vos réponses...

a écrit :
Gothor : Quel navigateur utilises-tu ?

Actuellement FF, mais je veux que ce soit ok pour les autres aussi...

a écrit :
Ten : Ou alors, si ton <img/> est dans un <a>,

C'est la cas, sinon, je n'aurais pas ce problème.

Mais, je crois que j'ai trouvé, pouvez-vous confirmer ?

J'ai noté dans mon css « Transparent » et ça a l'air de fonctionner pour firefox...

a.type8:link {text-decoration: none; color: transparent;}
a.type8:visited {text-decoration: none; color: transparent;}
a.type8:hover {text-decoration: none; color: transparent;}
a.type8:active {text-decoration: none; color: transparent;}

@+

Bonjour,

Ce n'est pas un bug mais un comportement normal de Firefox.
Essayer de le corriger créera des problèmes d'accessibilité. Par exemple la solution trouvée consiste à rendre le texte transparent, CE QUI EST UNE PUTAIN DE BONNE IDÉE POUR EMPÊCHER LES VISITEURS DE LIRE LE TEXTE.

En passant, un peu d'optimisation. Le code suivant:

a.type8:link {x; y;}
a.type8:visited {x; y;}
a.type8:hover {x; y;}
a.type8:active {x; y;}

peut s'écrire plus simplement:

a.type8 {x; y;}

La seule différence c'est que ça prendra aussi en compte l'état :focus (oublié dans ton code je pense, sans doute une erreur d'inattention).
Modifié par fvsch (21 Jun 2012 - 10:08)

En l'occurrence ta solution fonctionne parce que la couleur des bordures est héritée de la déclaration color : les bordures sont toujours là, mais transparentes...

Plus probable, mets ton border: 0; sur ton .type8 . Tu éviteras le problème d'accessibilité évoqué, bien que la bordure soit là pour signaler le lien sur l'image ( ce qui est utile ... ).

En fait la bordure signalée qui apparait au clic ou au retour sur la page n'est pas un border. C'est un indicateur de focus, qui est implémenté différemment dans chaque navigateur et activé ou non avec une logique propre à chaque navigateur. Le mieux est de ne pas s'en soucier, car c'est quand on bidouille du code CSS pour s'en débarrasser qu'on crée tout un tas de défauts d'accessibilité. Un peu de lâcher-prise, que diable!

Bonjour,

Merci pour vos réponses...

a écrit :
Par exemple la solution trouvée consiste à rendre le texte transparent,

Quel texte ?
Le lien est sur une image... Donc il n'y a aucun texte à lire... !!!

a écrit :
En passant, un peu d'optimisation. Le code suivant:

C'est plus simple, mais je préfère garder mon code si un jour je veux modifier un des éléments...

a écrit :
l'état :focus (oublié dans ton code je pense, sans doute une erreur d'inattention).

Je ne connais pas tout... J'ai vu passer cet etat "focus" ce matin dans un tuto que tu as d'ailleurs écrit...
Mais je ne me suis pas attardé... Ça consiste en quoi ce Focus ?

a écrit :
En l'occurrence ta solution fonctionne parce que la couleur des bordures est héritée de la déclaration color : les bordures sont toujours là, mais transparentes...

Le principal est de ne plus avoir cette bordure...

a écrit :
bien que la bordure soit là pour signaler le lien sur l'image ( ce qui est utile ... ).

En général pour voir un lien, on se base le plus souvent au changement de curseur au passage sur l'élément...

Merci

@+
Modifié par Jason (21 Jun 2012 - 12:04)

Jason a écrit :
C'est plus simple, mais je préfère garder mon code si un jour je veux modifier un des éléments...

Il est vrai qu'il est plus long de rajouter une ligne de code quand on veut modifier un seul élément que de faire 3 copier/coller quand on veut en modifier plusieurs...

a écrit :
Ten : Plus probable, mets ton border: 0; sur ton .type8

a écrit :
fvsch : peut s'écrire plus simplement:

a.type8 {text-decoration: none; border: 0;}

Désolé, si je simplifie, ça ne fonctionne pas... J'ai toujours la bordure en retour de page du navigateur...

Merci
Modifié par Jason (21 Jun 2012 - 12:55)

Jason a écrit :
Quel texte ?
Le lien est sur une image... Donc il n'y a aucun texte à lire... !!!

Tes images ont forcément un texte alternatif, à plus forte raison s'il s'agit de liens. Autrement c'est un gros défaut d'accessibilité (et plus généralement de robustesse de ton code).

Un scénario pas tellement tiré par les cheveux: a) tu as déclaré la couleur du texte à color:transparent, b) pour une raison quelconque (erreur de code, problème de connectivité en 3G, réseau poussif ou momentanément encombré, affichage des images bloqué ou désactivé par l'utilisateur ou un proxy...) l'image ne peut pas être affichée, et le navigateur affiche le texte alternatif à la place, c) ce texte est transparent et le lien est donc parfaitement invisible.

Au sujet du texte alternatif, si tu ne connais pas encore bien la question, on peut lire Bien utiliser le texte alternatif.

Jason a écrit :
Ça consiste en quoi ce Focus ?

C'est l'état que reçoivent certains éléments qui ont le focus lors de la navigation au clavier (sur un lien ou un bouton), lors du clic dans un champ texte, etc. Le focus c'est un état de sélection de l'élément qui permet d'agir sur cet élément directement (via une touche du clavier telle que Entrée ou Espace pour activer un lien ou un élément de formulaire, par exemple).

Jason a écrit :
Le principal est de ne plus avoir cette bordure...

Non.

Si ton seul objectif est de virer la bordure, ok, c'est le principal.
Si tu as aussi et même surtout comme objectif de réaliser un site web de qualité, alors non, ce n'est pas le principal, c'est même un détail négligeable et les méthodes pour le «corriger» créent des problèmes d'accessibilité majeurs qui nuisent fortement à la qualité du site web réalisé.

Bien sûr chacun poursuit les objectifs qui lui chantent.
Modifié par fvsch (21 Jun 2012 - 14:26)

a écrit :
Tes images ont forcément un texte alternatif,

Dans ce cas précis, oui, pour indiquer le retour à la page d'accueil...
On a pas forcement besoin de remplir un alt en fonction du contexte et du texte entourant...
Mais ça tu le sais déjà... Auquel cas le alt sera vide.

a écrit :
a) tu as déclaré la couleur du texte à color:transparent,

J'ai déclaré une couleur Transparente pour tester après avoir parcouru plusieurs page pour info...
Ça ne veut pas dire que ça restera comme ça en fonction des réponses à ma question.

a écrit :
b) pour une raison quelconque

Ne me dit pas que tout le monde calcule la moindre panne d'internet en créant les pages web...

a écrit :
c) ce texte est transparent et le lien est donc parfaitement invisible.

Le principal, c'est de faire disparaitre la bordure inesthétique... Si le texte alternatif est visible, tant mieux, et sinon tant pis...

a écrit :
C'est l'état que reçoivent certains éléments...

Merci beaucoup pour cette explication claire...

a écrit :
Si ton seul objectif est de virer la bordure,

Je suis prêt à écouter toute proposition me permettant de cacher cette bordure en gardant le texte alternatif visible...

Merci

@+
Modifié par Jason (21 Jun 2012 - 17:32)

Jason a écrit :
b) pour une raison quelconque

Ne me dit pas que tout le monde calcule la moindre panne d'internet en créant les pages web...
Les exemples que je donnais ne se limitent pas à des pannes franches, mais plus largement aux aléas du développement web, de l'administration de serveurs, de la connectivité, de TCP/IP et HTTP, et toutes autres raisons qui peuvent pousser un User Agent ou un User à afficher le texte alternatif plutôt qu'une image.

Les pros prennent effectivement ces paramètres en compte.

Jason a écrit :
Je suis prêt à écouter toute proposition me permettant de cacher cette bordure en gardant le texte alternatif visible...

Il y a moins pire mais ça reste toujours problématique côté accessibilité, donc je ne mentionne même pas la «solution» en question. Elle se trouve ici ou là sur le Web, dans les forums, etc., et je laisse à chacun la responsabilité de la promouvoir ou non. Moi, c'est non.

OK, merci quand même d'avoir passé du temps à me répondre...

Hop, pour se debarasser de la bordure inesthetique, un bon compromis est de remplacer la bordure inesthétique par une bordure esthétique et clairement identifiable. (Celle de :active ou :focus, celle par défaut sur le lien étant tout à fait dispensable)
Sinon, comme fvsch, lâcher prise. On a souvent plein de problèmes plus grave niveau graphisme.

Bonjour,

a écrit :
remplacer la bordure inesthétique par une bordure esthétique

L'image en question est un bouton Retour, avec coins arrondis et transparence...
J'imagine sans peine que " l'esthétique " d'une bordure volontaire et donc rectangulaire ne sera pas au rendez-vous...

@+