InsaneJournal

Tweak says, "You didn't return them?"

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!

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