PAGE TITLE

<html><head>
  <meta charset="UTF-8">
  <link rel="shortcut icon" type="image/x-icon" href="https://d30y9cdsu7xlg0.cloudfront.net/png/93692-200.png">
  <title>FAMILY TREE</title>
  <link rel="stylesheet" href="https://codiefoster.neocities.org/fonts/antro.css">
  
  
  
      <style>
      /*Now the CSS*/
     /* ᴄʀᴇᴅɪᴛ: original code by Hue@cp with edits by squirtle@ij for roleplay purposes -- please do not remove either credit, rehost your own images/fonts/backgrounds/etc, and of course feel free to ask questions about the code to squirtle@ij*/
* {
  margin: 0;
  padding-left: 0px;
}
body {background:#f3f3f3 url(http://www.designbolts.com/wp-content/uploads/2013/02/Noise-Light-Grey-Tileable-Pattern-For-Website-Background.jpg);margin-left:200px; margin-top:20px;}

/*added*/

.tree {
  white-space: nowrap;
  overflow: auto;
  
}

.tree ul {
  padding-top: 20px;
  position: relative;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree li {
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0 5px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  /*added for long names*/
  
  float: none;
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  margin: 0 -2px 0 -2px;
}
/*We will use ::before and ::after to draw the connectors*/

.tree li::before,
.tree li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 1px solid #4b4343;
  width: 50%;
  height: 20px;
}

.tree li::after {
  right: auto;
  left: 50%;
  border-left: 1px solid #4b4343;
}
/*We need to remove left-right connectors from elements without 
any siblings*/

.tree li:only-child::after,
.tree li:only-child::before {
  display: none;
}
/*Remove space from the top of single children*/

.tree li:only-child {
  padding-top: 0;
}
/*Remove left connector from first child and 
right connector from last child*/

.tree li:first-child::before,
.tree li:last-child::after {
  border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/

.tree li:last-child::before {
  border-right: 1px solid #4b4343;
  border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
}

.tree li:first-child::after {
  border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
}
/*Time to add downward connectors from parents*/

.tree ul ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 1px solid #4b4343;
  width: 0;
  height: 20px;
}

.tree li a {
  border: 0px solid #4b4343;
  padding: 5px 10px;
  text-decoration: none;
  color: #666;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/

.tree li a:hover,
.tree li a:hover+ul li a {
  background: #799ab2;
  color: #000;
  border: 1px solid #94a0b4;
}
/*Connector styles on hover*/

.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a:hover+ul::before,
.tree li a:hover+ul ul::before {
  border-color: #94a0b4;
}

.husband {
  float: left;
}

.wife {
  margin-left: 10px;
}

.wife::before {
  /* pseudo CSS, will need to be modified */
  
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 1px solid #4b4343;
  width: 50%;
  height: 20px;
}

p {
  text-align: center;
  font-family: antro, Arial, sans-serif;
  color: #000;
  text-shadow: 1px 1px 1px #ddd;
  font-size: 40px;
  letter-spacing: 2px;
  z-index: -1;
  margin-top: 7px;
  margin-left: -150px;
}
/*Thats all. I hope you enjoyed it.
Thanks :)*/
    </style>

</head>

<p>Your Character's Family Tree</p>
<div class="tree">
  <ul>
    <li>
      <a href="#"><img src="http://www.insanejournal.com/userpic/35899355/4189247" width="75px" alt=""><br>Parent<br>DOB:<br>BIRTHPLACE:</a>--
      --<a href="#"><img src="http://www.insanejournal.com/userpic/35899355/4189247" width="75px" alt=""><br>Parent<br>DOB:<br>BIRTHPLACE:</a>
      <ul>
        <li>
          <a href="#"><img src="http://www.insanejournal.com/userpic/35899355/4189247" width="75px" alt=""><br>Child<br>DOB:<br>BIRTHPLACE:</a>
          <ul>
            <li>
              <a href="#"><img src="http://www.insanejournal.com/userpic/35899355/4189247" width="75px" alt=""><br>Grand Child 1<br>DOB:<br>BIRTHPLACE:</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#"><img src="http://www.insanejournal.com/userpic/35899355/4189247" width="75px" alt=""><br>Child<br>DOB:<br>BIRTHPLACE:</a>
          <ul>
            <li><a href="#"><img src="http://www.insanejournal.com/userpic/35899355/4189247" width="75px" alt=""><br>Grand Child 2<br>DOB:<br>BIRTHPLACE:</a></li>
            <li>
              <a href="#"><img src="http://www.insanejournal.com/userpic/35899355/4189247" width="75px" alt=""><br>Grand Child<br>DOB:<br>BIRTHPLACE:</a>
              <ul>
                <li>
                  <a href="#"><img src="http://www.insanejournal.com/userpic/35899355/4189247" width="75px" alt=""><br>Great Grand Child<br>DOB:<br>BIRTHPLACE:</a>
                </li>
                <li>
                  <a href="#"><img src="http://www.insanejournal.com/userpic/35899355/4189247" width="75px" alt=""><br>Great Grand Child<br>DOB:<br>BIRTHPLACE:</a>
                </li>
                <li>
                  <a href="#"><img src="http://www.insanejournal.com/userpic/35899355/4189247" width="75px" alt=""><br>Great Grand Child<br>DOB:<br>BIRTHPLACE:</a>
                </li>
              </ul>
            </li>
            <li>
            <a class="husband" href="#"><img src="http://www.insanejournal.com/userpic/35899355/4189247" width="75px" alt=""><br>Grand Child<br>DOB:<br>BIRTHPLACE:</a>
            ---<a class="wife" href="#"><img src="http://www.insanejournal.com/userpic/35899355/4189247" width="75px" alt=""><br>Wife<br>DOB:<br>BIRTHPLACE:</a>
            <ul>
               <li><a href="#"><img src="http://www.insanejournal.com/userpic/35899355/4189247" width="75px" alt=""><br>Kid<br>DOB:<br>BIRTHPLACE:</a></li>
               <li><a href="#"><img src="http://www.insanejournal.com/userpic/35899355/4189247" width="75px" alt=""><br>Kid<br>DOB:<br>BIRTHPLACE:</a></li>
            </ul>
        </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>
    <script src="//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js"></script>

I have my details in a mysql database and used this perl script to complete the html page. I used the css code as shown but added

display: inline-block;
white-space: nowrap;
vertical-align: top;
margin: 0 -2px 0 -2px;
instead of
float: left;
for .tree li

#!/usr/bin/perl
use DBI;
use CGI;

print CGI::header();
my $Familyname = ‘Familyname’;#your family name here
#start of html code
print <Familyname Family Tree#your family name here
#your css file here
endmarker

$db = ‘Families’; $host = ‘localhost’; $user = ‘user’; $password = ‘password’;#your details here
# connect
$dbh = DBI->connect(“DBI:mysql:database=$db;host=$host”, $user, $password, {RaiseError => 1});
#get rid of left over table descendant1
my $sth = $dbh->prepare(“DROP TABLE IF EXISTS descendants1″);
$sth->execute();
#make a new table descendants1
my $sth = $dbh->prepare(“CREATE TABLE descendants1 (ID INT, Family VARCHAR(30), First VARCHAR(30), Born DATE, FatherID INT, MotherID INT)”);
$sth->execute();

my $sth=$dbh->prepare(“select * from family where Family = ‘$Familyname’”);#select your familyname from your database
$sth->execute();

while(my ($ID, $Familyname, $Firstname, $Birth,$Death,$FatherID,$MotherID,$PartnerID,$Comments) = $sth->fetchrow_array()) {
#insert details into table descendants1
my $sth = $dbh->prepare(“insert into descendants1(ID,Family, First, Born,FatherID,MotherID) values (‘$ID’,'$Familyname’, ‘$Firstname’, ‘$Birth’, ‘$FatherID’, ‘$MotherID’)”);
$sth->execute();
}#end while 1
my $a = “0″;
my $b = “0″;
my $y =”0″;
my $x =”0″;
my $i = “1″;
$ID[$i] = “0″;
#more html
print <
endmarker

while ($i >0){
#select_oldest {
my $sth=$dbh->prepare(“select * from descendants1 where FatherID = ‘$ID[$i]‘ or MotherID = ‘$ID[$i]‘ order by Born ASC LIMIT 1″);
$sth->execute();
#while 3
while(my ($ID, $Familyname, $Firstname, $Birth,$Death,$FatherID,$MotherID,$PartnerID,$Comments) = $sth->fetchrow_array()) {
$y = “1″;
$x = “$i”;
if ($a<$i){
#more html. If children present start a new list.
print “”;
$a++;
}
while ($a>$i){
more html, end lists(may be more than one)
print “”;
$a–;
}

#reset x
$x=”1″;
#?mysql date format
my $sth = $dbh->prepare(“SELECT DATE_FORMAT(‘$Birth’, ‘%d/%c/%Y’)”);
$sth->execute();
while(my ($Birth) = $sth->fetchrow_array()) {
#more html. fill lists
print <$Firstname $Familyname $Birth

endmarker
}
#delete selected descendant from descendants1 so they won’t be chosen again
my $sth=$dbh->prepare(“delete from descendants1 where ID = ‘$ID’”);
$sth->execute();
$i++;
$ID[$i]=$ID;
#select partner from original database
my $sth=$dbh->prepare(“select * from family where PartnerID = ‘$ID’”);
$sth->execute();
while(my ($ID, $Familyname, $Firstname, $Birth,$Death,$FatherID,$MotherID,$PartnerID,$Comments) = $sth->fetchrow_array()) {
my $sth = $dbh->prepare(“SELECT DATE_FORMAT(‘$Birth’, ‘%d/%c/%Y’)”);
$sth->execute();
while(my ($Birth) = $sth->fetchrow_array()) {
#more html. add partner with original selection
print <and$Firstname $Familyname $Birth

endmarker

}
my $sth=$dbh->prepare(“delete from descendants1 where ID = ‘$ID’”);
$sth->execute();
}

}#end while 3
if ($y == “0″){
$ID[$i]++;
}
else{
if ($x == “1″){
$x=”0″;
$ID = $ID[$i];
}
else {
$i–;
$ID = $ID[$i];
}
}
}

I have added the following which then includes children with a different family name to ‘familyname’ who are still descended from the original person.

(added before the ‘delete from’ section)
my $sth=$dbh->prepare(“replace into descendants1(ID,Family, First, Born,FatherID,MotherID) select ID,Family, First, Born,FatherID,MotherID from family where FatherID =’$ID’ or MotherID = ‘$ID’”);
$sth->execute();
}#end while 7
*/
  //# sourceURL=pen.js
  </script>

</body></html>

<html class=" -webkit-"><head>
  <meta charset="UTF-8">
  <link rel="shortcut icon" type="image/x-icon" href="https://codiefoster.neocities.org/game%20(11).png">
  <title>lamarcodem directory</title>
  
  
  
  
      <style>
      @import url(https://fonts.googleapis.com/css?family=Open+Sans);

html {
  height:100%;
  background-image: linear-gradient(to right top, #8e44ad 0%, #3498db 100%);
}

nav {
  max-width: 1000px;
  -webkit-mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
  margin: 0 auto;
  padding: 30px 0;
}

nav ul {
  text-align: center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  padding: 13px;
  font-family: "Open Sans";
  text-transform:uppercase;
  color: rgba(0, 35, 122, 0.5);
  font-size: 18px;
  text-decoration: none;
  display: block;
}

nav ul li a:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(0, 35, 122, 0.7);
}

</style>

</head>

<nav>
  <br><center><img src="https://codiefoster.neocities.org/lamarcodem%20directory.png" width="800"><br><br><br>
  <ul>
    <li>
      <a href="https://codiefoster.neocities.org/layouts.html">layouts</a>
    </li>
    <li>
      <a href="https://codiefoster.neocities.org/bios.html">bios</a>
    </li>
    <li>
      <a href="https://codiefoster.neocities.org/socialmedia.html">social media</a>
    </li>
    <li>
      <a href="https://codiefoster.neocities.org/narratives.html">narratives</a>
    </li>
   <li>
      <a href="https://codiefoster.neocities.org/random.html">miscellaneous</a>
    </li>
       <li>
      <a href="https://codiefoster.neocities.org/modstuff.html">mod & community</a>
    </li>
  </ul>
</center></nav>
    <script src="//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js"></script>

<html><head><link href="http://fonts.googleapis.com/css?family=Varela+Round|Sigmar+One|Montserrat|Righteous|PT+Sans+Narrow" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="https://codiefoster.neocities.org/game%20(2).png">
<link rel="stylesheet" href="http://biog.webstarts.com/fonts2.css">
<title>coding directory: miscellaneous</title>
<style>

/* This page was coded by ~esc at ~coding/~pbcoding/ with heavy heavy edits by squirtle@ij, please don't remove this credit! */

body {background-color: rgba(255, 255, 255, 1);background-image: url(http://i.imgur.com/DF4HuF6.png);}

a, a:visited {color:#D18EA2; text-shadow:; text-decoration:none;}
a:hover {cursor:default; color:#EAC2CE; text-shadow:#088788 0px 0px 1px;}

#table {width: 650px; padding:3px; }

.box {padding:3px; background-color: rgba(200, 200, 200, 0.15); background-image: url(http://i.imgur.com/GdzdcnR.png); box-shadow: 1px 1px 2px 1px #d7d7d7; border-top: 1px solid #D1275A;}

td {text-align: justify; font-family: PT Sans Narrow, arial; text-transform:none; font-size:11px; letter-spacing: .5px; word-spacing: 2; padding-top: 3; text-shadow: 0px 0px 1px #a3a3a3;}

.date {font-family: Great Vibes; font-size: 45px; line-height: 50px; text-transform: none; color: #D1577B;text-shadow: 0px 0px 2px #000;padding-left:10px;display: block;margin-top:5px; line-height:100%;}

.narrative {overflow:auto; width:610px; height:475px; margin-top:10px; padding-left:5px; padding-right:5px;}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 10px #d7dbde; }
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 1px #ffffff; }

.enlarge-image {
    width: 50px;
    float: left; padding:2px; background:white;
	border: 1px solid #ddd;margin-right:2px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.enlarge-image:hover {padding:0px;border:0; position:relative; margin-top:10px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
	-moz-transform: scale(2.5); -webkit-transform: scale(2.5); -o-transform: scale(2.5); -ms-transform: scale(2.5); transform: scale(2.5);
}

</style>

</head><body><a href="https://codiefoster.neocities.org/"><img src="https://emojipedia-us.s3.amazonaws.com/thumbs/120/apple/96/back-with-leftwards-arrow-above_1f519.png" width="30"></a>

<center><a href="http://asylums.insanejournal.com/lamarcodem/" style="text-decoration:none;"><font style="font-family:coming soon, arial black; font-size:38px; letter-spacing:-4px; line-height:30px; color:#D18EA2; text-shadow:#555 1px 1px 0px; text-transform:uppercase;">miscellaneous directory!</font></a><div style="display:none;"><a name="cutid1"></a></div><br><br>

</td></tr><tr><td align="center"><a href="LINK1" title=""><img class="enlarge-image" src="IMAGE1" style="width:225px; height:125px; border:1px dotted #4F4433; padding:4px;"></a> <a href="LINK2" title=""><img class="enlarge-image" src="IMAGE2" style="width:225px; height:125px; border:1px dotted #4F4433; padding:4px;"></a> <a href="LINK3" title=""><img class="enlarge-image" src="IMAGE3" style="width:225px; height:125px; border:1px dotted #4F4433; padding:4px;"></a> <a href="LINK4" title=""><img class="enlarge-image" src="IMAGE4" style="width:225px; height:125px; border:1px dotted #4F4433; padding:4px;"></a> <br></td></tr>

</tbody></table></center></body></html>

Linear Timeline

Modern Timeline