Re: [css-d] How would you approach an organization chart in CSS?
At 4:51 PM -0700 6/10/08, Conjurer wrote: I need to redo a organization chart that is a graphic and therefore not editable. I could rework it in another graphic, but I was trying to think how you could do it with just markup and CSS. It is a tree with a President at the root, 4 positions under him, and two of those have a level of four under them (8 total). Then there is a fourth layer that reports to the third level with 6 different people. You can see the current org chart here: http://www.lechess.com/management.htm Anyone have any thought on this? I did something similar, you can review my solution here: http://webbytedd.com/ccc/family-tree/ Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ css-discuss [EMAIL PROTECTED] 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/
[css-d] How would you approach an organization chart in CSS?
I need to redo a organization chart that is a graphic and therefore not editable. I could rework it in another graphic, but I was trying to think how you could do it with just markup and CSS. It is a tree with a President at the root, 4 positions under him, and two of those have a level of four under them (8 total). Then there is a fourth layer that reports to the third level with 6 different people. You can see the current org chart here: http://www.lechess.com/management.htm Anyone have any thought on this? Thanks! __ css-discuss [EMAIL PROTECTED] 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] How would you approach an organization chart in CSS?
You said just markup and CSS, but honestly this sounds more like a table with many of the cells spanning multiple columns and perhaps a narrow vertical background image used as the vertical line. Conjurer wrote: I need to redo a organization chart that is a graphic and therefore not editable. I could rework it in another graphic, but I was trying to think how you could do it with just markup and CSS. It is a tree with a President at the root, 4 positions under him, and two of those have a level of four under them (8 total). Then there is a fourth layer that reports to the third level with 6 different people. You can see the current org chart here: http://www.lechess.com/management.htm Anyone have any thought on this? Thanks! __ css-discuss [EMAIL PROTECTED] 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/ -- Bob Meetin dotted i - Internet Strategies Solutions www.dottedi.biz 303-926-0167 __ css-discuss [EMAIL PROTECTED] 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] How would you approach an organization chart in CSS?
Hi I think it could be done with a lot of absolute positioning but personally I would just rework it as another graphic in a vector drawing program, then export that as a .png and use that. When you need to edit it, do it in the vector drawing program and export again as .png for use on web. Patrick On 11 Jun 2008, at 00:51, Conjurer wrote: I need to redo a organization chart that is a graphic and therefore not editable. I could rework it in another graphic, but I was trying to think how you could do it with just markup and CSS. __ css-discuss [EMAIL PROTECTED] 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] How would you approach an organization chart in CSS?
Looks like a table to me... I wouldn't be afraid of using a table for it but making it a graphic would be MUCH easier than screwing with any HTML element. Mike -Original Message- I need to redo a organization chart that is a graphic and therefore not editable. I could rework it in another graphic, but I was trying to think how you could do it with just markup and CSS. __ css-discuss [EMAIL PROTECTED] 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] How would you approach an organization chart in CSS?
I would agree with an image for the kind of char you want, but don't toss out the idea of reworking the chart to take better advantage of HTML elements and CSS, such as a hierarchical OL - you could have a class=levelN (where N is the level, 0, 1, 2, etc) and each class could have a set indent based on the level and a different icon for each level's LI element. Use bold/unweighted font for the solid lines vs. Founders and Hon VP (since they have the dotted lines going on). Also, tables would do fine, but again you would have to think outside of the original design. One idea would be to create a table, make use of nbsp;'d cells in the table for spacing or overflow: auto; for cells (can't remember if this is legal in a TD?). Instead of solid chart lines, use different color backgrounds from cell to cell and make your cellspacing and border to 0. Good Luck! Zak On Tue, Jun 10, 2008 at 8:33 PM, Michael Stevens [EMAIL PROTECTED] wrote: Looks like a table to me... I wouldn't be afraid of using a table for it but making it a graphic would be MUCH easier than screwing with any HTML element. Mike -Original Message- I need to redo a organization chart that is a graphic and therefore not editable. I could rework it in another graphic, but I was trying to think how you could do it with just markup and CSS. __ css-discuss [EMAIL PROTECTED] 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/ __ css-discuss [EMAIL PROTECTED] 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/
