Jonas: Stammbaum - Linien erstellen mit CSS

Ich mache zurzeit einen Stammbaum, der mit PHP erstellt wird. Ich möchte nun mit Linien die einzelnen Personen verbinden. Wie kann ich das realisieren, dass die Linien genau in der Mitte der CSS-Boxen sind?

http://da-js.kilu.de/stammbaum.bmp

  1. Hi

    ich würde es, der Einfachheit halber, mit einer Tabelle lösen.

    Bei Wikipedia gibt es den Artiekl über die WM 2006 Finalrunde in dem ein Baum genauso dargstellt wird.

    so long
    Ole
    (8-)>

    --
    Stickstoff eignet sich nicht für Handarbeiten.
    1. Hi

      ich würde es, der Einfachheit halber, mit einer Tabelle lösen.

      Bei Wikipedia gibt es den Artiekl über die WM 2006 Finalrunde in dem ein Baum genauso dargstellt wird.

      so long
      Ole
      (8-)>

      Ich habe mir den Quelltext angeschaut, aber mir ist nicht ganz klar wie die Linien letztendlich erstellt wurden. Das Problem ist ja auch, dass ich nicht zwei Spalten direkt übereinander habe.

      1. Hi

        Ich habe mir den Quelltext angeschaut, aber mir ist nicht ganz klar wie die Linien letztendlich erstellt wurden. Das Problem ist ja auch, dass ich nicht zwei Spalten direkt übereinander habe.

        Das mit den Linien ist recht einfach gelößt. Es sind Rahmen von Tabellenzellen :)

        Um mit diese Methode eine Linie bei einer ungrade Anzahl von Parteien mittig zu bekommen, muß der mittlere Eintrag einfach über zwei Zeilen gehen.

        so long
        Ole
        (8-)>

        --
        Stickstoff eignet sich nicht für Handarbeiten.
        1. Hi

          Ich habe mir den Quelltext angeschaut, aber mir ist nicht ganz klar wie die Linien letztendlich erstellt wurden. Das Problem ist ja auch, dass ich nicht zwei Spalten direkt übereinander habe.

          Das mit den Linien ist recht einfach gelößt. Es sind Rahmen von Tabellenzellen :)

          Um mit diese Methode eine Linie bei einer ungrade Anzahl von Parteien mittig zu bekommen, muß der mittlere Eintrag einfach über zwei Zeilen gehen.

          so long
          Ole
          (8-)>

          Stimmt! Danke!

        2. Hi

          Ich habe mir den Quelltext angeschaut, aber mir ist nicht ganz klar wie die Linien letztendlich erstellt wurden. Das Problem ist ja auch, dass ich nicht zwei Spalten direkt übereinander habe.

          Das mit den Linien ist recht einfach gelößt. Es sind Rahmen von Tabellenzellen :)

          Um mit diese Methode eine Linie bei einer ungrade Anzahl von Parteien mittig zu bekommen, muß der mittlere Eintrag einfach über zwei Zeilen gehen.

          so long
          Ole
          (8-)>

          So ich habs jetzt hinbekommen:

          <HTML>
          <HEAD>
           <TITLE>New Document</TITLE>
          </HEAD>
          <BODY>

          <table border="1">
          <tr><td></td><td></td><td>&nbsp;</td><td rowspan="2">Sohn 1</td></tr>
          <tr><td></td><td></td><td>&nbsp;</td></tr>
          <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
          <tr><td rowspan="2">Vater</td><td>&nbsp;</td><td>&nbsp;</td><td rowspan="2">Sohn 2</td></tr>
          <tr><td>&nbsp;</td><td>&nbsp;</td><td></td></tr>
          <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
          <tr><td></td><td></td><td>&nbsp;</td><td rowspan="2">Sohn 3</td></tr>
          <tr><td></td><td></td><td>&nbsp;</td><td></td></tr>
          </table>

          </BODY>
          </HTML>

          Aber wie ziehe ich jetzt die Linien? in SELFHTML steht nur für <table> was, aber ich muss das doch ganz spezifisch angeben? Wie sag ich ihm jetzt, dass er in einer Zelle die Linie unten hat, in der andere an der Seite etc.?

          1. Hi

            Ich habe mir den Quelltext angeschaut, aber mir ist nicht ganz klar wie die Linien letztendlich erstellt wurden. Das Problem ist ja auch, dass ich nicht zwei Spalten direkt übereinander habe.

            Das mit den Linien ist recht einfach gelößt. Es sind Rahmen von Tabellenzellen :)

            Um mit diese Methode eine Linie bei einer ungrade Anzahl von Parteien mittig zu bekommen, muß der mittlere Eintrag einfach über zwei Zeilen gehen.

            so long
            Ole
            (8-)>

            So ich habs jetzt hinbekommen:

            <HTML>
            <HEAD>
            <TITLE>New Document</TITLE>
            </HEAD>
            <BODY>

            <table border="1">
            <tr><td></td><td></td><td>&nbsp;</td><td rowspan="2">Sohn 1</td></tr>
            <tr><td></td><td></td><td>&nbsp;</td></tr>
            <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
            <tr><td rowspan="2">Vater</td><td>&nbsp;</td><td>&nbsp;</td><td rowspan="2">Sohn 2</td></tr>
            <tr><td>&nbsp;</td><td>&nbsp;</td><td></td></tr>
            <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
            <tr><td></td><td></td><td>&nbsp;</td><td rowspan="2">Sohn 3</td></tr>
            <tr><td></td><td></td><td>&nbsp;</td><td></td></tr>
            </table>

            </BODY>
            </HTML>

            Aber wie ziehe ich jetzt die Linien? in SELFHTML steht nur für <table> was, aber ich muss das doch ganz spezifisch angeben? Wie sag ich ihm jetzt, dass er in einer Zelle die Linie unten hat, in der andere an der Seite etc.?

            Ich hab nochmal gesucht und festgestellt, dass das per CSS geht. Aber wenn ich über border gehe, dann ist die linie trotzdem nicht ganz in der Mitte. Wie kann ich denn die Linie zwischen zwei Zellen erfassen?

            1. hi

              erstmal solltest du üben, anständig zu zitieren. immer das ganze posting drinstehen zu lassen macht die sache nicht übersichtlicher. :)

              Ich hab nochmal gesucht und festgestellt, dass das per CSS geht. Aber wenn ich über border gehe, dann ist die linie trotzdem nicht ganz in der Mitte. Wie kann ich denn die Linie zwischen zwei Zellen erfassen?

              Damit die Linie in der Mitte ist, muß die Zelle welche über 2 Zeilen geht so hoch sein, wie die Beiden Zellen und der Rahmen.
              Dabei empfiehlt es sich die eine Hälfte der Breite des Rahmens auf die obere und die andere auf die untere Zelle zu verteilen. Dein Rahmen hätte somit ein Breite von min. 2px.

              so long
              Ole
              (8-)>

              --
              Stickstoff eignet sich nicht für Handarbeiten.
              1. Damit die Linie in der Mitte ist, muß die Zelle welche über 2 Zeilen geht so hoch sein, wie die Beiden Zellen und der Rahmen.

                Das Problem ist, dass die Zellhöhe nicht immer gleich ist. Ich generiere das mit PHP, also ist der Wert immer anders.