• Locked
2 replies [Last post]
Mon, 2014-09-15 19:27
tcloud
tcloud's picture
Offline
Regular
Last seen: 5 years 46 weeks ago
Timezone: GMT-5
Joined: 2011-11-16
Posts: 12
Points: 19

I have a page which displays a genealogical pedigree chart. It uses absolutely positioned boxes for people and for the lines that connect the boxes.
http://mykindred.com/cloud/dna/results/pedchart.php

The page works fine, but I want to use it in a different context -- I want to include it inside surrounding content for a presentation.

Is there some way to create a div to surround this content?

The code for the page is large, so I won't post it here, but the CSS is below

* { margin:0; padding:0; }
 
body {
	background-color:#f3f3f3;
	color:#000;
	font-family:"Palatino Linotype", Arial, Helvetica, sans-serif;
	font-size:12px;
}
 
a:link, a:active {
	color:#900;
}
 
a:visited {
	color:#663;
}
 
a:hover {
	color:#000;
}
 
div.align-center, .align-center { margin-left:auto; margin-right:auto; text-align:center; }
 
table { border-collapse:collapse; margin:auto;  }
table, td { 
	-webkit-border-radius:3px;
	border-radius:3px;
}
td, th { vertical-align:middle; text-align:center; white-space:nowrap; }
td.25 { width:25%; }
td.50 { width:50%; }
td.align-top, .align-top { vertical-align:top; }
 
ul {
	margin-bottom:0px;
	margin-left:5px;
	margin-top:0px;
	padding-left:1em;
}
 
.abs { position:absolute; }
.center { text-align:center; }
.left { text-align:left; }
.right { text-align:right; }
 
.align-center { margin-left:auto; margin-right:auto; }
.block { display:inline-block; }
.floatleft { float:left; }
.floatright { float:right; }
.clear, { clear:both; }
 
.full { width:100%; margin-left:auto; margin-right:auto; text-align:center; }
.one-third { width:33%; }
 
/*
z-index:
	3	vline
	3	hline
	4	header
	5	name
	6	age
*/
 
.line, .hline, .vline { position:absolute; font-size:0; z-index:3; background:#363; }
/* .hline { clip:rect(auto auto 2px auto); } */
.hline { height:1.5px; }
.vline { width:1.5px; }
 
.age {
	position:absolute;
	z-index:6;
	top:-2px;
	left:0px;
	background:none;
	color:#009;
	font-size:6pt;
}
 
.ageavg {
	position:absolute;
	z-index:6;
	height:15;
	width:18;
	margin-left:2px;
	color:#004;
	font-size:8pt;
	background:transparent;
}
.ageavg:before { content:"("; }
.ageavg:after { content:")"; }
 
.father, .mother { white-space:nowrap; }
.father { font-size:7pt; margin-top:4px; }
.mother { font-size:6pt; }
.vitals { font-size:6pt; }
 
.lineno {
	position:absolute;
	z-index:6;
	height:15;
	width:18;
	margin-left:2px;
	margin-top:3px;
	color:#99a;
	font-size:8pt;
	background:transparent;
}
 
/* pedigree box:dates font */
.name {
	position:absolute;
	height:39px;
	width:93px;
	z-index:5;
	text-align:center;
	background:#deeeff;
	border:1px solid #363;
	-webkit-border-radius:4px;
	border-radius:4px;
	font-family:Verdana, Arial, sans-serif;
 
/*
	-moz-box-shadow:1px 1px 3px 2px rgba(119, 119, 119, 0.9);
	-webkit-box-shadow:1px 1px 3px 2px rgba(119, 119, 119, 0.9);
	box-shadow:1px 1px 3px 2px rgba(119, 119, 119, 0.9);
*/
}
 
 
.pboxname, .pboxdates {
	text-align:center;
}
 
#datemodified {
	position:absolute;
	bottom:5px;
	right:14px;
	font-size:8pt;
}
#datemodified:before { content:"modified: "; }
 
#footer, #header {
	position:absolute;
	z-index:4;
	left:10px;
	top:2px;
	padding:4px;
	background:#009;
	color:#eef;
	text-align:center;
	-webkit-border-radius:8px;
	border-radius:8px;
 
	-moz-box-shadow:1px 1px 3px 2px rgba(119, 119, 119, 0.9);
	-webkit-box-shadow:1px 1px 3px 2px rgba(119, 119, 119, 0.9);
	box-shadow:1px 1px 3px 2px rgba(119, 119, 119, 0.9);
}
 
#header a { color:#fff; text-decoration:none; }
#header a:hover { color:#f00; text-decoration:underline; }
#header div { padding:0 15px; }
#header h1 { font-size:16px; color:#fff; }
#name table { border:1px solid red; }
#name table { border:1px solid red; }
#wrapper { position:relative; margin:0 8px; }

Top
Tags:
Mon, 2014-09-15 19:38
#1
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 6 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi tcloud, You should be able

Hi tcloud,
You should be able to wrap it in a dive and position that absolute or relative, then the others will take there positions from it's top left corner.

Top
Mon, 2014-09-15 20:11
#2
tcloud
tcloud's picture
Offline
Regular
Last seen: 5 years 46 weeks ago
Timezone: GMT-5
Joined: 2011-11-16
Posts: 12
Points: 19

I've tried every trick I can

I've tried every trick I can find.

I've changed the #wrapper to position:absolute with another div immediately inside with position:relative and overflow:hidden or auto -- but that just hides all the content. I put "clearfix" divs around the content, but that makes no difference.

The problem, as I see it, is the outer #wrapper div doesn't expand its height to match the content. If I set the background to a color or put a border around it, there is only a line at the top of the page, not surrounding it.

I have one option (that I'd rather not do) -- I can change the code of the generating program to add a "height" in pixels to the outer #wrapper div, but I'm not sure that would work. I really don't want to have to change the software that generates the page ....

Top
  • Locked