Pedigree chart ( family tree )

HTML & CSS
1

With help from ahundiak on the php forum I now have an array of relatives which I want to display like this:

More by luck than anything else I currently have:

To do this I have created a div for each image in the php loop that displays the data. Each generation has a number and to get the horizontal spacing I have multiplied the generation number by 265. This is the code for the div:

$div = "
position: relative;
padding: 0px 5px 1px 5px;
margin-top: 5px;
margin-left: $x;
background-color: $background;
border: 1px black solid;
width:250px;";

As you can see I need to sort the vertical spacing and before I tried to do it with the method I currently have I wondered if I am barking up the wrong tree.

Has anyone any comments or alternative methods that would be better / easier to implement ?

Nearly forgot - this is the data I am working with and the first number is the generation which I can use in any if statements or calculations.

0 1 Willow as in tree
1 2 Puppies father
1 3 Puppies mother
2 4 Grandparent 21
2 5 Grandparent 22
2 6 Grandparent 23
2 7 Grandparent 24
3 8 GT Grandparent 31
3 9 GT Grandparent 32
3 10 GT Grandparent 33
3 11 GT Grandparent 34
3 12 GT Grandparent 35
3 13 GT Grandparent 36
3 14 GT Grandparent 37
3 15 GT Grandparent 38

2

That is my css except for:


body {
margin:0;
padding:0;
line-height: 1.5em;
}

#maincontainer {
width: 960px;
margin: 0 auto;
}

I was wondering about using columns; if you have any ideas I can implement them as so far I am ony trying out different ideas.

The problem I am having currently is when I am changing top margins and the top relative spacing on one div it is messing up another. My latest div as an example from the html is:


<body>
<div id="maincontainer">
<div style="
position: relative;
padding: 0px 5px 1px 5px;
top: 600;
left: 0;
margin-top: 20;
background-color: pink;
border: 1px black solid;
width:250px;">Generation = 0<br>
 ID number = 1<br>
 Kenel club name = Willow as in tree </div><br>
<div style="
position: relative;
padding: 0px 5px 1px 5px;
top: 200;
left: 265;
margin-top: 250;
background-color: lightblue;
border: 1px black solid;
width:250px;">Generation = 1<br>

 ID number = 2<br>
 Kenel club name = Puppies father </div><br>
<div style="
position: relative;
padding: 0px 5px 1px 5px;
top: 200;
left: 265;
margin-top: 250;
background-color: pink;
border: 1px black solid;
width:250px;">Generation = 1<br>
 ID number = 3<br>
 Kenel club name = Puppies mother </div><br>
3

Well your best best would be to have columns of the data and place each level accordingly. Right now it looks like relative positioning (or margins) would achieve the effect you want.

Your current HTML/CSS would be needed if you want exact code :).

4

As I say I am creating the css dynamicaly from within the php code but if you can sort out the layout etc. I should be able to write that into my code.

The layout is a bit different to the photo now as I have been messing with the top margin etc. a bit on the first 3 boxes from the left.


<html>
<head>
<style>
body {
	margin:0;
	padding:0;
	line-height: 1.5em;
}

#maincontainer {
	width: 960px;
	margin: 0 auto;
}
</style>

<body>
<div id="maincontainer">
<div style="
position: relative;
padding: 0px 5px 1px 5px;
top: 600;
left: 0;
margin-top: 20;
background-color: pink;
border: 1px black solid;
width:250px;">Generation = 0<br>
 ID number = 1<br>
 Kenel club name = Willow as in tree </div><br>
<div style="
position: relative;
padding: 0px 5px 1px 5px;
top: 200;
left: 265;
margin-top: 250;
background-color: lightblue;
border: 1px black solid;
width:250px;">Generation = 1<br>

 ID number = 2<br>
 Kenel club name = Puppies father </div><br>
<div style="
position: relative;
padding: 0px 5px 1px 5px;
top: 200;
left: 265;
margin-top: 250;
background-color: pink;
border: 1px black solid;
width:250px;">Generation = 1<br>
 ID number = 3<br>
 Kenel club name = Puppies mother </div><br>
<div style="
position: relative;
padding: 0px 5px 1px 5px;
top: 20;
left: 530;
margin-top: 20;
background-color: lightblue;
border: 1px black solid;
width:250px;">Generation = 2<br>
 ID number = 4<br>

 Kenel club name = Grandparent 21 </div><br>
<div style="
position: relative;
padding: 0px 5px 1px 5px;
top: 20;
left: 530;
margin-top: 20;
background-color: pink;
border: 1px black solid;
width:250px;">Generation = 2<br>
 ID number = 5<br>
 Kenel club name = Grandparent 22 </div><br>
<div style="
position: relative;
padding: 0px 5px 1px 5px;
top: 20;
left: 530;
margin-top: 20;
background-color: lightblue;
border: 1px black solid;
width:250px;">Generation = 2<br>
 ID number = 6<br>
 Kenel club name = Grandparent 23 </div><br>

<div style="
position: relative;
padding: 0px 5px 1px 5px;
top: 20;
left: 530;
margin-top: 20;
background-color: pink;
border: 1px black solid;
width:250px;">Generation = 2<br>
 ID number = 7<br>
 Kenel club name = Grandparent 24 </div><br>
<div style="
position: relative;
padding: 0px 5px 1px 5px;
top: 20;
left: 795;
margin-top: 20;
background-color: lightblue;
border: 1px black solid;
width:250px;">Generation = 3<br>
 ID number = 8<br>
 Kenel club name = GT Grandparent 31 </div><br>
<div style="
position: relative;
padding: 0px 5px 1px 5px;
top: 20;
left: 795;
margin-top: 20;
background-color: pink;
border: 1px black solid;
width:250px;">Generation = 3<br>

 ID number = 9<br>
 Kenel club name = GT Grandparent 32 </div><br>
<div style="
position: relative;
padding: 0px 5px 1px 5px;
top: 20;
left: 795;
margin-top: 20;
background-color: lightblue;
border: 1px black solid;
width:250px;">Generation = 3<br>
 ID number = 10<br>
 Kenel club name = GT Grandparent 33 </div><br>
<div style="
position: relative;
padding: 0px 5px 1px 5px;
top: 20;
left: 795;
margin-top: 20;
background-color: pink;
border: 1px black solid;
width:250px;">Generation = 3<br>
 ID number = 11<br>

 Kenel club name = GT Grandparent 34 </div><br>
<div style="
position: relative;
padding: 0px 5px 1px 5px;
top: 20;
left: 795;
margin-top: 20;
background-color: lightblue;
border: 1px black solid;
width:250px;">Generation = 3<br>
 ID number = 12<br>
 Kenel club name = GT Grandparent 35 </div><br>
<div style="
position: relative;
padding: 0px 5px 1px 5px;
top: 20;
left: 795;
margin-top: 20;
background-color: pink;
border: 1px black solid;
width:250px;">Generation = 3<br>
 ID number = 13<br>
 Kenel club name = GT Grandparent 36 </div><br>

<div style="
position: relative;
padding: 0px 5px 1px 5px;
top: 20;
left: 795;
margin-top: 20;
background-color: lightblue;
border: 1px black solid;
width:250px;">Generation = 3<br>
 ID number = 14<br>
 Kenel club name = GT Grandparent 37 </div><br>
<div style="
position: relative;
padding: 0px 5px 1px 5px;
top: 20;
left: 795;
margin-top: 20;
background-color: pink;
border: 1px black solid;
width:250px;">Generation = 3<br>
 ID number = 15<br>
 Kenel club name = GT Grandparent 38 </div><br>
	</div>

	</body>
	</html>

The first photo was created with css BUT I had a div for every position. I could do it again this way but would need nearly 40 different divs.



<html>
<head>
<style>
body {
	margin:0;
	padding:0;
	line-height: 1.5em;
}

#maincontainer {
	width: 960px;
	margin: 0 auto;}

#first_d {
  position: absolute;
   padding: 50px 20px 50px 20px;
   margin-top: 345px;
   margin-left: 10px;
   background-color: lightblue;
   border: 1px black solid;
width:250px;
}
#first_b {
  position: absolute;
   padding: 50px 20px 50px 20px;
   margin-top: 345px;
   margin-left: 10px;
   background-color: pink;
   border: 1px black solid;width:250px;
}

#Second_s {
  position: absolute;
   padding: 3px 5px 5px 5px;
   margin-top: 175px;
   margin-left: 200px;
   background-color: lightblue;
   border: 1px black solid;width:250px;
}
#Second_d {
  position: absolute;
   padding: 3px 5px 5px 5px;
   margin-top: 600px;
   margin-left: 200px;
   background-color: pink;
border: 1px black solid;width:250px;
}
#third_sl {
  position: absolute;
   padding: 3px 5px 5px 5px;
   margin-top: 110px;
   margin-left: 460px;
   background-color: lightblue;
   border: 1px black solid;width:250px;
}
#third_dl {
  position: absolute;
   padding: 3px 5px 5px 5px;
   margin-top: 250px;
   margin-left: 460px;
   background-color: pink;
border: 1px black solid;width:250px;
}
#third_sr {
  position: absolute;
   padding: 3px 5px 5px 5px;
   margin-top: 530px;
   margin-left: 460px;
   background-color: lightblue;
   border: 1px black solid;width:250px;
}
#third_dr {
  position: absolute;
   padding: 3px 5px 5px 5px;
   margin-top: 680px;
   margin-left: 460px;
   background-color: pink;
border: 1px black solid;width:250px;
}

#fourth_1 {
  position: absolute;
   padding: 0px 5px 1px 5px;
   margin-top: 5px;
 margin-left: 730px;
   background-color: lightblue;
   border: 1px black solid;width:250px;
}
#fourth_2 {
  position: absolute;
   padding: 0px 5px 1px 5px;
   margin-top: 110px;
 margin-left: 730px;
   background-color: pink;
border: 1px black solid;width:250px;
}
#fourth_3 {
  position: absolute;
   padding: 0px 5px 1px 5px;
   margin-top: 225px;
 margin-left: 730px;
   background-color: lightblue;
   border: 1px black solid;width:250px;
}
#fourth_4 {
  position: absolute;
   padding: 0px 5px 1px 5px;
   margin-top: 330px;
 margin-left: 730px;
   background-color: pink;
border: 1px black solid;width:250px;
}
#fourth_5 {
  position: absolute;
   padding: 0px 5px 1px 5px;
   margin-top: 450px;
 margin-left: 730px;
   background-color: lightblue;
   border: 1px black solid;width:250px;
}
#fourth_6 {
  position: absolute;
   padding: 0px 5px 1px 5px;
   margin-top: 555px;
 margin-left: 730px;
   background-color: pink;
border: 1px black solid;width:250px;
}
#fourth_7 {
  position: absolute;
   padding: 0px 5px 1px 5px;
   margin-top: 665px;
 margin-left: 730px;
   background-color: lightblue;
   border: 1px black solid;width:250px;
}
#fourth_8 {
  position: absolute;
  padding: 0px 5px 1px 5px;
   margin-top: 770px;
   margin-left: 730px;
   background-color: pink;
border: 1px black solid;width:250px;
}
</style>

<body>
<div id="maincontainer">
<div id="first_b"><b>Puppie</b> <br/>17th Oct 2005<br/><b>KC name:</b> Willow as in tree<br/><b>KC number:</b> 1</div>

<div id="Second_s"><b>Level 1</b> <br/>21st Oct 2010<br/><b>KC name:</b> Puppies father<br/><b>KC number:</b> 11</div>
<div id="third_dl"><b>Level 2</b> <br/>12th Oct 2010<br/><b>KC name:</b> Grandparent 22<br/><b>KC number:</b> 22</div>

<div id="fourth_3"><b>Level 3</b> <br/>23rd Oct 2010<br/><b>KC name:</b> GT Grandparent 33<br/><b>KC number:</b> 33</div>
<div id="fourth_4"><b>Level 3</b> <br/>4th Oct 2010<br/><b>KC name:</b> GT Grandparent 34<br/><b>KC number:</b> 34</div>

<div id="third_sl"><b>Level 2</b> <br/>29th Oct 2010<br/><b>KC name:</b> Grandparent 21<br/><b>KC number:</b> 21</div>
<div id="fourth_1"><b>Level 3</b> <br/>22nd Oct 2010<br/><b>KC name:</b> GT Grandparent 31<br/><b>KC number:</b> 31</div>

<div id="fourth_2"><b>Level 3</b> <br/>12th Oct 2010<br/><b>KC name:</b> GT Grandparent 32<br/><b>KC number:</b> 32</div>
<div id="Second_d"><b>Level 1</b> <br/>1st Oct 2010<br/><b>KC name:</b> Puppies mother<br/><b>KC number:</b> 12</div>

<div id="third_dr"><b>Level 2</b> <br/>29th Oct 2010<br/><b>KC name:</b> Grandparent 24<br/><b>KC number:</b> 24</div>
<div id="fourth_7"><b>Level 3</b> <br/>2nd Oct 2010<br/><b>KC name:</b> GT Grandparent 37<br/><b>KC number:</b> 37</div>

<div id="fourth_8"><b>Level 3</b> <br/>20th Oct 2010<br/><b>KC name:</b> GT Grandparent 38<br/><b>KC number:</b> 38</div>
<div id="third_sr"><b>Level 2</b> <br/>28th Oct 2010<br/><b>KC name:</b> Grandparent 23<br/><b>KC number:</b> 23</div>

<div id="fourth_5"><b>Level 3</b> <br/>27th Oct 2010<br/><b>KC name:</b> GT Grandparent 35<br/><b>KC number:</b> 35</div>
<div id="fourth_6"><b>Level 3</b> <br/>27th Oct 2010<br/><b>KC name:</b> GT Grandparent 36<br/><b>KC number:</b> 36</div>

	</div>
	</body>
	</html>
5

You say in your OP you managed to get it like the 2nd picture, is that it? Can we have full code? HTML+CSS? So I can play with it :slight_smile:

And columns would be as simple as using 4 <div></div> (place each level inside it) and float each 4 of the <div>'s

THen it would be a simple matter of margins to space and then decorating the boxes etc :slight_smile: