Forum Alsacréations : CSS et Standards Web

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 ...

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 ...

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

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.

Eldebaran a écrit :
Pourquoi pas un span vide 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;

}

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

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 ?

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

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.

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

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

XHTML



<h1>Titre de section</h1>





CSS



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

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

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

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

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.