„grafische“ Aufbereitung Stammbaum

[Matthias Scharwies]

Servus!

Moin,

ich bin dabei, Personen einzugeben sowie deren Vater und Mutter. Jede Person bekommt eine id. Außerdem Geburts-Nachname, Vorname, geboren, gestorben usw.

Aus einer Liste kann eine beliebige Person in die Mitte der Sichtfläche gewählt werden und es sollen Großeltern, Eltern, Kinder und Enkel in Rechtecken angezeigt werden. Von den Angezeigten kann wieder einer in die Mitte gewählt werden, sodass man bequem den liegenden Baum rauf- und runterblättern kann.

(Halb-)Geschwister ergeben sich ja aus gleicher Mutter / gleichem Vater. Ehen oder Partnerschaften / Wohngemeinschaften werden nicht erfasst.

Links von der Hauptperson stehen dessen zwei Eltern untereinander, noch linker die vier Großeltern. Rechts Kinder und Enkel.

Das muss es doch schon irgendwo geben:

1. Versuch Wikipedia: Vorlage:Stammbaum erzeugt innerhalb einer Tabelle (bäh) Felder mit Unicode-Rahmenelementen.

Fazit Maximal die Optik so übernehmen.

2.Versuch Stack Overflow: displaying-genealogy-with-css3-html als Liste, die mit CSS gestylt wird - gefällt mir schon besser.

Hier das JSFiddle: http://jsfiddle.net/bZGFA/32/

Fazit würd ich so nehmen

Problem:

Wie bekomme ich das hin, dass die Enkel dem richtigen Kind zugeordnet werden? Also Kind und dessen Kinder in einem Umkarton?

Gr-Eltern Eltern  Mitte    Kinder  Enkel
+----+                   +------------------+
|    |                   | +----+  +-----+  |
+----+    +----+         | | K1 |  | E11 |  |
          |    |         | +----+  +-----+  |
+----+    +----+         |         +-----+  |
|    |                   |         | E12 |  |
+----+            +----+ |         +-----+  |
                  |    | +------------------+
+----+            +----+ +------------------+
|    |                   | +----+  +-----+  |
+----+    +----+         | | K2 |  | E21 |  |
          |    |         | +----+  +-----+  |
+----+    +----+         |         +-----+  |
|    |                   |         | E22 |  |
+----+                   |         +-----+  |
                         |         +-----+  |
                         |         | E23 |  |
                         |         +-----+  |
                         +------------------+

Nice to have: Unter der Grafik ein Zeitbalken (Jahreszahlen) und die einzelnen Personen nach ihrem Geburtsjahr eingerückt.

Evtl. so: HTML/Tutorials/Listen/Gestaltung mit CSS#Eine Liste als Zeitstrahl

Herzliche Grüße

Matthias Scharwies