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.
Hi,
Do you mean something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](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
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
#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
<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>
Hmmm…That’s a neater solution than mine
Thanks guys, exactly what I wanted
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?
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!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](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
Excellent work as usual Paul, thanks m8.
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.