HTML & CSS Pedigree

Pedigree in non-tabular HTML and CSS

by Scott Currell

HTML

<ul id="pedigree">
	<li id="self"><a href="javascript:void(0);">Self</a>
		<a href="javascript:void(0);"><img src="./assets/images/male.jpg" alt=""></a>
		<p>B: 00/00/0000</p>
		<p>D: 00/00/0000</p>
		<ul>
			<li id="father" class="parents"><a href="javascript:void(0);">Father</a>
				<a href="javascript:void(0);"><img src="./assets/images/male.jpg" alt=""></a>
				<p>B: 00/00/0000</p>
				<p>D: 00/00/0000</p>
				<ul>
					<li id="paternal-grandfather" class="grandparents"><a href="javascript:void(0);">Grandfather</a>
						<a href="javascript:void(0);"><img src="./assets/images/male.jpg" alt=""></a>
						<p>B: 00/00/0000</p>
						<p>D: 00/00/0000</p>
						<ul>
							<li id="paternal-greatgrandfather-1" class="great-grandparents"><a href="javascript:void(0);">Great Grandfather</a>
								<a href="javascript:void(0);"><img src="./assets/images/male.jpg" alt=""></a>
								<p>B: 00/00/0000</p>
								<p>D: 00/00/0000</p>
							</li><!-- End Paternal Great Grandfather 1 -->
							<li id="paternal-greatgrandmother-1" class="great-grandparents"><a href="javascript:void(0);">Great Grandmother</a>
								<a href="javascript:void(0);"><img src="./assets/images/female.jpg" alt=""></a>
								<p>B: 00/00/0000</p>
								<p>D: 00/00/0000</p>
							</li><!-- End Paternal Great Grandmother 1 -->
						</ul>
					</li><!-- End Paternal Grandfather -->
					<li id="paternal-grandmother" class="grandparents"><a href="javascript:void(0);">Grandmother</a>
						<a href="javascript:void(0);"><img src="./assets/images/female.jpg" alt=""></a>
						<p>B: 00/00/0000</p>
						<p>D: 00/00/0000</p>
						<ul>
							<li id="paternal-greatgrandfather-2" class="great-grandparents"><a href="javascript:void(0);">Great Grandfather</a>
								<a href="javascript:void(0);"><img src="./assets/images/male.jpg" alt=""></a>
								<p>B: 00/00/0000</p>
								<p>D: 00/00/0000</p>
							</li><!-- End Paternal Great Grandfather 2 -->
							<li id="paternal-greatgrandmother-2"...

CSS

ul#pedigree li {
  position: absolute;
  display: inline-block;
  border: 1px solid #7f7f7f;
  padding: 0.3125rem;
  width: 12.5rem;
  top: 50%;
  transform: translateY(-50%);
}
ul#pedigree li li {
  left: 13.75rem;
}
ul#pedigree li li.parents:first-of-type {
  top: -120%;
  -webkit-transform: translateY(-120%);
  -ms-transform: translateY(-120%);
  transform: translateY(-120%);
}
ul#pedigree li li.parents:last-of-type {
  top: 120%;
  -webkit-transform: translateY(120%);
  -ms-transform: translateY(120%);
  transform: translateY(120%);
}
ul#pedigree li li.grandparents:first-of-type {
  top: -60%;
  -webkit-transform: translateY(-60%);
  -ms-transform: translateY(-60%);
  transform: translateY(-60%);
}
ul#pedigree li li.grandparents:last-of-type {
  top: 60%;
  -webkit-transform: translateY(60%);
  -ms-transform: translateY(60%);
  transform: translateY(60%);
}
ul#pedigree li li.great-grandparents:first-of-type {
  top: -30%;
  -webkit-transform: translateY(-30%);
  -ms-transform: translateY(-30%);
  transform: translateY(-30%);
}
ul#pedigree li li.great-grandparents:last-of-type {
  top: 30%;
  -webkit-transform: translateY(30%);
  -ms-transform: translateY(30%);
  transform: translateY(30%);
}
ul#pedigree li p {
  font-size: 0.75rem;
  line-height: 1.125;
  padding: 0;
  margin: 0;
}
ul#pedigree li a {
  font-size: 0.75rem;
  line-height: 1;
  text-decoration: none;
}
ul#pedigree li a:first-of-type {
  display: inline-block;
}
ul#pedigree li img {
  position: absolute;
  right: 0.3125rem;
  border: 1px solid #7f7f7f;
  width: 2.9375rem;
}