Défi pour les CSS Master's

Bonjour,

Solution la plus efficace = JavaScript.

Sinon la solution de Maxime a l'air pas mal. Par contre, on devrait pouvoir:
1. se passer du positionnement absolu (à la rigueur un peu de positionnement relatif pour utiliser des z-index, et peut-être un peu de décalage par ce biais si les marges négatives passent mal);
2. éviter de figer les éléments en largeur.

Pas le temps de faire un essai tout de suite, par contre.

Sinon tu peux tricher : test menu
Modifié par matmat (09 Nov 2007 - 22:38)

Bon enfin j'en reviens quand même à dire que la solution proposée par Raphael est quand même de loin la plus simple, et que les menus soient collés ou non, je pense que le visiteur s'en tape d'une force plus que surhumaine !
Modifié par Mikachu (10 Nov 2007 - 01:23)

Mikachu, peut être pour toi, mais quand un client souhaite un design complexe et original, tu lui réponds "tout le monde s'en tape ?".

Ensuite, si j'ai lancé ce post, qui je rappelle est titré "Défi", c'est non pas pour qu'on me dise de changer le menu pour faire plus simple, mais pour relever le défi et arriver à trouver à reproduire le menu en utilisant uniquement le css sans javascript.

Car j'ai trouvé une solution, mais il reste des choses à améliorer pour la rendre plus simple et plus modifiable. Et je trouve intéressant et enrichissant d'avoir les idées de tout le monde. Pas vous ?

D'ailleurs Florent V. j'attends ton essai avec impatience pour les 2 points que tu penses pouvoir modifier.
Modifié par Maxime L.B. (10 Nov 2007 - 10:25)

Florent V.
pour le point 2 (éviter de figer l'élement)
je te mets un lien vers 2 images, le coté gauche et droit de l'onglet.

http://www.maximelebreton.com/forumalsa/menu/images/onglet-gauche.png
http://www.maximelebreton.com/forumalsa/menu/images/onglet-droite.png

Sinon si tu veux récupérer les images actuelles, sur le même dossier elle s'appellent menu-un.png, menu-deux.png, menu-trois.png, et menu-quatre.png.

Maxime L.B. a écrit :
D'ailleurs Florent V. j'attends ton essai avec impatience pour les 2 points que tu penses pouvoir modifier.

Pff... on peut même plus glander tranquillement le samedi maintenant...

Alors voilà:
http://web.covertprestige.info/test/34-menu-horizontal-rollover-css-complexe.html

Pas testé avec Internet Explorer (pas sous la main tout de suite). Théoriquement ça devrait marcher, mais bon...
OK avec Firefox 2, Opera 9 et Konqueror 3.5.
Modifié par Florent V. (10 Nov 2007 - 15:59)

Florent V. a écrit :

OK avec Firefox 2, Opera 9 et Konqueror 3.5

Safari & Camino également.

Presque bon sous IE7, rigolo sous IE6 et IE5.5, je poste des images dès que possible
IE5.5

IE6


IE7

Modifié par 6l20 (10 Nov 2007 - 17:34)

Sous IE7: le margin-left négatif n'a pas l'air de prendre... (ou bien ça fonctionne comme le décalage du positionnement relatif).
Sous IE6: je crois qu'on a un bug sympathique qui se rajoute, et je pense savoir lequel.

Faudra que j'explore tout ça...

bonjour,

le gif plutot que le png semble plus approprié , a premiere vue , il n'y a rien d'autre que 3 couleur.

Le gris peut-etre prise comme couleur transparente et mise en fond a ul.

Une barrre oblique blanche , et le fond bleu seront alors affiché tour a tour a partir de 2 images. (l'image , dessinant le fond bleu peut-etre mise en fond et ejecté hors de l'espace d'affichage pour faire le preload "css" au moment ou l'on applique le fond gris a ul ).

Un <a >et un <span> enfant permettront d'afficher les bordures obliques , la transparence , ne viendra pas "pollué les liens adjacent .

Un réglage en Commentaires Conditionnels pour IE permettra de rattraper ou d'activer les différences ou erreurs d'affichages.

2 version du menu dans la demo en lien , les deux fluides par le contenu des liens et de la taille d'affichage des caractères.
L'un entièrement dans le flux et l'autre en absolu dans un conteneur lui réservant un espace.

http://gcyrillus.free.fr/essai/menu_maxime_lb.html

La demo n'as pas été tester dans IE5.5 ni sous linux/mac.
tester dans Firefox, opéra 9 , safari IE6 et 7. (windows)
Pas de js impliqué.

GC
Modifié par gcyrillus (12 Nov 2007 - 01:07)

gcyrillus a écrit :
le gif plutot que le png semble plus approprié , a premiere vue , il n'y a rien d'autre que 3 couleur.

Trois couleurs + de l'«anti-aliasing» = besoin de 8 à 16 couleurs indexées en tout. En GIF ou en PNG-8, c'est du pareil au même.
(Ceci dit, on passera de 400 octets à 250... toujours ça de pris, mais c'est pas une optimisation prioritaire).

Sinon, sympa ta solution gcyrillus. Peut-être plus simple que la mienne. Ou du moins ça permet d'éviter le positionnement flottant, ce qui pourra être utile dans certains cas.

Le lien de la page est permanent, ou bien c'est du temporaire?

Bonsoir à tous,
tout d'abord, merci beaucoup à Florent V. et à Gcyrillus pour leur investissement et leur idées plus qu'intéressantes et enrichissantes !
J'espère vraiment que tout le monde en profite.

Je ne suis pas la avant mercredi soir, alors je ne pourrais pas répondre avant, mais j'ai bien vu vos exemples, et je suis impatient de pouvoir vous répondre.

A bientot !

bonsoir,

Florent V. a écrit :

Le lien de la page est permanent, ou bien c'est du temporaire?

Oui , malgré le chaos qui régne sur mon espace perso , je laisse généralement ces fichiers en ligne par courtoisie.

(Hébergé par free , il arrive trés souvent que l'on tombe sur des pages d'erreurs , ou des pages qui ne se chargent pas en totalité , mais les fichiers restent bien la , il suffit d'insister légerement pour enfin les atteindre.)

Ce topic est en effet très intéressant et très sympa lorsque l'on voit le nombre d'approche différentes que l'on peut faire sur le choix des régles css utilisées , les navigateurs que l'on utilise et les références auxquelles on se rapporte.

GC

Bon, trop la flemme de chercher des solutions pour IE.

Bug dans IE6: les li en float: left sont automatiquement agrandis par leur contenu en display: block, semble-t-il. Sauf s'il y a un moyen de contourner ça, les seules solutions consistent à figer la largeur (le but au départ était d'éviter ça), ou de passer sur du display: inline pour tout le menu. Et en display: inline, la configuration que j'utilise pose problème (une histoire de rendu des éléments inline imbriqués dans une même boite de ligne...).

Bref, on préfèrera la solution de gcyrillus je pense.

Bonjour à tous,

Gcyrillus, ta solution est fort intéressante, et bien pensée.
Mais 2 choses me gênent.
- L'aliasing est trop apparent à mon goût
- Ensuite, le fait d'avoir un hack ie6 est également quelque chose que j'essaie d'éviter.

Je pense que même si ie6 est chiant certes, ont peut arriver à comprendre ses problèmes qui sont généralement pas biens méchants, et arriver à faire un truc 100% compatible.

J'ai donc repris la solution de Florent V., qui m'a parue plus simple, plus élastique, et plus jolie (pas d'aliasing). Sa solution marchait très bien sur Firefox 2, Opera 9, Konqueror 3.5, Safari 2 et Camino 1.5, mais des bugs sur IE5, IE6 et IE7.

J'ai donc essayé de corriger les bugs, et juste en modifiant les propriétés, je suis parvenu à mes fins sur ie6 et ie7, sans hacks !
J'ai aussi fait en sorte que le menu soit élastique, (il y'avait déjà une bonne base) c'est à dire si vous faites un petit ctrl + molette, vous verrez que le tout s'adapate parfaitement à la taille de la police.

Je me permets donc Florent V. de remettre ton fichier débuggé :
http://www.maximelebreton.com/forumalsa/menu-final/test.html

Merci à tous pour votre participation !
et merci à Florent V. qui à selon moi à trouver la solution la plus efficace.

(si quelqu'un peut tester sous ie5 car je l'ai pas sous la main.

Rien à déclarer sous IE5.5
Le menu "fil de fer" cependant ne semble pas fonctionner :


Cdt,
Sylvain

Effectivement le png transparent ne fonctionne pas...
Il faudrait se pencher sur la question.

Merci à toi d'avoir testé sous IE5.5 !
Modifié par Maxime L.B. (23 Nov 2007 - 12:05)

Ça marche aussi sur IE 5.01.

Bon, là je suis bluffé, il faudra que j'explore tes modifications pour comprendre le pourquoi du comment.

Tu te rappelles ce que tu as changé exactement?

Au fait, un détail: l'image 34-transparence.png devrait être du PNG-24 avec transparence graduelle (des pixels blancs à 60% d'opacité, quelque chose du genre). Sur ton exemple, c'est une image en PNG-8, complètement opaque.

PS: à propos de l'essai de gcyrillus: les commentaires conditionnels ne sont pas des hacks.

Oui pour le png24, j'ai essayé de le passer en png8 car le blanc a 60% ne passait pas. J'ai remis donc l'originale, en attendant de trouver une solution.

Pour ce qui est des modifs que j'ai faites, comme j'expliquait dans mon précédent message, selon moi, Internet explorer comprends pas mal de choses (excepté bien sur les sélecteurs avancés), mais il a une logique différente. Alors si on décortique un peu le code, qu'on essaye de trouver la chose qui fait merder, on se rend compte qu'un simple déplacement, ou un simple rappel de propriété peut arranger un problème qui semble insurmontable.

Exemple, le margin left de -6px qui était sur le ul.test li a {}, faisait qu'il y'avait un décalage au moment du hover. Alors plutot que de le mettre dans le a, je l'ai mis dans le ul.test li, ce qui revient au même, et le problème a été résolu.

Pour le display block qui prenait toute la largeur, même principe :
Le display block était sur le ul.test li a, et le float sur le ul.test li.
Il a suffit de placer le float left sur le ul.test li a pour que IE comprenne bien !
D'ailleurs j'ai laissé le float left sur le ul.test li mais ont peut l'enlever...

Ensuite j'ai juste modifier des paddings et des heights pour que le menu fasse la même taille que l'initial.

Voilà c'est tout !

Pour les hacks, je pensait que ceci (présent dans la solution de gcyrillus) en était un :

<!--[if IE  ]>
<style type="text/css"  >
a {
margin-left:-6px;
background:none ;
background-position: 1px bottom no-repeat;
}
#menu1 a {
margin-left:-1px;
}
ul#menu {
background:#CCCCCC url(oblique.gif) 7px  bottom no-repeat;
}
#menu1 a span {
padding:0em 30px 0em 20px;
zoom:1;
}
li  {
background:url(onglet.gif) -9000px no-repeat ; /* preload */
}
</style>
	<![endif]-->

Ou alors peut être que je n'ai pas bien compris la définition d'un Hack IE.
Modifié par Maxime L.B. (23 Nov 2007 - 15:12)

Maxime L.B. a écrit :
Oui pour le png24, j'ai essayé de le passer en png8 car le blanc a 60% ne passait pas. J'ai remis donc l'originale, en attendant de trouver une solution.

La transparence graduelle du PNG-24 est très bien supportée par Firefox, Safari, Opera, Konqueror, Internet Explorer 7, et plus globalement tous les navigateurs modernes.
Elle n'est pas supportée par IE 6 en natif. On peut l'obtenir (dans ce cas précis ça devrait être possible), mais vu que le fond transparent n'est utilisé ici qu'à des fins de démonstration: on s'en fiche.
(Ou alors faire un GIF ou un PNG-8 avec un pixel sur deux opaque et un pixel sur deux transparent...)

Maxime L.B. a écrit :
Pour ce qui est des modifs que j'ai faites, comme j'expliquait dans mon précédent message, selon moi, Internet explorer comprends pas mal de choses (excepté bien sur les sélecteurs avancés), mais il a une logique différente.

Les choses sont un peu plus complexes que ça en fait.

Pour le décalage via margin-left négatif qui ne prend pas sur le lien mais prend sur le li, je n'ai pas encore totalement cerné la cause. Il me semble qu'en fait la marge négative était appliquée, mais que le lien se retrouvait tronqué par les limites du li (au lien d'en dépasser). J'arrive à reproduire ce comportement dans IE6 avec une page de test, mais pas dans IE7.

Pour les blocs qui prennent toute la largeur au lieu de prendre juste celle de leur contenu, c'est un bug lié au HasLayout. Il suffit de supprimer le layout pour qu'il disparaisse.

Maxime L.B. a écrit :
Pour les hacks, je pensait que ceci (présent dans la solution de gcyrillus) en était un

Non, les commentaires conditionnels (le code qui tu pointes) ne sont pas des hacks. Il s'agit bien d'un traitement spécifique pour un navigateur donné, mais le mécanisme a été prévu, conçu et documenté, à l'inverse de ce qu'on appelle un «hack».

Pour plus d'informations, tu pourras consulter dans la FAQ du forum:
- un résumé sur les hacks;
- un résumé sur les commentaires conditionnels;
- un résumé sur le HasLayout.

Et pour revenir à ce menu, voici la version compatible IE finalisée:
http://web.covertprestige.info/test/34-menu-horizontal-rollover-css-complexe-2.html