Generating a genealogy tree using CSS.

Page 1 of 1

2 Replies - 866 Views - Last Post: 10 July 2012 - 03:35 AM

#1 joefazee  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 22-August 08

Generating a genealogy tree using CSS.

Posted 07 July 2012 - 04:21 AM

i`m trying to generate something like http://ckdigital.net...family-tree.htm, i will really want to avoid javascript as much as possible, though not totally but if it can possibly be done using CSS. the data is coming from database through PHP. I would have consider external program but like you see on the tree, we have some editable content on the box so like a drop down menu.

The tree may grow more than the attached image but i think the concept should apply to bigger version of the tree if possible.


i`m attaching the sample of the tree image in case you don`t want to click on the link.
Thank you in advance.

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: Generating a genealogy tree using CSS.

#2 BenignDesign  Icon User is offline

  • I cause cancer.
  • member icon




Reputation: 4662
  • View blog
  • Posts: 8,888
  • Joined: 28-September 07

Re: Generating a genealogy tree using CSS.

Posted 07 July 2012 - 05:25 AM

CSS isn't a programming language. It is only a list of style rules for HTML. You could likely create something that LOOKS like what you're asking with CSS, but if you want it to actually FUNCTION, you'll have to use an actual programming language.
Was This Post Helpful? 0
  • +
  • -

#3 Lazy Vulpes  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 60
  • Joined: 02-May 12

Re: Generating a genealogy tree using CSS.

Posted 10 July 2012 - 03:35 AM

Something like this?

Posted Image

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>without border</title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">

#root
{
text-align:center;
display:inline-block;
padding-left:10px;
padding-right:10px;
}

.family
{
float:left;
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
}

.fmember{
display:inline-block;
padding-left:10px;
border-right:1px solid #000;
border-bottom:1px solid #000;
text-align:center;
padding-right:10px;
padding-top:10px;
margin-right:10px;
}

.partner{
border-right:1px solid #000;
display:inline-block;
padding-right:10px;
margin-top:10px;
text-align:center;
padding-bottom:10px;
}

.children
{
border-top:1px solid #000;
}
</style>
</head>
<body>
	<div id="root">
		<div class="partner">a</div><div class="fmember">b</div>
		<div class="children">
			<div class="family">
				<div class="partner">c</div><div class="fmember">ab1</div>
				<div class="children">
					<div class="partner">f</div><div class="fmember">ab1c1</div>
					<div class="fmember">ab1c2</div>
				</div>
			</div>
			<div class="family">
				<div class="partner">d</div><div class="fmember">ab2</div>
				<div class="children">
					<div class="family">
						<div class="partner">g</div><div class="fmember">ab2d1</div>
						<div class="children">
							<div class="fmember">ab2d1g</div>
						</div>
					</div>
					<div class="fmember">ab2d2</div>
				</div>
			</div>
			<div class="partner">e</div><div class="fmember">ab3</div>
			<div class="fmember">ab4</div>
		</div>
	</div>
</body>
</html>


As for the functionality, I'm guessing you could do something like looping through the dom showing/hiding divs.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1