Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    simple Organizational Chart

    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

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,700
    Thanks
    80
    Thanked 4,658 Times in 4,620 Posts
    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:
    Code:
    <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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •