2013-03-22 6 views
24

Ich muss ein wirklich kompliziertes Diagramm für eine Website erstellen, in der die Hierarchie ein wenig chaotisch sein wird: Pfeile werden auf und ab gehen, manchmal wird ein Element zeigen einige andere, und manchmal gibt es mehrere Elemente, die auf denselben verweisen. Ich habe gefunden this method, aber es erlaubt nicht mehr als ein Elternteil für ein Element und wird daher in diesem Fall nicht den Trick tun.So erstellen Sie ein Flussdiagramm/Diagramm mit nur HTML und CSS

Es muss in HTML/CSS gemacht werden, weil ich etwas Javascript hinzufügen möchte, um den Inhalt der Blöcke dynamisch zu ändern.

Dies ist ein Beispiel für den Grad der Komplexität ich erreichen müssen: chart

+0

Alle diese Elemente können in reinem HTML/CSS mit Tags, Pseudoelementen (wie ': before'), css3-Transformationen und absoluter Positionierung erstellt und positioniert werden, aber bedenken Sie, dass es kein großes Kreuz ist Browser-Lösung und es wird definitiv eine Menge Arbeit. :) –

+3

hast du dir das angesehen http://astuteo.com/slickmap/ ist es das Gleiche? Ich ging nicht wirklich durch – btevfik

+0

@nd_macias Ihre Lösung klingt solide. Ich denke jedoch nicht, dass ich weder die Zeit noch die CSS-Fähigkeiten dafür habe. Ich muss weiter nachsehen. Trotzdem danke. – Variax

Antwort

2

Eine weitere für nehmen wollen zu suchen ist SpaceTree example durch "Nicolas Garcia Belmonte", aber keine reine CSS-Lösung. Es ist kompatibel mit IE und den meisten Browsern. Auf jeden Fall einen Versuch wert.

+0

Ok, kann ich die ehrfürchtige Person fragen, die sagt, dass das nicht nützlich war? Kann er uns bitte sagen, warum er das nicht für nützlich hält? Ich habe ein kleines Projekt daraus gemacht und es hat so viel Spaß gemacht mit diesem zu arbeiten. Ich stimme zu, es ist nicht super flexibel, aber kann geändert werden, um Ihrem Bedarf zu entsprechen. –

Verwandte Themen