Cacher un titre derrière un logo - IE7

Bonjour, il semble que la solution "text-indent" pour le masquage d'un titre derrière une image (citée dans la faq : http://forum.alsacreations.com/faq/index.php#item13) ne fonctionne pas avec IE7.

En effet, lorsque l'on applique un text-indent négatif avec ce navigateur, l'image de fond est elle aussi indentée, et pas seulement le texte comme c'est le cas avec Firefox ou IE6.

Je n'ai pas trouvé de référence à ce problème dans les forums, peut être ai-je mal cherché...
Néanmoins, je dois utiliser une méthode alternative afin que de telles images soient visibles sous IE7 ; si quelqu'un à une solution...

Cordialement,
Johan

Ces techniques sont à éviter, en fait, pour des raisons d'accessibilité. Privilégier les images HTML.

Hello,

En fait... cela dépend généralement des besoins du client, car chaque solution est potentiellement problématique :
- les textes + background poseront toujours des soucis d'accessibilité (images désactivées, CSS désactivés, supports différent des agents utilisateurs, etc.)
- les images pures posent le problème de la mise à jour. Si le client s'adresse à une entité externe pour mettre à jour ses titres en image, cela lui coûte plus cher, prend plus de temps, est plus fastidieux.

Certains clients, pour ces raisons, ont besoin d'éviter au maximum les images "pures" car ingérables pour eux si celles-ci doivent être souvent modifiables.

Dans ton cas, c'est à toi de jauger tes besoins et de faire l'impasse sur l'un ou l'autre.

trasher a écrit :

En effet, lorsque l'on applique un text-indent négatif avec ce navigateur, l'image de fond est elle aussi indentée, et pas seulement le texte comme c'est le cas avec Firefox ou IE6.

j'en doute,

il faudrait que tu vérifies ce point (disparition image background). S'il se passe quelque chose ce n'est sans doute pas du au text indent.

Hum en effet Christian Le Bouler...

Il semble y avoir un effet de bord dû à une autre partie de mon css, j'ai créé une page avec uniquement un titre et l'ai remplacé par un logo sans que le problème soit présent.

J'aurai du y penser avant de poster...
Merci

Salut,

D'accord avec Christian, de nombreux sites utilisent cette technique et s'affichent parfaitement sous IE.

Laurent Denis a écrit :
Ces techniques sont à éviter, en fait, pour des raisons d'accessibilité. Privilégier les images HTML.

Quel est l'avantage, en terme d'accessibilité, des images HTML par rapport à un text-indent css négatif ?

marcv a écrit :
Quel est l'avantage, en terme d'accessibilité, des images HTML par rapport à un text-indent css négatif ?

Lorsque les images sont désactivées et les CSS présents, l'information n'existe plus.

et vice et versa quand même

Raphael a écrit :
Certains clients, pour ces raisons, ont besoin d'éviter au maximum les images "pures" car ingérables pour eux si celles-ci doivent être souvent modifiables.

À partir du moment où le titre est mis en image et où l'image est créée manuellement, je ne vois pas trop ce que ça change de mettre l'image en image de fond ou dans le code HTML, pour ce qui est de la maintenance.

La distinction se fera plutôt entre titre texte et titre mis en image, ou bien image créée manuellement et image créée dynamiquement par le serveur.

marcv a écrit :
Quel est l'avantage, en terme d'accessibilité, des images HTML par rapport à un text-indent css négatif ?

Les techniques CSS de remplacement de texte par des images de fond détournent le rôle premier des CSS (la mise en forme) pour y insérer un contenu (l'image). Il y aura forcément des cas d'utilisation avec lequel ce détournement ne collera pas.

À l'inverse, utiliser une image HTML (balise <img>) avec texte alternatif est la voie normale et attendue par les différents outils (agents utilisateur), il est donc probable que ces outils soient mieux à même d'exploiter la configuration normale plutôt que la configuration détournée (non attendue).

Florent V. a écrit :

À partir du moment où le titre est mis en image et où l'image est créée manuellement, je ne vois pas trop ce que ça change de mettre l'image en image de fond ou dans le code HTML, pour ce qui est de la maintenance.

En général, ce sont souvent uniquement les textes qui changent et non l'image "de fond".
Du coup, si les deux sont imbriqués, le client est forcément tributaire du graphiste.

Raphael a écrit :
Lorsque les images sont désactivées et les CSS présents, l'information n'existe plus.

Je vois.

Florent V. a écrit :
Les techniques CSS de remplacement de texte par des images de fond détournent le rôle premier des CSS (la mise en forme) pour y insérer un contenu (l'image).

Cela dépend de l'utilisation qu'on en fait. Cette technique de remplacement est très souvent utilisée pour appliquer sur une chaine de caractères un style dont est encore incapable le navigateur : police exotique, dégradé de couleur, ombrage, etc. (et pourquoi pas considérer un logo comme une simple stylisation du nom de l'entreprise...). Dans ces cas-là, je trouve que c'est tout à fait "de la juridiction" des CSS
Modifié par marcv (05 Jun 2007 - 10:51)

Raphael a écrit :
En général, ce sont souvent uniquement les textes qui changent et non l'image "de fond".

Ah oui, mais là tu parles d'un titre texte avec une image de fond décorative. Ça n'est pas la même chose qu'un titre mis en image (pour contrôler la typo par exemple).

Dans le cas d'un titre mis en image, le client est forcément tributaire du graphiste (ou forcé d'avoir des ressources en interne capables de manipuler des images), que l'image soit dans le code HTML ou remplace un titre texte via CSS.

marcv a écrit :
Cela dépend de l'utilisation qu'on en fait. Cette technique de remplacement est très souvent utilisée pour appliquer sur une chaine de caractères un style dont est encore incapable le navigateur : police exotique, dégradé de couleur, ombrage, etc.

Non. Avec cette technique, on n'applique pas un style graphique en surcouche d'un contenu HTML. On procède plutôt :
1 - au masque du vrai contenu ;
2 - à son remplacement par un contenu image inséré comme image de fond.

Si la spécification CSS avait prévu qu'il soit possible de remplacer un texte par une image fournissant la même information, avec une propriété text-replace par exemple, pourquoi pas. Les différents agents utilisateurs s'adapteraient sans doute à la spécification. Mais ça n'est pas le cas. On utilise des images de fond, qui en tant qu'image de fond peuvent être considérées comme dispensables et donc supprimées par les agents utilisateurs (par exemple le navigateur d'un PDA ou d'un smartphone).

Florent V. a écrit :
Non. Avec cette technique, on n'applique pas un style graphique en surcouche d'un contenu HTML. On procède plutôt :
1 - au masque du vrai contenu ;
2 - à son remplacement par un contenu image inséré comme image de fond.

Le fait d'utiliser les CSS pour remplacer du contenu par le même contenu stylé ne me semble pas incompatible avec l'objectif fondamental des feuilles de styles (styler du contenu).

Florent V. a écrit :
Si la spécification CSS avait prévu [...] une propriété text-replace par exemple, pourquoi pas.

Je ne pense pas qu'il faille raisonnner en terme de "est-ce prévu/autorisé" par la spécification. Tu dis toi-même "pourquoi pas si c'était prévu dans les specs". Une bonne idée, non prévue par la spécification, n'en devient pas mauvaise pour autant

Florent V. a écrit :
On utilise des images de fond, qui en tant qu'image de fond peuvent être considérées comme dispensables et donc supprimées par les agents utilisateurs (par exemple le navigateur d'un PDA ou d'un smartphone).

J'ai bien compris les probèmes d'accessibilité de cette technique. Je ne me prononce que sur sa validité, disons, "théorique".

cela été prévu par CSS3 (propriété content étendue à tous les sélecteurs), mais n'est pas encore opérationnel aujoud'hui (vous pouvez tester dans Opera). Et cela pose en fait plusieurs problèmes d'implémentation assez délicats.

C'est le fait d'utiliser une méthode de contournement (faute de pouvoir utiliser la future méthode conçue spécifiquement piur cet usage) qui crée le problème d'accessibilité. En ce sens, la question "théorique" ci-dessus, bien que parfaitement justifiée, est posée sur une base fausse.
Modifié par Laurent Denis (05 Jun 2007 - 11:33)

marcv a écrit :

Une bonne idée, non prévue par la spécification, n'en devient pas mauvaise pour autant

Ba si on était Vendredÿ on pourrait faire remarquer qu'une mauvaise idée qui passe la validation n'en devient par pour autant une bonne idée.

Il s'agit donc d'être vigilant et critique.

Dans la discussion en cours les choses sont un peu faussées car tout repose sur une histoire de logo et d'élément le supportant ou le contenant. L'occurence du logo est généralement unique dans le document et le contenu texte de l'élément concerné sera en général plutôt ramassé, une appelation ou au plus un slogan. On peut donc facilement imaginer que y compris du point de vue de l'accessibilité tout cela reste gérable.



Mais là n'est pas la question !

S'il s'agit en général du remplacement de contenus textes par des images (exemple type : 10 item de menu remplacés par 10 images... Avec rollover spécifique pour chacune par dessus le marché !!! ) alors avant même la question de la technique retenue on peut se poser la question de la débauche d'élément graphique au final assez banals à la place de contenus de très grandes utilités (menu, en têtes de sections).

Je proposerais donc l'approche suivante :

Si un contenu texte ne peut pas aisémment et sans problème être remplacé par une image background, se poser la question de la pertinence de l'utilisation d'une image "tout court".