Mettre un titre en image: le retour

(reprise du message précédent)

Pour n'importe quelle raison ... un soucis quelconque sur le serveur ou sa configuration, par exemple. Ou si l'utilisateur a modifié l'affichage des images d'arrière-plan ...

Sopo a écrit :
Pour n'importe quelle raison ... un soucis quelconque sur le serveur ou sa configuration, par exemple. Ou si l'utilisateur a modifié l'affichage des images d'arrière-plan ...

Moui... rarissime n'est-ce pas? Quoi qu'il en soit, c'est le problème inhérant à toutes ces méthodes de titrages grace à des arrière-plans css. Aussi, il me semble plus judicieux de comparer cette méthode aux autres du meme type, sachant que ça ne sera dans tous les cas fiable "que" dans 99% des cas...

Sopo a écrit :
Pour n'importe quelle raison ... un soucis quelconque sur le serveur ou sa configuration, par exemple. Ou si l'utilisateur a modifié l'affichage des images d'arrière-plan ...

Ou c'est l'admistrateur qui désactive les images (vu dans certaines universités).

Un sujet récent évoque une solution intéressante.

<edit>Pas si récent que ça le sujet. </edit>
Modifié par Eldebaran (04 Dec 2006 - 00:12)

Effectivement, la solution évoquée dans ce fil a l'air de résoudre tous les problèmes. Mettre l'image au-dessus du texte, au lieu d'envoyer le texte aux antipodes ...

Là au moins, ça fait une différence par rapport aux autres méthodes. Dans les signets, tiens.

adoptme a écrit :
Moui... rarissime n'est-ce pas?

mmm...

Oui bien sur, mais quand il s'agit d'accessibilité c'est justement c'est aspect si apparemment évident du rarissime qui est pris à parti.

Sopo a écrit :
Effectivement, la solution évoquée dans ce fil a l'air de résoudre tous les problèmes. Mettre l'image au-dessus du texte, au lieu d'envoyer le texte aux antipodes ...

Là au moins, ça fait une différence par rapport aux autres méthodes. Dans les signets, tiens.

Par contre, je me demande s'il est vraiment nécessaire d'utiliser une image transparente. Pourquoi pas un span vide par exemple ?

Par contre, ça ajoutera un warning tidy, ce qui est gênant si l'on aime avoir le petit cercle vert sur ses pages.

Eldebaran a écrit :
Pourquoi pas un span vide par exemple ?

Ben pour ne pas avoir de span vide

A vrai dire, je ne vois pas bien pourquoi on parle d'image transparente avec l'image en arrière-plan. Pourquoi ne pas simplement utiliser une image "normale" ? Avec par exemple :

HTML :
<h1><img src="mon_image.png" alt="" />Mon texte</h1>
CSS :
h1 {
   position: relative;
   z-index: 1;
   width: xxx;
   height: xxx;
}
h1 img {
   position: absolute;
   width: 100%;
   height: 100%;
   z-index: 99;
}

ça ne pourrait pas fonctionner ?

clb56 a écrit :
Ben pour ne pas avoir de span vide

Ah oui, je n'y avais pas pensé.

Ceci dit, cette solution de l'image transparente rappelle de mauvais souvenirs... Je me demande si on ne peut pas trouver mieux.

Sopo a écrit :
A vrai dire, je ne vois pas bien pourquoi on parle d'image transparente avec l'image en arrière-plan. Pourquoi ne pas simplement utiliser une image "normale" ? Avec par exemple :

HTML :
<h1><img src="mon_image.png" alt="" />Mon texte</h1>
CSS :
h1 {
   position: relative;
   z-index: 1;
   width: xxx;
   height: xxx;
}
h1 img {
   position: absolute;
   width: 100%;
   height: 100%;
   z-index: 99;
}

ça ne pourrait pas fonctionner ?

Je ne comprends pas. Quelle est la différence avec la solution

<img src="mon_image.png" alt="Mon texte" />

?

Juste J'oublie toujours les histoires d'effets

<edit> ça me rappelle que je m'étais amusé à bidouiller un rollover sans javascript et avec des images en dur, il y a un moment : http://users.skynet.be/fa609197/test.html

ça n'a pas l'air de fonctionner trop mal, en fait.
Modifié par Sopo (04 Dec 2006 - 00:50)

Sopo a écrit :
J<edit> ça me rappelle que je m'étais amusé à bidouiller un rollover sans javascript et avec des images en dur, il y a un moment : http://users.skynet.be/fa609197/test.html

ça n'a pas l'air de fonctionner trop mal, en fait.

Pas bête du tout...

Le seul problème est le cas où les CSS sont désactivées, c'est un peu déconcertant.

Ah oui, je ne me suis pas penché sur la question mais il me semble que ta solution comme celle évoquée plus tôt nécessitent que le conteneur soit positionné en relative ?

Il faut avoir un point de repère pour positionner l'élément enfant en absolute, en tous cas.

Eldebaran a écrit :
Je me demande si on ne peut pas trouver mieux.

C'est tout le problème, je pense que si Laurent Denis parle de la solution <img> comme étant la meilleure, ce n'est pas pour des raisons sémantiques mais plutôt en raison du caractère incroyablement acrobatique quand ce n'est pas hasardeux des solution css pour gérer la chose en terme d'accessibilité.

Les facteurs qui jouent là dedans n'ont donc rien de structurels (raison pour laquelle j'ai contredit Sopo) mais sont simplement conjoncturels. Ce qui ne les allège en rien, là dessus on est sans doute bien d'accord.
Modifié par clb56 (04 Dec 2006 - 01:19)

clb56 a écrit :
C'est tout le problème, je pense que si Laurent Denis parle de la solution <img> comme étant la meilleure, ce n'est pas pour des raisons sémantiques mais plutôt en raison du caractère incroyablement acrobatique quand ce n'est pas hasardeux des solution css pour gérer la chose en terme d'accessibilité.

C'est le moins que l'on puisse dire.

Ceci dit, certaines personnes ont tendance à vouloir se débarrasser systématiquement des balises <img>, même si elles apportent du contenu, auquel cas l'argument sémantique pour utiliser <img> est également valable.
Modifié par Eldebaran (04 Dec 2006 - 10:35)

Bonjour à tous,

Je vois que ce sujet déchaînte toujours autant les passions

La méthode que je propose n'est qu'une idée que je partage, une alternative tout au plus élégante et fonctionnelle aux solutions existantes (span, text-indent, etc.). Elle se heurte naturellement aux mêmes problèmes de fonds que les autres techniques basées sur ce principe.

Si je viens partager cette idée, donc, ce n'est non pas pour (re)lancer une fois de plus le débat des titres en images par html ou css (intéressant, certes, mais ce n'est pas mon propos ici), mais bien pour proposer simplement une façon de procéder qui me paraît plus propre que les autres, mais — je le répète — sensible aux mêmes failles — failles, ceci dit, réellement mineures amha.

Cordialement,
Benjamin

Sensiblement condensé:

[#black][b]XHTML[/b][/#]

<h1>Titre de section</h1>


[#black][b]CSS[/b][/#]

h1 {background:url([i]titre.png[/i]) no-repeat; height:0; padding-top:[i]80[/i]px; overflow:hidden;}

Modifié par Benjamin D.C. (16 Oct 2007 - 22:32)

Contenu texte non accessible si css actives et images non chargées.

clb56 a écrit :
Contenu texte non accessible si css actives et images non chargées.

Heum oui, ça ça n'a pas changé... C'est d'ailleurs ce que j'écris juste au dessus:

a écrit :
Cette méthode se heurte naturellement aux mêmes problèmes de fonds que les autres techniques basées sur ce principe.

Personnellement, les images non chargées, je n'y crois pas trop, m'enfin... C'est toujours chouette de chercher la ptite bête hein

Benjamin D.C. a écrit :
Heum oui, ça ça n'a pas changé... C'est d'ailleurs ce que j'écris juste au dessus:
Cette méthode se heurte naturellement aux mêmes problèmes de fonds que les autres techniques basées sur ce principe.

Personnellement, les images non chargées, je n'y crois pas trop, m'enfin... C'est toujours chouette de chercher la ptite bête hein

Quand on parle d'accessibilté il n'y a pas de petite bête justement.

comme je l'avais dit précédemment

a écrit :

Si la solution css mise en oeuvre pour cacher un texte et lui substituer une image background résiste à la situation suivante :

. la feuille de style est interprétée.
. les images ne sont pas chargées.

alors c'est sans doute bon (évidemment mieux vaut rester prudent, comme à chaque fois qu'il s'agit d'accessibilité).

Sinon l'alternative de l'image dans le html doit être clairement envisagée.

clb56 a écrit :
Quand on parle d'accessibilté il n'y a pas de petite bête justement.

Je comprends évidemment ton point de vue — honorable, certes — mais j'ai franchement du mal à imaginer une situation où les images ne seraient pas chargées
Modifié par Benjamin D.C. (04 Dec 2006 - 18:14)