Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Making Family Tree for Website, Any Ideas?

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #34044
    cnwtx
    Member

    I’m trying to make a family tree-style list in HTML. It needs to start at the top of the page, then spread out as it goes down the page. It needs to be a flexible layout, i.e it’s not always going to get wider on the next level down. I’ve tried using tables, then setting properties for one border to make the lines in between names, but that just turned into a big mess. Any ideas?
    Thanks,
    Cliff

    #85528
    mcguiver178
    Member

    use divs within divs man, you have to give your body a min width, then center it in the page with margin:0 auto;
    , and go from there, once you have the beginning centered, you can just start adding the divs and floating them against eachother. just dont forget to clear after each row (if you’re gonna go by rows).

    #85533
    TheDoc
    Member

    Yikes – sounds like a whole lot of trouble.

    I would look at other sites and see how they are doing it. If they aren’t using Flash, they’ll definitely be using some JS to make the HTML part work a little better.

    #85536
    Mottie
    Member

    Maybe look into one of these:

    Google visualization
    Yahoo Pipes
    jsPlumb
    Processing JS (see Ask Ken for an example)

    #85564
    mcguiver178
    Member

    it would deffinately make it look better, but if he wants to keep it simple, he could go for the HTML divs… altho the connecting thingy is the part I ommited… that would be bad….

    #85569
    Dreamdealer
    Member

    You could generate a familty tree using a library like Raphael.js.

    #85573
    Brightonmike
    Member

    You could surely do this with lists? Child elements etc?

    #85574
    jamygolden
    Member

    I’ve done this before. However the depth of the list must have a limit. @cnwtx is there a depth limit to the family tree?

    #116663
    Dlad24
    Member

    This is what i used,
    http://www.thecodeplayer.com/walkthrough/css3-family-tree
    It just uses a crapload of nested lists,
    The only problem is married people have to be in the same boxand it gets quite big towards the bottom

    #131496
    gingell
    Participant

    I have a solution similar to the one on thecodeplayer.com. It works a treat and supports multiple marriages. You can view it here –

    http://www.gingell.com/familytree/?tree=00001

    #255390
    JasonLabs
    Participant

    Gingell, that looks amazing! Do you release the source on how you built it?

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘CSS’ is closed to new topics and replies.