Incontournables XHTML / CSS :
| Auteur | |
|---|---|
| Florent V. | # 27 Apr 2006 - 11:42:41  |
On va manger des chips.  Modérateur 13465 Posts |
Bonjour à tous, Pour placer des images dans une mise en page, on est souvent tenté de les placer en image de fond. Ce qui donne le gros avantage d'avoir des images modifiables via la feuille de style sans toucher au code, et le petit avantage de faciliter la sélection du texte de la page. Ou encore qui permet de faire un rollover CSS. ---- Edit du 28 novembre 2006 : si l'on n'a pas de besoins particuliers (rollover CSS, design susceptible de changer et code HTML difficilement modifiable par système de templace, etc.), la technique la plus accessible reste l'utilisation d'une image de contenu avec attribut alt reprenant l'information donnée par l'image ! ---- S'il s'agit d'images de décoration, tout va bien. Mais s'il s'agit d'images censées donner une information importante, c'est plus compliqué. Le cas le plus typique est celui des images de fond utilisées pour réaliser un bouton de menu 100% graphique (donc pas un texte sur un fond en image). On se retrouve face à un problème d'accessibilité, car l'information du bouto (un texte graphique, bien souvent) n'est pas lisible autrement que visuellement. Le "texte alternatif" en display: none Solution courante : placer un "texte alternatif" que l'on cachera grace à la feuille de style. HTML Problème : une bonne partie des lecteurs d'écran, qui devraient ignorer totalement les feuilles de style destinées à un rendu visuel, interprètent quand même les display: none (ainsi que visibility: hidden), et ne les rendent pas. Le texte du span est donc caché à tous… Autres techniques pour cacher le "texte alternatif" On reprend le même code HTML que précédemment : <li><span>Mon Bouton</span></li> Pour cacher le span uniquement aux utilisateurs de navigateurs graphiques, on a recours à différents trucs plus ou moins tarabiscotés. – Un text-indent à -5000px ; – Mettre le span en position absolute et le positionner en top: -5000px ; – Réduire taille du texte et hauteur de ligne à 1px ; – Une combinaison de plusieurs techniques de ce style… Note : dans le cas du text-indent, l'ajout du span autour du texte n'est pas nécessaire. Petite proposition : utiliser l'attribut alt d'une image transparente Après ce petit passage en revue, voici la technique que j'ai utilisée récemment (ici), pour obtenir un menu avec images de fond (le but était ici de faire des rollover CSS). HTML La partie CSS est assez classique. On s'intéressera donc ici au HTML : on utilise une image (ici un gif transparent de quelques pixels) semblable aux spacers.gif honnis des bon maquettistes XHTML/CSS  Le but ici est d'utiliser l'attribut alt de cette image invisible pour donner l'information correspondant au lien. Que pensez-vous de la méthode ? Je m'étonne de ne pas l'avoir rencontrée ailleurs. J'ai dû passer à côté. Ou bien l'utilisation du gif transparent rappelle-t-elle à certains de trop mauvais souvenirs pour être envisageable ? Si c'est le cas, j'utiliserai du PNG-8 la prochaine fois  Proposition de dernière minute : et l'attribut title ? L'idée me vient à l'instant : et pourquoi ne pas utiliser l'attribut title du lien ? Il me semble avoir lu qu'un lecteur d'écran, face à un lien, lit soit le texte du lien, soit l'attribut title, suivant celui qui est le plus long (et qui donnera donc, théoriquement, la meilleure information). <li id="book-illus"> Je ne suis pas sûr de l'utilité de l'espace insécable. Peut-être ne sert-il à rien ici. Par contre, j'aimerais savoir si cette technique pourrait fonctionner. L'attribut title sera-t-il lu par un lecteur d'écran, et l'absence de texte pour le lien ne sera-t-il pas trop perturbant ? Quid des navigateurs textes ? Et quid des clients à écran réduit (appareils portables) ? Modifié par mpop (28 Nov 2006 - 14:42) |
  |
|
| Christian Le Bouler | # 27 Apr 2006 - 16:38:58 |
| 3135 Posts |
Bonjour mpop, si on prend une technique comme celle du text-indent négatif, elle est parfaitement efficace en mode non graphique pur (pas d'image, pas de css). Le souci c'est quand il y a combinaison de css active et images non chargée. Ta solution présente en fait un souci précisemment inverse : css inactive et image chargée. |
|
|
| Florent V. | # 27 Apr 2006 - 19:08:02 |
On va manger des chips. Modérateur 13465 Posts |
clb56 a écrit : Oui, effectivement j'y avais pensé. C'est assez gênant dans ce cas. |
| |
|
| QuentinC | # 27 Apr 2006 - 21:20:16 |
Étudiant qui bosse ... ou pas 4241 Posts |
Peut-être utiliser à la fois la technique du text-indent négatif et de l'image transparente ... java.lang.BrainNotFoundException : Neuron connection failure |
| |
|
| Florent V. | # 27 Apr 2006 - 23:39:13 |
On va manger des chips. Modérateur 13465 Posts |
QuentinC a écrit : Mais du coup l'info sera en double, non ? À la fois pour les navigateurs texte et pour les lecteurs d'écran. |
| |
|
| Christian Le Bouler | # 27 Apr 2006 - 23:47:59 |
| 3135 Posts |
Et oui ^^ Dans le cas de css inactives + images inactives... C'est sans doute le truc le plus agaçant quand on veut couper les cheveux en quatre... C'est quand les cheveux ne sont pas d'accord !!! Etant entendu que l'ironie acide de cette remarque ne te vise pas mpop mais plutôt moi même  |
|
|
| goetsu | # 28 Apr 2006 - 11:03:40 |
| 291 Posts |
la meilleur technique est qqchose comme par exemple <h3><img src="transparent.gif" alt="">votre texte</h3> le h3 est dimentionné avec la taille de l'image souhaité et position relative, l'image transparente contient en background l'image et est en position absolute avec width et height à 100% et un z-index eventuellement |
| |
|
| Christian Le Bouler | # 28 Apr 2006 - 11:22:47 |
| 3135 Posts |
Ah ouè génial  Mettre un background-image à une image transparente je ne crois pas que j'y aurais pensé ! Merci beaucoup |
|
|
| Florent V. | # 28 Apr 2006 - 11:37:27 |
On va manger des chips. Modérateur 13465 Posts |
goetsu a écrit : Eh eh pas mal ! En fait, ça revient à créer une image de "foreground" pour le h3. |
| |
|
| Christian Le Bouler | # 28 Apr 2006 - 11:39:53 |
| 3135 Posts |
Bon je viens de tester, et ma conclusion c'est :
|
|
|
| goetsu | # 28 Apr 2006 - 12:01:26 |
| 291 Posts |
le seul probleme de cette technique est si je grossi la taille du texte il finit par deborder du cadre ou alors il faut mettre un overflow invisible (bof) auto (mieux mais pas top) ou alors utiliser des em pour que l'image grandisse avec le texte |
| |
|
| gcyrillus | # 30 Apr 2006 - 00:33:44 |
 1153 Posts |
bonjour, overflow:hidden; au conteneur .j'ai aussi opter pour cette technique, et (autre cas classique) le background peut aussi etre une couleur pour mettre plus en evidence le texte alternatif de la balise image, au cas ou l'image est inacessible, on peut la aussi eventuellement dimensionner si on ne veut pas voir la balise image "vide" reduite a l'espace occupe par le texte alternatif "alt" . . oups |
| |
|
| Grantome | # 20 May 2006 - 14:37:16 |
| 27 Posts |
Salut, Voilà ce que j'utilise et cela fonctionne parfaitement. HTML
CSS
L'image du fond est visible sur les nav graphique, et pas le texte. Cette image peut être modifier en fonction du théme. Sur un nav texte, l'image n'apparait pas, mais le lien textuel oui. Pour les mise en forme <a>
Etc... avec les visited, hover et autres... Voilà, si ça peut vous aider Modifié par Grantome (20 May 2006 - 14:52) |
|
|
| gcyrillus | # 18 Nov 2006 - 16:55:11 |
| 1153 Posts |
hello, attention quand-même !pas de balise block dans une balise de type inline (<a><div<</div></a> = pas bon , interdit ! ) et IE ne gere pas les z-index negatifs (ou alors peut-etre tres tres mal ). ++ oups |
| |
|
| knarf | # 19 Nov 2006 - 05:06:50 |
 920 Posts |
Lut mpop, en ce qui concerne <li id="book-illus"> Jaws5 apperement se comporte de la manière suivante par défaut http://thesheet.free.fr/jaws_bis/lien.php (dans le 8eme exemple) Par contre si tu désactive css tu n'as plus rien du tout. Donc logiquement les navigateurs textuels ne devraient pas voir le lien. Modifié par knarf (19 Nov 2006 - 05:21) |
| |
|
Les références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org
Nos partenaires : Editions Eyrolles
Nikozen : Hébergement - Réalisation : Alsacreations.fr