[Résolu] Boutons (puces) avec UL LI qui ne marchent pas

Je réalises un site en AJAX, et tout marche bien à l'exeption des boutons (puces) avec UL LI qui ne marchent pas. ils sont dans ce contexte

<span class='LaFonte_blog_left'><p class='Leleft'>
<ul><a onClick='LaPage("conseil")' class='LesA32' style='cursor:pointer;'><li>Voir le petit résumé des conseils que je leurs avait donnée</li> </a><br />
<a onClick='LaPage("resultats")' class='LesA32' style='cursor:pointer;'><li>Voir les résultats actuels </li></a><br />
<a onClick='LaPage("notation1")' class='LesA32' style='cursor:pointer;'><li>Ou allez directement à la notation</li></a></ul><br />
</p></span>

Pouvez vous me dire pourquoi ?
En mettant les <li> et </li> avant et après les <a> </a> même erreur
Merci d'avance
Modifié par Christele (02 Sep 2014 - 11:59)

Hello,

Christele a écrit :
En mettant les <li> et </li> avant et après les <a> </a> même erreur

Et quelle est l'erreur en question au juste ?

Du reste, ton code n'est effectivement de toute façon pas valide, puisque l'enfant direct de <ul> doit être <li>. Après ton problème vient sans doute de ton code JS (fonction LaPage() ?) mais de toute façon, il faut que tu corrige ton code HTML afin de présenter la structure suivante :

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

Les éléments <br /> sont inutiles et même néfastes pour une bonne mise en forme de ton menu, et ce menu ne devrait pas être intégré à l'intérieur d'un <span>, et pas non plus à l'intérieur d'un paragraphe (attention à la soupe de balise).

Au passage, pour bien faire les choses, tu ne devrais pas avoir de styles CSS inline et ton code JS devrait également être sorti du balisage HTML
Modifié par audrasjb (02 Sep 2014 - 12:13)

Bonjour bonjour,

Un peut d'indentation rendrait tout ça plus lisible !
Ensuite pas besoin de br entre les li.
Il y a une imbrication span > p > ul qui me semble un peu "maladroite" (en syntaxe et en utilité).
Le onClick peut également se poser directement sur le li (quitte a ne pas utiliser le href...)

<ul class='LaFonte_blog_left'>
  <li onClick='LaPage("conseil")' class='LesA32'>Voir le petit résumé des conseils que je leurs avait donnée</li>
  <li onClick='LaPage("resultats")' class='LesA32' >Voir les résultats actuels </li>
  <li onClick='LaPage("notation1")' class='LesA32' >Ou allez directement à la notation</li>
</ul>

On y voit déjà un poil plus clair no ?

Ensuite, qu'est-ce qui ne marche pas ? Quand tu cliques dessus rien ne se passe ? Y a-t-il une erreur dans la console de FireBug ? Tu as un exemple en ligne (http://www.fox-infographie.com/ ?) ?

_laurent a écrit :
Le onClick peut également se poser directement sur le li

C'est vrai, mais cela peut poser des problèmes d'accessibilité (un lien est un élément focusable et doté d'un appel à action par nature, un item de liste beaucoup moins)

Ouais j'ai hésité Merci de me reprendre.
Mais même sans href et avec un onClick le <a> va garder ses propriétés d'accessibilité ?

Ben pourquoi ne pas mettre de valeur pour l'attribut href ?

Bah dans son exemple il n'y a pas de href vu qu'elle change les pages en Js, enfin de ce que j'en déduit :

Christele a écrit :
Je réalises un site en AJAX

<a onClick='LaPage("notation1")' class='LesA32' style='cursor:pointer;'>

C'est pour ça que j'ai osé proposé ça avec un "quitte a ne pas utiliser le href..."

Whaou mille mercis je vais éclaircir tout cela, en fait tout marche très bien, l'AJAX également, juste je n'ais pas les puces noir !
Merci de toutes vos réponses j'ais signalé dans ma question que la forme avec les LI encadrant les anchores ne marche pas non plus

Bon, encore merci, et je revient vous informer avant ce soir

Christele a écrit :
juste je n'ais pas les puces noir

Ah bah si c'est juste les puces c'est que du css doit les enlever (un reset css quelquepart ?).
Regardes du coté des list-style (notamment list-style-type)
Bon courage
Modifié par _laurent (02 Sep 2014 - 14:07)

_laurent a écrit :

Ah bah si c'est juste les puces c'est que du css doit les enlever (un reset css quelquepart ?).
Regardes du coté des list-style (notamment list-style-type)
Bon courage

RahRah Evidemment ! et ça marche !!
Bravo et merci