Un menu full css w3c sous ie6?

Bonjour,

J'ai écris un menu pour mon site (full css) qui fonctionne très bien
sous tous les navigateurs mais qui me pose soucis sous IE6 si je souhaite être valide w3c, sinon il n' a pas de soucis.
Voici un exemple de code html :

<ul>
	<li>
		<a href="blabla" title="blabla">mon titre</a>
		<ul>
			<li><a href="sous-menu1" title="sous-menu1">Sous-menu 1</a></li>
			<li><a href="sous-menu2" title="sous-menu1">Sous-menu 2</a></li>
			<li><a href="sous-menu3" title="sous-menu1">Sous-menu 3</a></li>
		</ul>
		<!-- </a> pour ie6 -->
	</li>
</ul>

Voici un code valide w3c, mais IE6 ne fait pas appraitre le sous-menu, car il
n'est pas inclu dans la balise <a>.
Pour que le code fonctionne, la balise </a> fermante doit être après la balise <ul> (celle en rem).
Malheureusement le w3c n'accepte pas du bloc dans du inline
Je me demande si je ne vais pas laisser les 5 erreurs (5 menus) dans le w3c pour que ça marche sous ie6

merci pour vos suggestions

Bonjour,
sans la totalité du code il va être difficile de te dire pourquoi IE6 n'affiche pas ton sous menu.
D'autre part pour IE6 tu dois obligatoirement passer par du JS (puisque le :hover n'est implémenté que sur les ancres liens dans cette version.

Merci pour ta réponse.

Le reste du code ne servirait à rien.
Oui j'y ai pensé, mais si je gère via javascript, le gars qui le désactive n'aura pas les sous-menu, et niveau accessibilité / navigation, c'est pas top.
Mais bon, je vois pas trop pourquoi le w3c ne veut pas mettre du bloc dans du inline, surtout que dans ce cas là, ça fonctionne parfaitement bien sous IE6.
Personnellement je ne suis pas d'accord avec cette règle, et ne venez pas me dire que c'est logique, car il n'y a rien de logique.
Pourquoi seul les blocs accepteraient-ils les 2 ??
Le soucis ce n'est pas vraiment à cause du :hover mais que I6 gère très mal le "ul a:hover ul", ici le second ul est de trop alors que TOUS les autres navigateurs n'ont aucun soucis.

Pour ma part, je vais laisser les 5 erreurs (5 sous menus)
Le post est résolu en ce qui me concerne.

P.S.
Je n'ai pas trouvé comment on marque le sujet "résolu"

Bonsoir ,

ta syntaxe est incorrecte , si tu veut cibler IE6 et inferieur tu peut tenter les commentaire conditionnel dans leur version "négative" . : si pas (versions) IE (ciblées) :
ex:

<ul>

	<li>

		<a href="blabla" title="blabla">mon titre 
<!--[if !lte IE 6]><--></a>pas pour IE 6<!--><![endif]-->

		<ul>

			<li><a href="sous-menu1" title="sous-menu1">Sous-menu 1</a></li>

			<li><a href="sous-menu2" title="sous-menu1">Sous-menu 2</a></li>

			<li><a href="sous-menu3" title="sous-menu1">Sous-menu 3</a></li>

		</ul>

		<!--[if  lte IE 6]> </a> pour ie6 <![endif]-->

	</li>

</ul>

mais bon , le principe connu et qui fonctionne impose de se servir d'un tableau dans IE6 pour le sous-menu : sinon bugs IE 6 n'arrivera pas a gerer tes liens imbriquer comme ça.

Tu dois en passer par js comme le dit Herman (pis les autres aussi en général) , et le seul truc peut-être interessant c'est les commentaires conditionnels et surtout apprendre a s'en servir a bon escient .
Si la correction que je te propose resous ton coté html , il reste inutilisable en css coté IE6 a mon sens , sans compter que pour IE6 et moins la structure html a interpreter reste invalide , ça sert a rien de jouer a l'autruche

GC

<edit> voici 2 autres menu sans js qui fonctionne mal dans IE 6 http://yidille.free.fr/plux/valign/?16-menu-deroulant-compatible-i6 a ne surtout pas utilisé bien sur ! </>
Modifié par gc-nomade (12 Mar 2010 - 02:03)

Bonjour,

quice a écrit :
Oui j'y ai pensé, mais si je gère via javascript, le gars qui le désactive n'aura pas les sous-menu, et niveau accessibilité / navigation, c'est pas top.

Alors, primo : il y a beaucoup (mais alors vraiment beaucoup) moins de personne qui désactivent JS que de personne qui utilisent IE6. Donc en théorie, il est préférable de s'occuper d'IE6 avant de penser à la désactivation de JS.
Secundo, un JS bien fait (on appelle ça non obstrusif) ne représentera JAMAIS un problème d'accessibilité ; pour la bonne et simple raison que le développeur consciencieux vérifiera que sans JS les sous menus restent visibles (techniquement ça se fait en masquant les sous menu avec JS au chargement de la page et non avec CSS). Du coup plus de problème pour l'utilisation de JS.


Pour ce qui est des règles du W3C, que tu les aimes ou non, elles sont ce qu'elles sont ; et sont parfaitement logique. Après la validation n'est pas obligatoire non plus (même si elle est quand même fortement recommandée).

Pour info voici un menu déroulant full css compatible ie6 7 et valide w3c.
Cela utilise effectivement des commentaires conditionnels.
http://www.cssplay.co.uk/menus/final_drop.html

Autre point : un élément a ne peut pas être parent d'un élément ul. Autrement dit, on peut très bien créer un menu fonctionnel sous IE 6 avec la structure suivante :

<ul>
  <li>
    <a></a>
    <ul>
      <li><a></a></li>
      <li><a></a></li>
      <li><a></a></li>
    </ul>
  </li>
</ul>

sans avoir à l'alourdir de commentaires conditionnels.

Cela dit, si le but est de créer un menu déroulant, il faut savoir que ce type de menu ne sera jamais 100 % accessible (même si l'on n'utilise que les CSS), et ce quel que soit le navigateur utilisé, toutes versions confondues : en effet, si je navigue au clavier (faute de pouvoir utiliser une souris), la liste imbriquée ne s'affichera pas (sauf si j'utilise un lecteur d'écran, pourvu que les sous-menus ne soient pas masqués au moyen d'un display: none) et il conviendra alors que l'élément a des éléments li de premier niveau soit un vrai lien menant à une page permettant d'accéder aux liens du sous-menu en question d'une autre manière.
Modifié par Victor BRITO (12 Mar 2010 - 09:32)

MoOx a écrit :
Pour info voici un menu déroulant full css compatible ie6 7 et valide w3c.
Cela utilise effectivement des commentaires conditionnels.
http://www.cssplay.co.uk/menus/final_drop.html

Et il est absolument innaccessible au clavier... À éviter donc.
Modifié par Laurie-Anne (12 Mar 2010 - 09:46)

J'ai fait une recherche sur votre site pour voir un peu si on abordait le même sujet et suis tombé sur un post d'une personne "tsumiko" qui à également mis des commentaires conditionnels et surprise Laurie-Anne lui répond "Ton bidouillage à coups de commentaires conditionnels pour que le menu se déroule avec IE6 n'est pas génial..."
Alors, faudrait savoir, bien ou pas bien?
Mon site fonctionne parfaitement sans javascript, ce dernier n'est là que pour apporter des "plus".
En règle générale, je préfère ne jamais mettre de javascript.
Je crois que je vais laisser les commentaires conditionnels au dépit de certaine personnes.
et il sera valide w3c.
Autre chose :
En fait les commentaires contionnels "trompe" le test w3c, puisque celui ci ne voit plus les blocs dans du inline
bref...

quice a écrit :
J'ai fait une recherche sur votre site pour voir un peu si on abordait le même sujet et suis tombé sur un post d'une personne "tsumiko" qui à également mis des commentaires conditionnels et surprise Laurie-Anne lui répond "Ton bidouillage à coups de commentaires conditionnels pour que le menu se déroule avec IE6 n'est pas génial..."
Alors, faudrait savoir, bien ou pas bien?

Si c'est mal implémenté, c'est pas bien, si c'est bien implémenté c'est bien...

quice a écrit :
Mon site fonctionne parfaitement sans javascript, ce dernier n'est là que pour apporter des "plus".

Euh... Un menu déroulant c'est un plus. Tout ce qui est "animé" (pas dans le sens Flash) sur une page devrait être gérer en JS c'est à cela qu'il sert.

quice a écrit :
En règle générale, je préfère ne jamais mettre de javascript.

C'est une rêgle idiote et sans fondement. Le JavaScript (bien fait) c'est bon, mangézan !

quice a écrit :
Je crois que je vais laisser les commentaires conditionnels au dépit de certaine personnes.
et il sera valide w3c.
Autre chose :
En fait les commentaires contionnels "trompe" le test w3c, puisque celui ci ne voit plus les blocs dans du inline
bref...

Donc ton code n'est pas valide. Le validateur n'est qu'un outils, il contrôle certains points de validité, mais pas tous.

Laurie-Anne a écrit :
Si c'est mal implémenté, c'est pas bien, si c'est bien implémenté c'est bien...

Tu connais une autre façon de l'implémenter dans ce cas précis ? perso, je vois pas.

Laurie-Anne a écrit :
C'est une rêgle idiote et sans fondement. Le JavaScript (bien fait) c'est bon, mangézan !

J'ai dit "en règle générale", ca veut pas dire que j'en met jamais
la preuve, dans ce site j'ai mis de l'ajax, donc -> jquery (javascript)
et si le javascript est désactivé, traite de façon standard.

Laurie-Anne a écrit :
Donc ton code n'est pas valide. Le validateur n'est qu'un outils, il contrôle certains points de validité, mais pas tous.

ben voyons, quand on sait pas argumenter
pas fiable à 100% alors le validateur, donc des sites valides = doute?

quice a écrit :
ben voyons, quand on sait pas argumenter
pas fiable à 100% alors le validateur, donc des sites valides = doute?

Je vais considérer que tu es un débutant total et que tu ne sait pas du tout ce que tu dis...

Bon du coup, fait ce que tu veux avec ton menu, de toute façon tu as déjà décidé de ne pas écouter les avis des gens et tu as une solution (bancale mais qui fonctionne pour toi) qui te convient. Après tout, les aveugles (et autres handicapés) on s'en fout ! Pis ils utilisent pas d'ordinateur, tout le monde le sait !

ps. : oui c'est vendredÿ.

Je ne dirais qu'une chose :
MDR

Hello,

quice a écrit :
En fait les commentaires contionnels "trompe" le test w3c, puisque celui ci ne voit plus les blocs dans du inline
bref...

Comme tu l'as remarqué, ce genre de bidouille trompe le test du Validateur. C'est d'ailleurs normal.
Mais tu te doutes qu'"avoir un site valide" et "avoir un site avec des bidouilles qui trompent le validateur" sont évidemment deux choses complètement différentes : si tu envoies des éléments %block imbriqués dans des %inline à un navigateur (ici en l'occurence IE), il n'aura aucune base standard pour savoir comment les traiter.
Cela peut très bien s'afficher... ou pas.

Si c'est juste pour tromper le validateur, libre à toi. Mais si tu tiens à suivre *vraiment* les standards, tu n'imbriqueras pas de %block dans des %inline... même avec des bidouilles.
Modifié par Raphael (12 Mar 2010 - 14:11)

gc-nomade a écrit :

mais bon , le principe connu et qui fonctionne impose de se servir d'un tableau dans IE6 pour le sous-menu <edit> le lien est donné par MOox </edit>.

Tu dois en passer par js comme le dit Herman (pis les autres aussi en général) , et le seul truc peut-être interessant c'est les commentaires conditionnels et surtout apprendre a s'en servir a bon escient .
Si la correction que je te propose resous ton coté html , il reste inutilisable en css coté IE6 a mon sens , sans compter que pour IE6 et moins la structure html a interpreter reste invalide , ça sert a rien de jouer a l'autruche

J'ai quand même le sentiment que tout le monde te dit et te sugere la même chose ...
Pour le : JS .
au cas ou js est desactivé sur IE6 tu as un lien de toute façon , il te suffit de remettre dans cette page en lien ... les liens de ton sous menus . Ton contenu est toujours accessible même si il te faut un click supplémentaire pour voir ces liens ...

A la base tu as un truc pas mal , ne le gache pas .

GC