[css-d] roots tree

[Bob Meetin]

I have a task to create a roots type family tree.  It is required to 
display horizontally with a maximum of 3 levels below the top, so it 
will have a total of 14 fields/boxes.  To see an unsightly handwritten 
example, visit www.dottedi.biz/images/diagnostics/sample_roots_tree.jpg. 

I plan to set this up in an HTML table unless someone suggests 
otherwise.  What I am looking for is a CSS tutorial that will guide me 
through the lines that I will need to create connecting the elements.  
Although in the picture I have the names going through the lines, I 
could probably lay the names above or below the lines.

Recommendations please? 

-Bob
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] roots tree

[David Laakso]

Bob Meetin wrote:
> I have a task to create a roots type family tree. 

> www.dottedi.biz/images/diagnostics/sample_roots_tree.jpg. 
>
> -Bob
>   



It could boggle ones mind... :-)

Best,
~d


-- 
desktop
http://chelseacreekstudio.com/
mobile
http://chelseacreekstudio.mobi/

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] roots tree

[Climis, Tim]

-Original Message-
From: css-d-boun...@lists.css-discuss.org 
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Bob Meetin
Sent: Monday, May 03, 2010 11:21 AM
To: CSS-D
Subject: [css-d] roots tree

> I have a task to create a roots type family tree.
> Recommendations please? 

Well, if you're looking for a non-table solution, you can find an example here 
[1] that you might be able to adapt.

But if you're set on tables, you'll just need the following:

table {
  border-collapse: collapse; /* share borders between cells */
}

and then variations on 

td {
  border-left (or right, or top, or bottom): 1px solid black;
}

You can have the "middle" lines (instead of top or bottom) if you do a 
rowspan=2 for your content cells.

[1]: http://www.indiana.edu/~intlserv/ois/org_chart.php
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] roots tree

[tedd]

At 9:20 AM -0600 5/3/10, Bob Meetin wrote:
>I have a task to create a roots type family tree.  It is required to
>display horizontally with a maximum of 3 levels below the top, so it
>will have a total of 14 fields/boxes.  To see an unsightly handwritten
>example, visit www.dottedi.biz/images/diagnostics/sample_roots_tree.jpg.
>
>I plan to set this up in an HTML table unless someone suggests
>otherwise.  What I am looking for is a CSS tutorial that will guide me
>through the lines that I will need to create connecting the elements. 
>Although in the picture I have the names going through the lines, I
>could probably lay the names above or below the lines.
>
>Recommendations please?
>
>-Bob

-Bob:

The following goes four levels deep, displays horizontally, and uses 
CSS (thus on topic) as well as requiring PHP:

PHP example and Code:

http://webbytedd.com/ccc/family-tree/

CSS:

http://webbytedd.com/ccc/family-tree/a.css

This example shows you how to do it without using tables, another 
pro-css point.

Normally, one would populate this layout with data taken from a 
database or form, thus some programming will be required to get it to 
work for you. However, this gives you the layout and the code, which 
is more than what I had at the start.

Cheers,

tedd

-- 
---
http://sperling.com  http://ancientstones.com  http://earthstones.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] roots tree

[Bob Meetin]

> -Bob:
>
> The following goes four levels deep, displays horizontally, and uses 
> CSS (thus on topic) as well as requiring PHP:
>
> PHP example and Code:
>
> http://webbytedd.com/ccc/family-tree/
>
> CSS:
>
> http://webbytedd.com/ccc/family-tree/a.css
>
> This example shows you how to do it without using tables, another 
> pro-css point.
>
> Normally, one would populate this layout with data taken from a 
> database or form, thus some programming will be required to get it to 
> work for you. However, this gives you the layout and the code, which 
> is more than what I had at the start.
>
> Cheers,
>
> tedd
>
>   
All 3 responses are good options.  No I am not tied to tables; pure CSS 
works for me just as well.  The data is coming from MySQL and yes I will 
be using PHP to make it happen.  Thanks for help in lining up the 
ducks.  -Bob

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] roots tree

[Alan Gresley]

Bob Meetin wrote:
> I have a task to create a roots type family tree.  It is required to 
> display horizontally with a maximum of 3 levels below the top, so it 
> will have a total of 14 fields/boxes.  To see an unsightly handwritten 
> example, visit www.dottedi.biz/images/diagnostics/sample_roots_tree.jpg. 
> 
> I plan to set this up in an HTML table unless someone suggests 
> otherwise.  What I am looking for is a CSS tutorial that will guide me 
> through the lines that I will need to create connecting the elements.  
> Although in the picture I have the names going through the lines, I 
> could probably lay the names above or below the lines.
> 
> Recommendations please?
> 
> -Bob


This is how I plan to layout genealogy trees using table display 
properties and ordered list.




This currently works in IE8 and all other good browsers. IE7- would 
just show this.





For the connecting lines, I plan to use background images with the 
background-size property (was not well supported when I begun) along 
with some of the current borders.


-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/