[css-d] roots tree
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
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... :-) http://www.gunlaug.no/contents/toc_7a.html 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
-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
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: 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/
