SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: CSS org chart

  1. #1
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS org chart

    How would I go about creating a basic organisation chart using css? What I want is a series of boxes with job titles in them which appear vertically and with a connecting line in the center.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Do you mean something like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    .jobtitle {
     position:relative;
     width:200px;
     height:40px;
     line-height:40px;
     border:2px solid #000;
     margin-bottom:50px;
     text-align:center;
    }
    .connector {
     position:absolute;
     left:100px;
     bottom:-52px;
     height:50px;
     border-left:2px solid #000;
    }
    </style>
    </head>
    <body>
    <div class="jobtitle"><div class="connector"></div>Job Title</div>
    <div class="jobtitle"><div class="connector"></div>Job Title</div>
    <div class="jobtitle"><div class="connector"></div>Job Title</div>
    <div class="jobtitle"><div class="connector"></div>Job Title</div>
    <div class="jobtitle">Job Title</div>
    </body>
    </html>
    Paul

  3. #3
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    2 classes should do it, one for the boxes one for the connecting lines, however I think and extra one to take care of some IE bugs would help.

    The styles
    Code:
    #OrgChart {
      text-align: center; //Get round IE5 centering bug
    }
    
    .job {
      margin-left: auto;
      margin-right: auto;
      border: 1px solid black;
      width: 15em;
    }
    .line {
      margin-left: auto;
      margin-right: auto;
      border-left: 1px solid black;
      width: 0px;
      height: 4em;
    }
    and the html

    HTML Code:
    <div id="OrgChart">
     <div class="job">Manager</div>
     <div class="line"></div>
     <div class="job">Sub-Manager</div>
     <div class="line"></div>
     <div class="job">Supervisor</div>
     <div class="line"></div>
     <div class="job">Lowlife</div>
    </div>

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hmmm..That's a neater solution than mine

  5. #5
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys, exactly what I wanted

  6. #6
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since I made this original post there's been a further need and I wonder can I still use css.


    The org charts I'm getting now have more than one child to a parent eg

    manager
    assistant1 assistant2

    Any ideas how I could take the solution posted above further to do this?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think you'd probably just end up just absolutely placing everything.

    I did play around with this and then I got bored . Maybe you can finish it off!
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    .jobtitlemain {
     position:relative;
     width:100px;
     height:40px;
     line-height:40px;
     border:2px solid #000;
     margin-bottom:50px;
     text-align:center;
     margin-left:auto;
     margin-right:auto;
    }
    .jobtitle {
     position:absolute;
     width:100px;
     height:40px;
     line-height:40px;
     border:2px solid #000;
     margin-bottom:50px;
     text-align:center;
    }
    .toplevel {
     position:relative;
     width:300px;
     height:20px;
     border:2px solid #000;
     border-bottom:none;
     margin-left:auto;
     margin-right:auto;
    }
    .toplevel2 {
     position:relative;
     width:150px;
     height:20px;
     border:2px solid #000;
     border-bottom:none;
     margin-left:auto;
     margin-right:auto;
    }
    .secondlevel {
     position:absolute;
     top:114px;
     margin-left:-150px;
    }
    .secondlevelright {
     position:relative;
     top:94px;
     margin-left:150px;
    }
    .connector {
     bottom:-52px;
     height:50px;
     border-left:2px solid #000;
    }
    .connectorlong {
     bottom:-72px;
     height:70px;
     border-left:2px solid #000;
    }
    .centre {position:absolute;left:50px;}
    .left {position:absolute;left:-50px;top:20px;}
    .right {position:absolute;left:250px;top:20px;}
    .right2 {position:absolute;left:100px;top:20px;}
    .offset {margin-top:90px;margin-left:50px;}
    </style>
    </head>
    <body>
    <div class="jobtitlemain"> 
      <div class="connector centre"></div>
      Job Title </div>
    <div class="toplevel"> 
      <div class="left jobtitle"> 
    	<div class="connector centre"></div>
    	Job title</div>
      <div class="right jobtitle"> 
    	<div class="connectorlong centre "></div>
    	Job Title 
    	<div class="jobtitle left offset"> 
    	  <div class="connectorlong centre "></div>
    	  Job Title </div>
      </div>
      <div class="secondlevel"> 
    	<div class="toplevel2"> 
    	  <div class="left jobtitle"> 
    		<div class="connector centre"></div>
    		Job title</div>
    	  <div class="right2 jobtitle"> 
    		<div class="connector centre"></div>
    		Job Title</div>
    	</div>
      </div>
    </div>
    </body>
    </html>
    I'm sure theres an easier way !

    Paul

  8. #8
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent work as usual Paul, thanks m8.

  9. #9
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know this is an old thread, but it still gets indexed up high in searching for CSS Org charts, so I wanted to post Slickmap http://astuteo.com/slickmap/ is something to consider for this function.


Bookmarks

Posting Permissions

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