[Résolu] Positionnement de contenu généré sous Firefox

Bonjour à tous,

Je suis en train de réaliser un menu à onglets, et j'en ai profité pour faire quelques expérimentations avec les pseudo-éléments before et after pour ajouter de jolis coins arrondis.

Le menu est une simple liste non-ordonnée dont les puces sont en positionnement flottant et les liens rendus en tant qu'élements de type bloc.

J'ai positionné les pseudo-éléments de façon absolue par rapport aux liens, de façon à ce qu'ils se placent dans les coins. Cela marche normalement sous Opera, mais pas du tout sous Firefox, voici une page d'exemple.

Apparemment, Firefox ne positionne pas les pseudo-éléments.

Je ne peux pas utiliser les marges négatives car le pseudo-élément after se place en-dessous, et la hauteur de l'onglet est variable.

Je ne peux pas non plus rendre les puces et tant qu'élément de type en ligne, car je voudrais réutiliser ce système pour autre chose qu'un menu...

Le code CSS est dans la page indiquée plus haut, le fichier onglets_fond.png est l'image avec tous les coins pour les différents états.

Ma question est: si Firefox ne permet effectivement pas de positionner du contenu généré, comment puis-je aboutir au même résultat?

Je pensais à mettre un coin en fond de puce, et un autre coin en fond de lien, mais comme la couleur de fond devra être appliquée sur la puce, il va falloir utiliser des bidouilles pour IE pour le survol et l'activation...

Je vous remercie d'avance pour votre aide!
Modifié par Romain Vigier (10 Jun 2007 - 17:41)

Salut,

Romain Vigier a écrit :
Apparemment, Firefox ne positionne pas les pseudo-éléments.

La possibilité de positionner (entre autres) le contenu de :before et :after a évolué dans les specs. CSS2 l'interdisait, CSS 2.1 et 3 non. Firefox en est resté à la version 2.

Romain Vigier a écrit :
Je pensais à mettre un coin en fond de puce, et un autre coin en fond de lien, mais comme la couleur de fond devra être appliquée sur la puce, il va falloir utiliser des bidouilles pour IE pour le survol et l'activation...

C'est ce que je ferais, personnellement. N'oublie pas que quand tu parles d'IE aujourd'hui, c'est IE7. La limitation qu'avait son papa avec :hover n'est plus. Il te faudra deux ou trois pauvres lignes de JS pour assurer la compatibilité avec IE6 : rien de bien compliqué et pas vraiment des bidouilles .

A+
Modifié par marcv (10 Jun 2007 - 09:48)

Et sinon, si les images des coins sont transparentes, changer la couleur de fond du lien devrait suffire, non ?

Edit : pour info, le positionnement absolu du contenu généré avec :before et :after marche correctement avec Konqueror 3.5.

Et aussi : ce genre de coins arrondi peut s'obtenir facilement avec deux images de fond, et un code du genre <a href="..."><span>Lien</span></a>. Et ça marche pas mal dans IE6 en général.
Modifié par Florent V. (10 Jun 2007 - 11:20)

marcv a écrit :
N'oublie pas que quand tu parles d'IE aujourd'hui, c'est IE7. La limitation qu'avait son papa avec :hover n'est plus. Il te faudra deux ou trois pauvres lignes de JS pour assurer la compatibilité avec IE6 : rien de bien compliqué et pas vraiment des bidouilles .

Avec IE7, pour autant que je sache, la pseudo-classe active n'est toujours réservée qu'aux liens ... Et des lignes de javascript, même pauvres, ne servent à rien si javascript est désactivé...

Florent V. a écrit :
Et aussi : ce genre de coins arrondi peut s'obtenir facilement avec deux images de fond, et un code du genre <a href="..."><span>Lien</span></a>. Et ça marche pas mal dans IE6 en général.

Ah, c'est pas bête du tout, ça. Je voulais pas mettre d'éléments vides, mais là c'est différent...

En plus, en n'utilisant pour fond que la couleur de fond des coins, comme tu l'as suggéré, il n'y a plus besoin de rollover... (Juste de quelques commentaires conditionnels pour donner un PNG-8 au lieu d'un PNG-24 à IE<7.)

Voici le résultat final!

Merci beaucoup pour votre aide !