Un menu avec onglets en CSS

Voici un petit test de menu avec onglets graphiques.

Certes, ce n'est pas le premier du genre : certains sont sans préchargement (portes coulissantes), d'autres sont fluides et extensibles, etc.

Par contre, la plupart rajoutent de la structure et des balises inutiles (span par ci et par là entre-autres), alors que pour cet usage, le contenu généré me semble intéressant (oui, je suis toujours dans ma période "before/after" :-) )

PS : par contre, j'ai essayé d'appliquer le hack IE7 de Dean Edwards, mais apparemment sans succès car IE ne reconnaît toujours pas before et after.

Commentaires bienvenus.

Par Raphael GOETTER - dimanche 31 octobre 2004 à 21:09

Astuces - #86 - Lu 12045 fois - Intérêt du billet: 1.69(42) - Fil RSS

Trackbacks

Aucun trackback pour le moment.

Les trackbacks pour ce billet sont fermés.

Evaluez ce billet

Commentaires

Le lundi 1 novembre 2004 à 22:14, par Xavier :: site :: #

before et after fonctionnent parfaitement avec IE7 (pour un IE à partir de la version 5). Il suffit de visualiser ces 2 pages pour s'en convaincre : dean.edwards.name/IE7/com...
dean.edwards.name/IE7/com...

En l'occurrence je pencherais plutôt pour un problème de positionnement. Comme chacun sait, IE a son propre modèle de boîte qui nécessite une attention particulière. Par exemple width: 23px ne veut pas dire width: 23px pour IE s'il y a un padding...

Sinon, remarque personnelle, je mettrais "les styles" sur les boîtes <li> plutôt que sur les <a> qui ne sont pas des boîtes.

Enfin il reste un problème technique sous IE6 : "flickering effect" en anglais (effet flash en français ?) . Il se perçoit sur ce menu sous forme de clignotement. Il s'agit d'un bug IE6 qui se croit obliger de recharger l'image du serveur à chaque effet hover. Pour plus de détails et une solution (coté serveur) :
www.mezzoblue.com/archive...

Le lundi 1 novembre 2004 à 23:05, par Raphael :: site :: #

@Xavier > En fait, IE7 donne aussi à IE un modèle de boite correct donc ça ne devrait pas poser de problème.
J'ai eu la chance d'échanger deux-trois mails avec Dean Edwards lui-même, mais il n'a pas encore pu m'expliquer le problème. Quoi qu'il en soit, le hack est correectement installé et appelé.

Le lundi 1 novembre 2004 à 23:38, par Xavier :: site :: #

@Raphael> oui j'ai pu constater que ton IE7 est parfaitement installé. En revanche l'hypothèse "IE7 donne aussi à IE un modèle de boite correct" ne s'applique pas à ton cas selon moi.
D'une part le model de boîte reste imparfait sur certaines caractéristiques, de plus lorsqu'il apporte des corrections, celles ci ne sont pas systématiquement implicites. D'après ce que j'ai compris (mais pas expérimenté) elles ne sont implicites que pour des éléments block. Or tes <li> sont inline. Peut-être devrais-tu utiliser box-sizing: content-box. D'ailleurs Dean le conseille dans ses notes (voir notamment la fin du paragraphe layout) :
dean.edwards.name/IE7/not...

Le mercredi 3 novembre 2004 à 16:14, par Raphael :: site :: #

Voici ce qu'en dit Dean :
"IE7 does not support generated content for dynamic pseudo classes. so this does not work:
a:hover:before {..}
i do not intend to add support for this in the near future."

Le jeudi 4 novembre 2004 à 18:30, par Xavier :: site :: #

@Raphael> Effectivement cela conduit à de sérieuses restrictions pour l'effet :hover.

En revanche la réponse de Dean n'a pas à voir avec avec le PS de ton article : IE+IE7 reconnaît :before et :after. Je viens de tester ton modèle qui "fonctionne" sur IE+IE7, c'est à dire présence des arrondis (sans effet au survol de la souris).

Pour l'effet dynamique on peut utiliser un subterfuge (peu élégant) utilisant z-index pour modifier le postionnement relatif des <a> et des <li>. Je t'envoie le code correspondant par mail.

Ajouter un commentaire

Les commentaires pour ce billet sont fermés.