2 replies [Last post]
tcloud
tcloud's picture
Offline
Regular
Last seen: 6 years 5 weeks ago
Timezone: GMT-5
Joined: 2011-11-16
Posts: 12
Points: 19

I am replacing a table with CSS and divs. This is a list of people in a family, but there needs to be a link off to the right.

It should look like:

1.	John Doe
	Born
	Married
	Died
 
2.	Next Person
	Born
	Married
	Died

There needs to be a "box" to the right with a link to that child's family (called a family group sheet).

I have done this, but the numeral is in the middle of the div containing the person's information and it needs to be at the top:

<ol class="decimal">
	<li>
	<div class="outer">
		<div class="floatleft detail">
			<a href="../../cloud/TX/getperson.php?personID=I1428&tree=mykindred01">Mary Ann Bumstead</a><br />
			Birth: MAR 29, 1802 New York, USA<br />
			Census: NOV 9, 1850 Norton, Summit county, Ohio, USA<br />
			Census: JUL 28, 1860 Milton, Wayne county, Ohio, USA<br />
			Death: OCT 25, 1866<br />
			Spouse: <a href="../../cloud/TX/getperson.php?personID=I1437&tree=mykindred01">Rev. Thomas McDermott (1792-1861)</a><br />
			Marriage: New Jersey, USA
		</div>
		<a href=""><div class="groupsheet">
			Family<br />
			Group<br />
			Sheet
		</div></a>
	</div>
	<div class="clear"></div>
 
	</li>
</ol>

CSS:

.block { display:inline-block; }
.cname { padding-top:4px; }
.center { text-align:center; }
.clear { clear:both; }
.detail { vertical-align:bottom; border:1px solid red; }
.floatleft { float:left; }
.floatright { float:right; }
.gen1 { margin-left:20px; }
.gen1 ol {  }
.gen1 ol li {
	margin: 5px 0;
	vertical-align:text-bottom;
}
.groupsheet {
	margin-left:20px;
	border:2px solid #dedede;
	background:#ecf0ec;
	padding:8px;
	display:inline-block;
	text-align:center;
}
.outer { /* ?? */ }
#w90 { width:90%; margin-left:auto; margin-right:auto; }
hr { color:#acf; background-color:#acf; height:4px; border:none; }
ul.plain { list-style:none; margin:0; padding:0; }
ol.decimal { list-style:decimal; }

AttachmentSize
Family Group Sheet for Jacob Bumstead & Rhoda Martin..png77.85 KB
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 1 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Try this

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=utf-8"
          http-equiv="Content-Type" />
 
    <title>test doc</title>
 
    <style type="text/css">
 
      #wrapper {
      background-color: #f9f9f9;
      margin: 0 5%;
      padding: 1.5em;
      }
 
      ol {}
 
      li {
      margin: 1.5em 0;
      }
 
      li:after {
      clear: both;
      content: ".";
      display: block;
      font-size: 0;
      }
 
      dl {
      background-color: white;
      border: 1px solid black;
      float: left;
      margin-right: 1.5em;
      padding: 1em;
      }
 
      dt {
      clear: left;
      float: left;
      width: 6em;
      }
 
      dt:after {
      content: ":"
      }
 
      dd {
      overflow: hidden;
      }
 
      .groupsheet {
      background-color: white;
      border: 1px solid black;
      display: table;
      padding: 1em;
      width: 1px;
      }
 
    </style>
  </head>
 
  <body>
    <div id="wrapper">    
      <ol>
	<li>
	  <p><a href="#">Mary Ann Bumstead</a></p>
 
	  <dl>
	    <dt>Birth</dt>
	    <dd>MAR 29, 1802 New York, USA</dd>
	    <dt>Census</dt> 
	    <dd>NOV 9, 1850 Norton, Summit county, Ohio, USA</dd>
	    <dt>Census</dt> 
	    <dd>JUL 28, 1860 Milton, Wayne county, Ohio, USA</dd>
	    <dt>Death</dt> 
	    <dd>OCT 25, 1866</dd>
	    <dt>Spouse</dt> 
	    <dd><a href="#">Rev. Thomas McDermott (1792-1861)</a></dd>
	    <dt>Marriage</dt> 
	    <dd>New Jersey, USA</dd>
	  </dl>
 
	  <p class="groupsheet">
	    <a href="#">Family Group Sheet</a>
	  </p>
	</li>
 
	<li>
	  <p><a href="#">Mary Ann Bumstead</a></p>
 
	  <dl>
	    <dt>Birth</dt>
	    <dd>MAR 29, 1802 New York, USA</dd>
	    <dt>Census</dt> 
	    <dd>NOV 9, 1850 Norton, Summit county, Ohio, USA</dd>
	    <dt>Census</dt> 
	    <dd>JUL 28, 1860 Milton, Wayne county, Ohio, USA</dd>
	    <dt>Death</dt> 
	    <dd>OCT 25, 1866</dd>
	    <dt>Spouse</dt> 
	    <dd><a href="#">Rev. Thomas McDermott (1792-1861)</a></dd>
	    <dt>Marriage</dt> 
	    <dd>New Jersey, USA</dd>
	  </dl>
 
	  <p class="groupsheet">
	    <a href="#">Family Group Sheet</a>
	  </p>
	</li>
      </ol>
    </div> <!-- end wrapper -->
  </body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

tcloud
tcloud's picture
Offline
Regular
Last seen: 6 years 5 weeks ago
Timezone: GMT-5
Joined: 2011-11-16
Posts: 12
Points: 19

Thanks

Thanks -- I've not used the definition list before. I got it working last night, but your solution is much more elegant than mine, so I converted to it. You can see the result at:
http://mykindred.com/bumstead/JacobBumstead_RhodaMartin/GenealogicalRecord_ABumstead.php
The code validates until I make it live on the web because I pull in a footer from the main site template without using the header also, but it works very nicely.

thanks again,
Tom