User Tools

Site Tools


the_gundersons

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
the_gundersons [2020/01/08 15:58] andrewthe_gundersons [2020/01/08 16:07] (current) andrew
Line 1: Line 1:
 ====== The Gundersons ====== ====== The Gundersons ======
-<HTML> 
-<style> 
-/*Now the CSS*/ 
-* {margin: 0; padding: 0;} 
  
-.tree ul { 
- padding-top: 20px; position: relative; 
-  
- transition: all 0.5s; 
- -webkit-transition: all 0.5s; 
- -moz-transition: all 0.5s; 
-} 
- 
-.tree li { 
- float: left; 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; 
-} 
- 
-/*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 #ccc; 
- width: 50%; height: 20px; 
-} 
-.tree li::after{ 
- right: auto; left: 50%; 
- border-left: 1px solid #ccc; 
-} 
- 
-/*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 #ccc; 
- 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 #ccc; 
- width: 0; height: 20px; 
-} 
- 
-.tree li a{ 
- border: 1px solid #ccc; 
- 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: #c8e4f8; 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; 
-} 
- 
- 
- 
-/*Thats all. I hope you enjoyed it. 
-Thanks :)*/ 
-</style> 
-<div class="tree"> 
- <ul> 
- <li> 
- <a href="#">Gunderson Grandparents (&#9794; &#9792;)</a> 
- <ul> 
- <li> 
- <a href="http://lordsofhack.com/infinity/doku.php?id=grampa_backstory">Steve Gunderson&#9794;<br/>Mildred Gunderson (nee Nygma)&#9792;</a> 
- <ul> 
- <li> 
- <a href="#">Sally Proton (nee Gunderson)&#9792;<br/>Professor Hank Proton&#9794;</a> 
- <ul> 
- <li> 
- <a href="http://lordsofhack.com/infinity/doku.php?id=billy_backstory">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Billy (William) Proton&#9794;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a> 
- </li> 
- </ul> 
- </li> 
- </ul> 
- </li> 
- <li> 
- <a href="#">Frank Gunderson</a> 
- <ul> 
- <li><a href="http://lordsofhack.com/infinity/doku.php?id=felix_backstory">Felix Gunderson&#9794;</a></li> 
- <li> 
- <a href="#">Stanley Gunderson&#9794;</a> 
- <ul> 
- <li> 
- <a href="#">Stanley Gunderson Jr&#9794;</a> 
- </li> 
- <li> 
- <a href="#">Chad Gunderson&#9794;</a> 
- </li> 
- <li> 
- <a href="#">Catherine (Cat) Gunderson&#9792;</a> 
- </li> 
- </ul> 
- </li> 
- </ul> 
- </li> 
- </ul> 
- </li> 
- </ul> 
- <ul> 
- <li> 
- <a href="http://lordsofhack.com/infinity/doku.php?id=ramiel_backstory">Ramiel (Smith)&#9894;</a> 
- </li> 
- </ul> 
-</div> 
  
 +<HTML>
 +<iframe src="http://lordsofhack.com/infinity/gundersonGeneaology.html" style="border:none;width:100%; height:400px;"></iframe>
 </HTML> </HTML>
the_gundersons.1578499126.txt.gz · Last modified: 2020/01/08 15:58 by andrew