2013-03-22 15 views
24

Potrzebuję stworzyć bardzo skomplikowany diagram dla strony internetowej, w której hierarchia będzie trochę nieporządna: strzałki będą się poruszać w górę iw dół, czasami element wskaże kilka innych, a czasem będzie kilka elementów wskazujących na to samo. Znalazłem this method, ale nie pozwala on więcej niż jednemu rodzicowi na element i dlatego nie zrobi tego w tym przypadku.Jak utworzyć schemat blokowy/diagram używając tylko HTML i CSS

Musi to być zrobione w HTML/CSS, ponieważ moim zamiarem jest dodanie JavaScriptu, aby zmienić zawartość bloków w sposób dinamiczny.

Jest to przykład od poziomu skomplikowania muszę osiągnąć: chart

+0

Wszystkie te elementy można tworzyć i umieszczać w czystym HTML/CSS za pomocą znaczników, pseudoelementów (np. ': Before'), transformacji css3 i pozycjonowania absolutnego, ale należy pamiętać, że nie będzie to zbyt duże rozwiązanie przeglądarki i na pewno wymaga to dużo pracy. :) –

+3

spojrzałeś na tę http://astuteo.com/slickmap/ czy to ta sama umowa? naprawdę nie przeszedłem – btevfik

+0

@nd_macias Twoje rozwiązanie brzmi solidnie. Jednak nie sądzę, że nie mam ani czasu, ani umiejętności CSS, aby to zrobić w ten sposób. Będę musiał dalej szukać. W każdym razie dzięki. – Variax

Odpowiedz

2

Innym szukać jest SpaceTree example przez "Nicolas Garcia Belmonte", ale nie jest to czyste rozwiązanie CSS. Jest zgodny z IE i większością przeglądarek. Zdecydowanie warto spróbować.

+0

OK, czy mogę zapytać o wspaniałą osobę, która mówi, że to nie było przydatne? czy mógł (a) nam powiedzieć, dlaczego uważa, że ​​to nie było przydatne? Dostarczyłem mały projekt z tego powodu i było mi bardzo miło pracować z tym. Zgadzam się, że nie jest to bardzo elastyczne, ale można je zmienić, aby pasowało do twoich potrzeb. –

Powiązane problemy