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; }
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.
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 ....