...
PDA

simple Organizational Chart

klawz_san
05-05-2009, 08:26 PM
I am trying to create an organizational chart in CSS without using tables. I dont think it should be that complex but I am not entirely sure how to do it.

There should be one big box on the top with three lines attaching from it to three smaller boxes below that one main box. (If the lines complicates things to much, i can do without them..) That is all. I have tried several things but they just dont come out right. Anyone know a code that I could use? Thanks in advance.

If all else fails, im thinking I will see if I can just create an image for this. however I would like to see how this is done in CSS/HTML
Old Pedant
05-05-2009, 10:59 PM
Ummm...are you aware you posted in the ASP forum?

This question doesn't seem to have anything to do with ASP, unless perhaps you also intend to try to draw the org chart dynamically based on info from a database???

I would think you should just post this in the HTML forum.

In general, you can't draw lines in HTML. But you can get sneaky: You can create rectangular <div>s and then just put borders on one or two edges of them.

Somewhat silly and inflexible example:

<html>
<head>
<style>
div { position: absolute; width: 200px; height: 50px; text-align: center; }
</style>
</head>
<body>
<div style="top: 40px; left: 250px; width: 500px; border: solid black 1px;">
President
</div>
<div style="top: 90px; left: 300px; border-left: solid black 1px; border-right: solid black 1px;">
&nbsp;
</div>
<div style="top: 90px; left: 500px; border-right: solid black 1px;">
&nbsp;
</div>
<div style="top: 140px; left: 150px; border: solid black 1px;">
V.P.Engineering
</div>
<div style="top: 140px; left: 400px; border: solid black 1px;">
V.P.Marketing
</div>
<div style="top: 140px; left: 650px; border: solid black 1px;">
V.P.Finance
</div>
</body>
</html>

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum