Arborescence d'un tableau en DIV

Bonjour à toutes et à tous,

Je suis actuellement sur un mini projet perso qui me permet d'apprendre à exploiter correctement la librairie prototype.js. (mon problème n'est pas lié à protoype )

Tout d'abord l'adresse où l'on peut voir la chose : http://www.albyor.net/dinoz

Le principe est le suivant (je en vais pas faire un copier-coller du code, cela serait trop long ):
J'ai un fichier de définition JSON de "compétences" (http://www.albyor.net/dinoz/lib/competence.json)
J'ai une classe javascript qui permet de parcourir l'arborescence (http://www.albyor.net/dinoz/lib/objsite.js)

Pour le moment, j'affiche le résultat de l'arborescence sous forme de liste à puces.
Mais cela ne me convient pas

J'aimerai afficher le résultat avec des blocs div.
Le principe étant de pouvoir faire une arborescence de ce genre :

http://www.albyor.net/dinoz/hierrarchie.png

Ce qui me permettrait aussi de rajouter des effets dynamiques.

Bien sur, le nombre d'éléments "fils" sont variables, sinon c'est trop facile.

Mais voilà ... je ne vois pas par où prendre le problème.
Comment gérer la hiérarchisation ?

Quelqu'un connait quelque chose qui y ressemble ?
Ou quelqu'un pourrait m'aiguiller sur le sujet ?

(je me permet de rappeler que le principe de ce code est d'apprendre à le faire. Je ne cherche pas une solution toute faite.)

Merci de votre aide.
Modifié par Leorilan (23 Dec 2009 - 11:51)

Salut,

Ton problème se situe au niveau du choix du code html pour structurer cette information, ou au niveau de la CSS pour la mettre en forme dans l'esprit du schéma que tu as joint à ta question ?

Va voir par ici : Arborescences faciles

Ça devrait te donner quelques pistes.

salut

une petite erreur. le code suivant est mal placé, il doit venir avant la balise de fermeture du body.

<script> 
document.observe('dom:loaded', function() {
	$$('img').invoke('observe', 'mouseover', MySite.over.bind(MySite)).invoke('observe', 'mouseout', MySite.out.bind(MySite))
});
 
MySite.AfficheCompetence();
MySite.AfficheListe();
</script>

et il manque le type de la balise script, obligatoire en strict. pour le placement, des divs en absolus. non?

et çà, c'est curieux

<script language="Javascript" src="lib/competence.json"> </script>

c'est javascript qui charge les fichiers json d'ordinaire. et puis tient, çà, c'est interdit en strict.
language="Javascript"