Organigramme

Bonjour,

Je souhaiterais mettre en place un organigramme sur un site web, sauf que l'organigramme n'est pas vraiment hiérarchique, c'est à-dire qu'un "fils" peut avoir plusieurs pères (il s'agit d'une chronologie historique). Je suis loin d'être une lumière en CSS, mais je suis assez opiniâtre.
L'objectif est de pouvoir "cliquer" sur chaque élément afin d'afficher des informations complémentaires sur une autre page (mais ça, je "maîtrise" un peu plus...).

J'ai passé en revue de nombreux sites et j'ai lu un certain nombre d'articles à ce sujet.
Bon, à la limite, positionner des "boîtes" sur des lignes consécutivement, je dois pouvoir le faire, mais pour les liens, je ne sais pas trop... et puis j'ai peur de la compatibilité

Avez-vous des idées sur le sujet (j'ai notamment été sur le site http://WWW.SCOTTJEHL.COM qui traite du sujet mais d'une part l'exemple illustre un organigramme purement hiérarchique et s'appuie une structure en liste et d'autre part, il n'est pas compatible en IE)?
Merci par avance....

Salut,

Pourrais-tu réaliser un bref croquis de ce que tu souhaites obtenir et le poster ici ? Histoire qu'on sache exactement de quoi il s'agit

oui bien sûr. voici un exemple succint (mais ce que je veux faire est bien sûr plus complexe)


Merci de cliquer sur la prévisualisation afin de vous rendre un peu mieux compte (la previsu n'est pas suffisante pour se faire une idée).

Merci de vos propositions (et notamment pour le traçage des traits horizontaux et verticaux et la compatibilité inter navigateurs).

Salut,

Perso, je ne vois pas de solution simple. Là, dans l'absolu, sans connaître le contenu qui va figurer dans les blocs, je ferais une ul pour l'ensemble, et chaque ligne horizontale de l'organigramme dans une ul enfant.

Et pour les lignes, à moins d'utiliser canvas, SVG, ou des bidouilles avec des bordures de div vides, je sèche . Donc si tu veux rester en HTML/CSS, peut-être une image de fond avec les lignes, mais tu n'auras aucune flexibilité sur la structure, et tu devras te retaper l'image à chaque modification.

Peut-être que quelqu'un d'autre aura une meilleure idée.

Hello gabuzomeu1 et bienvenue sur le forum,

Je te propose de télécharger Dia (lien dans ma signature) et faire ton organigramme avec. Voici cet exemple ou celui-ci que tu peux faire avec ce logiciel gratuit facile et efficace.

Pour ce qui est des liens, je pense à la série d'éléments <map>,<area>, ...

D'un point de vu accessibilité, il me semble que c'est bon en lisant cette réponse sur le forum accessibilité.

Bonne soirée à toi.
Modifié par Nolem (06 Jul 2009 - 20:30)

Tout d'abord merci pour vos suggestions.

Pour marcv: Oui, j'avais pensé finalement à quelque chose d'approchant en considérant finalement la page comme un tableau à 2 dimensions, où "j'éteindrais" les cases qui ne feraient pas partie de mon organigramme. Reste le problème des lignes...

Pour Nolem: DIA, je ne crois pas que ça fasse ce que je souhaite, car j'ai besoin de faire une page web avec des liens hypertextes depuis chaque rectangle composant mon "organigramme". Or, là apparemment, ce qui est généré est un fichier image "jpg" ou "png"

Hello,

gabuzomeu1 a écrit :

...

Pour Nolem: DIA, je ne crois pas que ça fasse ce que je souhaite, car j'ai besoin de faire une page web avec des liens hypertextes depuis chaque rectangle composant mon "organigramme". Or, là apparemment, ce qui est généré est un fichier image "jpg" ou "png"

Nolem a écrit :

Pour ce qui est des liens, je pense à la série d'éléments <map>,<area>, ...

Je te propose de parcourir cette page et lire attentivement le paragraphe : « La balise <map> et ses
attributs »

Cependant, je rajouterai deux petites choses suite à la lecture du lien ci-dessus :
* L'élément img doit s'écrire ainsi :

<img {liste des attributs nécessaires avec leurs valeurs respectives} {espace}/>

* Mieux vaut mettre en forme en CSS qu'en HTML


Bonne lecture
Modifié par Nolem (08 Jul 2009 - 15:23)