Insertion d'image selon la classe css

[batmat]

Bonjour,

Là, j'essaie de faire ça :

-> les titres des blogs sont en h2 et sont dans le bloc content

Je veux insérer une image avant le titre qui soit fonction de la catégorie (qui est mise en classe css du titre en h2 donc). Comme on peut vérifier, à la racine, j'ai bien deux fichiers Windows.png et Linux.png...

Donc avec le sélecteur css suivant, je pensais que j'arriverais à afficher l'image correspondant à la catégorie ... :

#content h2[class]:before
{
content:url("/"attr(class)".png");
}

J'ai vérifié plusieurs fois que le chemin était le bon en enlevant le url() et celui-ci s'affiche bien avant le titre (vive editcss pour faire ça rapidement )

Or... Non :-| A marche po. C'est normal ? C'est impossible de faire comme ça en css ?

D'avance merci.

@++

Modifié 30 Avril 2004 par Monique

[K-ZimiR]

je ne sais pas avec quel langage tu crées tes pages mais si tu utilises un langage dynamique tel que PHP ou ASP utilises les fonctions pour générer les feuilles de style dynamiquement dans ta page.

[LaurentDenis]

Donc avec le sélecteur css suivant, je pensais que j'arriverais à afficher l'image correspondant à la catégorie ... :

#content h2[class]:before
{
content:url("/"attr(class)".png");
}

J'ai vérifié plusieurs fois que le chemin était le bon en enlevant le url() et celui-ci s'affiche bien avant le titre (vive editcss pour faire ça rapidement )

C'est impossible en CSS de cette manière, car le contenu généré n'est pas "interprété" par le navigateur, mais juste restitué passivement.

Voir la spécification CSS2 :

Le contenu généré n'altère pas l'arbre du document. Et, en particulier, celui-ci n'est pas réintroduit dans le processeur du langage du document (par exemple pour y être reinterprété).

http://www.yoyodesign.org/doc/w3c/css2/generate.html#content

Modifié 30 Avril 2004 par LaurentDenis

[batmat]

Merci beaucoup pour l'info. Je suis triste :-(. Je pensais pouvoir faire ça "proprement" avec les css et uniquement les css...

En fait, je crois qu'il ne me reste donc que deux solutions :

1) Ecrire pour chaque classe un sélecteur du type :

.Linux :before
{
content:url("/Linux.png");
}

.Windows :before
{
content:url("/Windows.png");
}

Le problème avec cette technique, c'est que IE ne gère pas les pseudo-classes before et after(, me trompé-je ?) C'est pas que je veuille vraiment être compatible avec IE, mais j'aimerais bien que tous les visiteurs voient cette image.

2) Insérer carrément le code <img src dynamiquement avec le php selon la catégorie. Cette méthode me chiffone, parce qu'elle va à l'encontre de ce que je voulais faire : séparer vraiment contenu et présentation. En effet, quelqu'un qui visite mon site avec les styles css désactivés ne devrait pas avoir à "subir" cette image, mais avec cette méthode il la verra ....

Pour conclure, je pense que je vais qd même choisir la 2ème méthode pour que tout le monde puisse voir cette image. Vivement qu'IE supporte ces fichues pseudo-classes...

Si vous voyez d'autres solutions, je suis ouvert à toute proposition.

D'avance merci

@++

[LaurentDenis]

Je prendrais le problème par un autre bout (celui du contenu de la page et non de sa présentation graphique):

L'information "Linux" ou "Windows" est-elle essentielle à la compréhension de la page ? Pour cela, doit-elle être lue dès le titre ? Est-elle donnée par ailleurs de manière suffisante (le texte qui suit tes titres...)

Si l'info est essentielle, elle ne doit pas être donnée via CSS : elle doit figurer dans le contenu de la page. Alors, tes images <img src... sont une bonne solution, si tu veilles à bien renseigner les deux champs alt="Windows" et alt="Linux" pour que l'info soit disponible dans les medias non graphiques.

Si l'info est décorative, elle doit être donnée via CSS. Et le fait que les visiteurs d'IE n'y auront pas droit n'est pas dramatique. Au contraire : dans la mesure où on est dans le "décoratif" et dans l'accessoire, il est logique que les utilisateurs d'un navigateur ne bénéficient que du rendu qui est à la portée de celui-ci. S'ils cherchent une expérience de navigation plus fun, c'est à eux de faire évoluer leur navigateur.

Attention : je répète clairement que ceci n'est valable que pour du "décoratif". Il ne faut en aucun cas agir de cette manière avec du contenu utile.