SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Pedigree chart ( family tree )

  1. Oct 21, 2010 14:41 #1
    Rubble
    Rubble is offline
    SitePoint Mentor silver trophy
     SitePoint Award Recipient Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    1,507
    Mentioned
    37 Post(s)
    Tagged
    2 Thread(s)

    Pedigree chart ( family tree )

    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:
    PHP Code:
    $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
    Last edited by Rubble; Oct 21, 2010 at 14:44. Reason: Added the data
    ImageMagick with php examples
    Imagick examples
  2. Oct 21, 2010 15:01 #2
    RyanReese
    RyanReese is offline
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    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 .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work
  3. Oct 21, 2010 15:06 #3
    Rubble
    Rubble is offline
    SitePoint Mentor silver trophy
     SitePoint Award Recipient Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    1,507
    Mentioned
    37 Post(s)
    Tagged
    2 Thread(s)
    That is my css except for:
    PHP Code:
    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:
    PHP Code:
    <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> 
    Last edited by Rubble; Oct 21, 2010 at 15:10. Reason: Added last paragrphy
    ImageMagick with php examples
    Imagick examples
  4. Oct 21, 2010 15:09 #4
    RyanReese
    RyanReese is offline
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    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

    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
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work
  5. Oct 21, 2010 15:47 #5
    Rubble
    Rubble is offline
    SitePoint Mentor silver trophy
     SitePoint Award Recipient Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    1,507
    Mentioned
    37 Post(s)
    Tagged
    2 Thread(s)
    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.

    PHP Code:
    <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.

    PHP Code:

    <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> 
    ImageMagick with php examples
    Imagick examples
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules