InsaneJournal

Tweak says, "Windows NT crashed."

Ally -- are you already gone? (wastintime) wrote in rp_tutorials,
@ 2011-06-28 17:06:00

Entry tags:

layouts: family tree

HTML Family Trees

Live Example

Paternal Grandpa

Paternal Grandma

Maternal Grandpa

Maternal Grandma

	Father

	Mother


Kid #1


Kid #2


Kid #3


Kid #4


Kid #5

The Code

<table align="center" style="width:1000px;font-size:11px;" cellpadding="0" cellspacing="0">

<tr>
<td colspan="3" style="width:104px;text-align:center;padding:2px;background-color:#CCC;">Paternal Grandpa</td>
<td colspan="3" style="width:10px;"><br  /></td>
<td colspan="3" style="width:104px;text-align:center;padding:2px;background-color:#CCC;">Paternal Grandma</td>

<td colspan="3" style="width:104px;text-align:center;padding:2px;background-color:#CCC;">Maternal Grandpa</td>
<td colspan="3" style="width:10px;"> </td>
<td colspan="3" style="width:104px;text-align:center;padding:2px;background-color:#CCC;">Maternal Grandma</td>
</tr>

<tr>
<td colspan="9" style="width:218px;"><table style="width:100%;font-size:11px;" cellpadding="0" cellspacing="0">
<tr>
<td style="width:57px;"><br /></td>
<td colspan="3" style="width:104px;padding:2px;text-align:center;background-color:#CCC;">Father</td>
<td style="width:57px;"><br /></td>
</tr>

<td colspan="9" style="width:218px;"><table style="width:100%;font-size:11px;" cellpadding="0" cellspacing="0">
<tr>
<td style="width:57px;"><br /></td>
<td colspan="3" style="width:104px;padding:2px;text-align:center;background-color:#CCC;">Mother</td>
<td style="width:57px;"><br /></td>
</tr>

<tr>
<td colspan="19" style="width:100%;"><table align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="width:104px;"><table style="width:100%;font-size:11px;" cellpadding="0" cellspacing="0">
<tr>
<td style="width:51px;"><br /></td>
<td style="width:2px;height:25px;background-color:#CCC;"><br /></td>
<td style="width:51px;"><br /></td>
</tr>
<tr>
<td colspan="3" style="width:104px;padding:2px;background-color:#CCC;text-align:center;">Kid #1</td>
</tr>
</table></td>

Live Example

Cameron Kirke

pureblood

Gwendolynn Priddy

muggleborn

Papa Jones

muggleborn

Mama Jones

muggleborn

	Brand curse breaker

	Julia housewife


Leah Beth 1979


James Theodore 1981


Andrew Zachery 1982


Lily Isobel 1984


Samuel Reid 1984

STORY OF THE FAMILY
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacinia faucibus ultricies. Vivamus porttitor lobortis diam, et facilisis felis vehicula eget. Vestibulum imperdiet lorem a metus aliquet id consequat diam porttitor. Donec porta risus gravida arcu pulvinar gravida. Sed vitae justo nisl, non eleifend nisi. Pellentesque id metus ligula, vel aliquam nisl. Sed pretium nisl eu metus vulputate in consequat magna volutpat. Sed quam mi, egestas eget luctus eget, aliquet vel ipsum. In hac habitasse platea dictumst.

Ut tincidunt dui ac mauris luctus faucibus dignissim magna fermentum. Etiam eu nulla mi. Aliquam ipsum justo, posuere id sagittis sit amet, mattis at dolor. Ut et tortor augue, eu tincidunt enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu ultricies odio. Aliquam erat volutpat. Phasellus sagittis auctor commodo. Sed ultrices commodo commodo. Phasellus ultrices aliquam orci in venenatis. Vivamus mauris risus, blandit non dapibus sed, pellentesque ac arcu. Sed ultrices commodo commodo. Phasellus ultrices aliquam orci in venenatis.

The Code

<table align="center" style="width:1024px;background:url('http://i82.photobucket.com/albums/j251/VanyaElda/Valesco/Family%20Trees/kirkeback.png');border:4px solid #2b2616;padding:8px;font-size:11px;font-family:Trebuchet MS, sans-serif;color:#d9b43b;" cellpadding="0" cellspacing="0">

<tr>
<td colspan="3" style="width:104px;text-align:center;padding:2px;background-color:#4f0606;">Cameron Kirke
<img src="http://i.imgur.com/wdQEn.png" style="width:100px;height:100px;margin:2px 0;" />
<small>pureblood</small></td>
<td colspan="3" style="width:10px;"><br  /></td>
<td colspan="3" style="width:104px;text-align:center;padding:2px;background-color:#4f0606;">Gwendolynn Priddy
<img src="http://i.imgur.com/lxyY0.png" style="width:100px;height:100px;margin:2px 0;" />
<small>muggleborn</small></td>

<td colspan="3" style="width:104px;text-align:center;padding:2px;background-color:#4f0606;">Papa Jones
<img src="http://i.imgur.com/CF7KJ.png" style="width:100px;height:100px;margin:2px 0;" />
<small>muggleborn</small></td>
<td colspan="3" style="width:10px;"> </td>
<td colspan="3" style="width:104px;text-align:center;padding:2px;background-color:#4f0606;">Mama Jones
<img src="http://i.imgur.com/3xTo9.png" style="width:100px;height:100px;margin:2px 0;" />
<small>muggleborn</small></td>
</tr>

<tr>
<td colspan="9" style="width:218px;"><table style="width:100%;font-size:11px;font-family:Trebuchet MS, sans-serif;color:#d9b43b;" cellpadding="0" cellspacing="0">
<tr>
<td style="width:57px;"><br /></td>
<td colspan="3" style="width:104px;padding:2px;text-align:center;background-color:#4f0606;">Brand
<img src="http://i471.photobucket.com/albums/rr74/Graclessally/Role%20Play/Valesco/Family%20Trees/kirke_brand.png" style="width:100px;height:100px;padding:2px;" />
<small>curse breaker</small></td>
<td style="width:57px;"><br /></td>
</tr>

<td colspan="9" style="width:218px;"><table style="width:100%;font-size:11px;font-family:Trebuchet MS, sans-serif;color:#d9b43b;" cellpadding="0" cellspacing="0">
<tr>
<td style="width:57px;"><br /></td>
<td colspan="3" style="width:104px;padding:2px;text-align:center;background-color:#4f0606;">Julia
<img src="http://i471.photobucket.com/albums/rr74/Graclessally/Role%20Play/Valesco/Family%20Trees/kirke_julia.png" style="width:100px;height:100px;padding:2px;" />
<small>housewife</small></td>
<td style="width:57px;"><br /></td>
</tr>

<tr>
<td colspan="19" style="width:100%;"><table align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="width:104px;"><table style="width:100%;font-size:11px;font-family:Trebuchet MS, sans-serif;color:#d9b43b;" cellpadding="0" cellspacing="0">
<tr>
<td style="width:51px;"><br /></td>
<td style="width:2px;height:25px;background-color:#4f0606;"><br /></td>
<td style="width:51px;"><br /></td>
</tr>
<tr>
<td colspan="3" style="width:104px;padding:2px;background-color:#4f0606;text-align:center;">Leah <i>Beth</i>
<img src="http://i471.photobucket.com/albums/rr74/Graclessally/Role%20Play/Valesco/Family%20Trees/kirke_leah.png" style="width:100px;height:100px;padding:2px;" />
<small>1979</small></td>
</tr>
</table></td>

<td style="width:104px;"><table style="width:100%;font-size:11px;font-family:Trebuchet MS, sans-serif;color:#d9b43b;" cellpadding="0" cellspacing="0">
<tr>
<td style="width:51px;"><br /></td>
<td style="width:2px;height:25px;background-color:#4f0606;"><br /></td>
<td style="width:51px;"><br /></td>
</tr>
<tr>
<td colspan="3" style="width:104px;padding:2px;background-color:#4f0606;text-align:center;">Samuel <i>Reid</i>
<img src="http://i471.photobucket.com/albums/rr74/Graclessally/Role%20Play/Valesco/Family%20Trees/kirke_sam.png" style="width:100px;height:100px;padding:2px;" />
<small>1984</small></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>

</table>
<div style="margin-top:-542px;width:1024px;min-height:542px;text-align:center;font-family:Trebuchet MS, sans-serif;color#2b2616;font-size:11px;"><center><div style="margin-top:-10px;height:300px;width:516px;overflow:auto;background-color:#f1d782;border:4px solid #2b2616;padding:8px;text-align:justify;"><center><font size=+1 color="#ad0f0f"><b>STORY OF THE FAMILY</b></font></center>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacinia faucibus ultricies. Vivamus porttitor lobortis diam, et facilisis felis vehicula eget. Vestibulum imperdiet lorem a metus aliquet id consequat diam porttitor. Donec porta risus gravida arcu pulvinar gravida. Sed vitae justo nisl, non eleifend nisi. Pellentesque id metus ligula, vel aliquam nisl. Sed pretium nisl eu metus vulputate in consequat magna volutpat. Sed quam mi, egestas eget luctus eget, aliquet vel ipsum. In hac habitasse platea dictumst.

Ut tincidunt dui ac mauris luctus faucibus dignissim magna fermentum. Etiam eu nulla mi. Aliquam ipsum justo, posuere id sagittis sit amet, mattis at dolor. Ut et tortor augue, eu tincidunt enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu ultricies odio. Aliquam erat volutpat. Phasellus sagittis auctor commodo. Sed ultrices commodo commodo. Phasellus ultrices aliquam orci in venenatis. Vivamus mauris risus, blandit non dapibus sed, pellentesque ac arcu. Sed ultrices commodo commodo. Phasellus ultrices aliquam orci in venenatis.</div></center></div>

Note: The background pattern is from ColourLovers.

Questions/Feedback?
Leave a comment to this post. Thanks!

(Post a new comment)

	erin 2011-06-28 10:48 pm UTC (link)
	Wow these are really awesome! Bookmarking for later use. (Reply to this)

	wickedpoppies 2011-06-29 02:11 am UTC (link)
	This is amazing. I've been looking for something like this for a while. Thanks for sharing! <3 (Reply to this)

	mary_greenman 2011-07-01 04:35 am UTC (link)
	Can I just say that this? Might be the most epic profile thing I've seen in ages. I will find some kind of use for it! (Reply to this)

	deadlylovekiss 2011-07-02 04:50 pm UTC (link)
	This is EPIC. I will find a use for this some place! :) (Reply to this)

	megsrevolution 2011-07-24 09:01 pm UTC (link)
	Once again, thanks so much for making these up. I finally finished and wanted to show you what I did with them. <3 Thanks again! (Reply to this)

	mitsuraki_chars 2011-07-25 06:59 am UTC (link)
	This is EPIC coding, but I was wondering what someone has to do in order to add more generations to the trees. Help, please? (Reply to this)

	winterishere 2012-04-30 11:24 am UTC (link)
	I've used a lot of the code for the bottom tree for this. Thanks. (Reply to this)

	whatson 2013-07-09 10:34 pm UTC (link)
	Is there any way to flip this, so to speak? (Reply to this)