Got a new idea for family tree styling

Blog ≫ 2016 ≫ Got a new idea for family tree styling

Tue Sep 27

Right now I have code structured something like this to do the family tree on the homepage. Using our real family data to make it clear who goes where:

UL
  LI
    UL
      LI Dad
      LI Mum
    /UL
    Paul (me)
    OL
      LI Thing one
      LI Thing two
    /OL
  /LI
/UL

so that neatly shows that Mum and Dad are my parents, and the boys are my children. It's scalable, I can neatly add in more children for the children and more parents for the parents and so on, but it doesn't allow for Clare, or for Kerry, they should fit in there too. So I need a rethink. I wonder if it can be more like: who goes where:

UL
  LI
    UL.parents
      LI Dad
      LI Mum
    /UL
    OL
      LI
        Paul (me)
        DIV.spouse Clare
        OL
          LI Thing one
          LI Thing two
        /OL
      /LI
      LI
        Kerry
        OL
          LI George
          LI [Jack](/wiki/#jack)
        /OL
      /LI
    /OL
  /LI
/UL

If I can style that nicely, then it could be a goer...

Just thinking out loud here really, this means nothing to you...

The problem with a family tree is it's very hard to show all of parents, children, siblings, and spouse at the same time on a two dimensional chart. If you can do it with html I think you have to differentiate between traversing up the tree, and traversing down the tree... a chart of descendents is a bit different to a chart of ancestors. Think I can do it though. I'm using UL (unordered list html element) to mean "parents" and OL (ordered list element) to mean children... sort of works, not too weird I don't think.

Clare said "can't you just look up how other people have done it and just copy the best one?". I should do more investigation, but I think that this could be the best one... we'll see.

My styling so far is at [url]/css/_tree.css[/url]. I started from this css3 chart ¹ but soon hit its limitations.

Removed old thecodeplayer.com/walkthrough/css3-family-tree link here.

💬 I've implemented that now, it's on the homepage

⬅️ Same DPD driver is redelivering my parcel today :: Twenty years ago today I was at Longpigs at the Astoria ➡️