[Résolu] Css background cliquable

Bonjour,

J'ai mis mon logo comme background, ça donne ça:

#header h1 {
  background: url("../img/logo.png") no-repeat scroll 0 0 transparent;
  padding-top: 67px;
}
#header h1 span{
	display:none;
}

Et HTML:

<h1>
	<a href="#">
		<span>Mon titre</span>
	</a>
</h1>

Le problème que je rencontre maintenant, c'est que le lien <a href> n'est plus activé même si j'ai appliqué le display:none sur le span seulement.

Une idée sur comment régler ça ?

Merci d'avance.
Modifié par Youn (20 Oct 2011 - 17:55)

Hello.

Une image porteuse de contenu doit se trouver dans une balise img avec un alt qui va bien. Là tu as juste un lien qui ne contient rien (en terme de CSS, du fait du display: none), donc impossible à cliquer.

Hmm.. Je vois, merci pour les éclaircissements.

Est ce qu'il n'y a pas un autre moyen pour rendre un background cliquable ?

Je ne comprends pas trop l’intérêt. Un background, c'est de la déco. Si l’élément doit être cliquable, tu utilises l’élément HTML ad hoc.

Youn a écrit :
Est ce qu'il n'y a pas un autre moyen pour rendre un background cliquable ?

Non, et si c'était le cas, ce serait une très mauvaise chose.

Quel est le problème avec le fait de mettre l'image dans le code HTML ?

a écrit :
Quel est le problème avec le fait de mettre l'image dans le code HTML ?

C'est ce que j'ai fait au début de mon intégration, après que j'ai fini on m'a dit que les images doit être en background. Par info, les images sont des textes avec une font qui n'est pas très connue (Kabel), je crois que c'est pour ça qu'on m'as demandé à les mettre comme ça.
Ces images sont:
- le logo (cliquable)
- les titres (pas besoin de <a>)
- et le texte "lire la suite" après chaque paragraphe (cliquable aussi).

Est ce qu'il y a une autre solution à envisager dans ce cas?

Merci d'avance.

Les éléments que tu cite sont à mettre absolument dans l'HTML car il font parti du contenu, aucune autre alternative.

Via ton css tu donnes à ta balise a les attribut suivants :
display: block;
height: ---px;
width: ---px

Tu choisis les dimensions du logo.

a écrit :
- les titres (pas besoin de <a>)

pourquoi tu mets le <a> dans le H1 alors?
C'est pas toi qui a créé le logo donc j'imagine, tu fais "juste" l'intégration?
Kabel c'est leur exigence?


EDIT: Le problème est que si c'est toi qui as proposé Kabel et qu'ils ont validé, c'est ton problème de leur dire que la police est pas reconnue et de refaire parce que sinon tu ne respectes pa les bonnes pratiques de codage comme on te l'a dit.
Modifié par jmlapam (20 Oct 2011 - 14:18)

Youn a écrit :
après que j'ai fini on m'a dit que les images doit être en background.

Avis à ne surtout pas écouter, à moins qu'il/elle menace de te virer pour ça ...

Si une image apporte de l'information (et un logo cliquable retour à l'accueil c'est 2 informations essentielles (*)), ce DOIT être un élément img avec un texte alternatif.
Toutes les techniques avec des images de fond posent problème d'une manière ou d'une autre ; la plus connue posant problème quand on désactive les images mais pas les CSS : écran vide !

(*) Quand un lien contient une unique image, alors forcément l'image apporte de l'information puisqu'elle "explique" la fonction du lien. Sans quoi on aurait un lien vide et donc aucune nécessité d'avoir un lien ...

Youn a écrit :
on m'a dit que les images doit être en background

Petit problème de compétence chez la personne qui t'a dit ça. J'imagine que ce n'était pas une personne spécialisée en intégration web.

De manière un texte en image ça s'intègre ainsi:

<img src="accueil-titre-choucroute.png"
     alt="Découvrez nos recettes de choucroute">

Le tout dans un lien si c'est un lien, dans un H1 ou H2 ou H3 (etc.) pour un titre, et ainsi de suite.

Placer l'image en background est une erreur. Une erreur courante, mais une erreur quand même. Les techniques utilisées pour rendre ça à peu près accessible ou indexable par les moteurs de recherche présentent toutes des problèmes d'accessibilité plus ou moins importants, donc on les évite normalement.

Fabious a écrit :
Les éléments que tu cite sont à mettre absolument dans l'HTML car il font parti du contenu, aucune autre alternative.

Pour être honnête, d'un point de vue strictement technique il y a d'autres solutions (dont celle donnée par Ehplod) mais on considère que ce sont de mauvaises pratiques si cela revient à placer un contenu (image porteuse d'information) en image de fond.

Merci pour vos réponses.
@Ehplod: Ton code a bien marché pour moi, merci.

jmlapam a écrit :
C'est pas toi qui a créé le logo donc j'imagine, tu fais "juste" l'intégration?
Kabel c'est leur exigence?

C'est comme tu as dit, je m'occupe seulement de la partie intégration, et "Kabel" était présent dans la maquette qu'on m'a fourni.

a écrit :
Avis à ne surtout pas écouter, à moins qu'il/elle menace de te virer pour ça ...

a écrit :
Petit problème de compétence chez la personne qui t'a dit ça. J'imagine que ce n'était pas une personne spécialisée en intégration web.

Ah, non la personne en question a plus d'expériences que moi qui commence à peine. Et dans ce cas, soit elle a appris des mauvais habitudes, soit c'est sa façon pour me taquiner (ou de me faire le bizutage étant nouveau dans l'agence ).

En tout cas, j'ai appris de vous aujourd'hui qu'il ne faut pas entendre n'importe qui même avec une expérience plus longue que la mienne. Il faut toujours vérifier.

Merci encore.
Modifié par Youn (20 Oct 2011 - 17:54)

On veut mettre un titre clicable.
OK.
On veut que la police soit super belle et intégré au reste du design.
OK.
La police ne passe pas sur tous les nav.
OK.

On créé une image du titre que l'on met en background et on place un titre textuel invisible, clicable qui reprend les dimension de l'image.

L'internaute de base clique sur l'image titre.
OK
Le navigateur texte affiche le titre textuel clicable.
OK

Tout le monde est content.

Ou est donc le problème vu que pour la compréhension, on se fout, au final, de la police utilisé.

C'est juste un choix d'intégration, pas de régles ou de standard.

Ehplod a écrit :
Le navigateur texte affiche le titre textuel clicable.
OK

Le navigateur texte ne lit pas le texte car ce dernier est en display:none (et sur ce point ce n'est pas un bug des navigateurs textes, mais une stricte application de la spécification).

Ensuite, même si on utilise un autre procédé pour masquer le texte tout en le laissant lisible par les lecteurs d'écran, il y a d'autre problèmes potentiels. En voici un: l'image n'est pas chargée suite à un problème réseau sur la connexion de l'internaute (requête HTTP échouée ou qui met du temps à aboutir, ce qui arrive parfois sur des connexions ADSL et régulièrement sur des connexions mobiles), par contre le CSS a été chargé et appliqué:
- L'image n'est pas visible (pas chargée).
- Le texte non plus (masqué en CSS).

Ehplod a écrit :
Ou est donc le problème

Le problème est qu'on utilise un mécanisme de substitution d'image non standard, et donc qu'en cas de problème (image non chargée pour une raison ou pour une autre, et il y a des dizaines de petites raisons potentielles) le navigateur ne peut pas réagir en exploitant le texte équivalent à l'image vu qu'il n'y a pas de texte équivalent à l'image dans le code (de manière standard).
Modifié par fvsch (21 Oct 2011 - 09:57)

fvsch a écrit :

Le navigateur texte ne lit pas le texte car ce dernier est en display:none (et sur ce point ce n'est pas un bug des navigateurs textes, mais une stricte application de la spécification).

Je ne savais pas...
Mais ça reste étrange comme comportement.
Le css n'est (peut-être uniquement selon moi...) présent que pour styler une page. Du moment qu'on utilise un navigateur texte, pourquoi prendre en compte les attributs css.

fvsch a écrit :

- L'image n'est pas visible (pas chargée).
- Le texte non plus (masqué en CSS).

Ce peut en effet être un problème

Ehplod a écrit :
Le css n'est (peut-être uniquement selon moi...) présent que pour styler une page. Du moment qu'on utilise un navigateur texte, pourquoi prendre en compte les attributs css.

display:none retire l'élément du rendu de la page. «Rendu de la page» ne signifie pas «rendu visuel pour les utilisateurs dits “normaux”, dotés d'une vision sans défauts», ça concerne tous les utilisateurs. Il est donc parfaitement logique que les lecteurs d'écran tiennent compte de display:none.

visibility hidden, peut-être ?

On doit bien pouvoir mettre un texte image pour le design et le remplacer par du texte textuel pour les nav textuel...

Ou alors jouer avec les z-index ?

Pourquoi essayer à tout prix de faire du bricolage avec CSS? L'attribut alt remplit très bien sa fonction.

Je ne vois pas en quoi c'est du bricolage.
Simplement une technique d'intégration de contenu au design.

Exemple ?
www.an1000.org

Les 6 cercle représentent des liens qui change lors du hover.

Le fond de base est en background, pas les fond d'hover.

Ehplod a écrit :
visibility hidden, peut-être ?

Non. Même souci qu'avec display:none ou presque.

Ehplod a écrit :
On doit bien pouvoir mettre un texte image pour le design et le remplacer par du texte textuel pour les nav textuel...

Tu ne peux pas détecter l'utilisation d'un lecteur d'écran (et heureusement!). Les lecteurs d'écran sont des logiciels qui se «branchent» sur des navigateurs, donc le navigateur détecté sera Internet Explorer, Firefox ou encore Safari.

Ehplod a écrit :
Ou alors jouer avec les z-index ?

Une des solutions les plus accessibles (mais pas parfaite) consiste effectivement à placer un élément ou pseudo-élément en absolu par dessus le texte. Si l'image ne s'affiche pas, le texte en dessous est visible.
Mais Florian_R a raison: l'attribut alt remplit très bien sa fonction. Donc je n'utiliserais ce type de technique que dans le cas où je dois utiliser une image de type «sprite».