Organigramm in CSS erstellen

Du möchtest auf deiner Website ein Organigramm darstellen? Das ist doch gar kein Problem. Du kannst dabei ein Organigramm in CSS darstellen, ohne dass du weitere Hilfsmittel dafür benötigst.

Dazu zeige ich dir in diesem Artikel, wie du ganz einfach ein Organigramm in CSS erstellen kannst.

So erstellst du ein Organigramm in CSS

Um ein Organigramm auf deiner Website anzuzeigen, benötigst du dazu nur ein wenig CSS. Die einzelnen Hierarchiestufen bindest du dabei mit verschiedenen <div> Elementen ein. Das CSS sorgt dann entsprechend für die Gestaltung. Auf eine ganz ähnliche Art und Weise kannst du so bspw. auch Tabellen allein mit CSS erstellen.

Kopiere dazu einfach die nachstehenden Code Snippets in deine Website. Du kannst sie schließlich beliebig verändern, kürzen oder erweitern.

 

Code Beispiel (HTML):

<h1>Organigramm</h1>

<div id="container">

  <div id="no1"><a href="">Oberster Chef</a></div>
  <div id="line1"></div>
  <div id="line2"></div>
  <div id="line3"></div>
  <div id="line4"></div>
  <div id="line5"></div>
  <div id="line6"></div>
  <div id="no2"><a href="#">Chef vom Verkauf</a></div>
  <div id="no3"><a href="#">Oberster der Produktion</a></div>
  <div id="no4"><a href="#">Der, der vom Personal das Sagen hat</a></div>
  <div id="no5"><a href="#">Chef der Finanzen</a></div>
  <div id="line7"></div>
  <div id="line8"></div>
  <div class="clear"></div>
  <div id="no6"><a href="#">Teamleiter Produktion</a></div>
  <div id="line9"></div>
  <div id="line10"></div>
  <div id="no7"><a href="#">Chef der Buchhaltung</a></div>
  <div id="line11"></div>
  <div id="line12"></div>
  <div class="clear"></div>
  <div id="line13"></div>
  <div id="line14"></div>
  <div class="clear"></div>
  <div id="no8"><a href="#">Teamleiter Qualitätskontrolle</a></div>
  <div id="line15"></div>
  <div id="line16"></div>
  <div id="no9"><a href="#">Chef von den Finanzen</a></div>
  <div id="line17"></div>
  <div id="line18"></div>
  <div class="clear"></div>

</div>

 

Code Beispiel (CSS):

h1 {
    width:580px; 
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:18px;
    text-align:center;
    margin:40px auto;
 }
#container {
    width:580px; 
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:11px;
    text-align:center;
    margin:auto;
 }  
#container a {
    display:block;
    color:#000;
    text-decoration:none;
    background-color:#f6f6ff;
 }
#container a:hover {
    color:#900;
    background-color:#f6f6ff;
 }
#no1 {
    width:190px;
    line-height:60px;
    border:1px solid #000;
    margin:auto;
 }
#no1 a {
    height:60px;
 }
#line1 {
    font-size:0;
    width:1px;
    height:20px;
    color:#fff;
    background-color:#000;
    margin:auto;
 } 
#line2 {
    font-size:0;
    width:424px;
    height:1px;
    color:#fff;
    background-color:#000;    
    margin:auto;
 } 
#line3 {
    font-size:0;
    display:inline;
    width:1px;
    height:20px;
    color:#fff;
    background-color:#000;
    margin-left:78px;
    float:left;
 }  
#line4,#line5,#line6 {
    font-size:0;
    display:inline;
    width:1px;
    height:20px;
    color:#fff;
    background-color:#000;
    margin-left:140px;
    float:left;
 }
#no2 {
    display:inline;
    border:1px solid #000;
    clear:both;
    margin-left:35px;
    float:left;
 }
#no2 a,#no4 a,#no8 a {
    width:84px; 
    height:50px;
    padding-top:8px; 
 }  
#no3 {
    display:inline;
    border:1px solid #000;
    margin-left:58px;
    float:left;
 }
#no3 a,#no5 a,#no6 a,#no7 a,#no9 a {
    width:84px; 
    height:42px;
    padding-top:16px;  
 } 
#no4 {
    display:inline;  
    border:1px solid #000;
    margin-left:53px;
    float:left;
 }  
#no5 {
    display:inline;   
    border:1px solid #000;
    margin-left:55px;
    float:left;
 }  
#line7,#line13 {
    font-size:0;
    display:inline;
    width:1px;
    height:38px;
    color:#fff;
    background-color:#000;
    margin-left:219px;
    float:left;
 } 
#line8,#line14 {
    font-size:0;
    display:inline;
    width:1px;
    height:38px;
    color:#fff;
    background-color:#000;
    margin-left:281px;
    float:left;
 }  
#no6,#no8 {
    display:inline;  
    border:1px solid #000;
    margin-left:107px;
    float:left;
 }
#line9,#line11,#line15,#line17 {
    font-size:0;
    display:inline;
    width:26px;
    height:1px;
    color:#fff;
    background-color:#000;    
    margin-top:29px;
    float:left;
 }  
#line10,#line12,#line16,#line18 {
    font-size:0;
    display:inline;
    width:1px;
    height:60px;
    color:#fff;
    background-color:#000;
    float:left;
 } 
#line16,#line18 {
    height:30px;
 }
#no7,#no9 {
    display:inline; 
    border:1px solid #000;
    margin-left:169px;
    float:left;
 } 
.clear {
    clear:both;
 }

 

Anzeigebeispiel

In deine Website eingebaut sieht das Snippet dabei wie folgt aus:

So kann ein Organigramm in CSS aussehen.
So kann ein Organigramm in CSS aussehen (Bild anklicken, um es zu vergrößern).

 

 

Wie du siehst, ist in diesem Snippet das Organigramm dabei nur rudimentär gestaltet. Du kannst dir das Organigramm jedoch genau so gestalten, wie du es brauchst.

Du kannst dir übrigens gerne auch ein Live Beispiel anschauen.

 

 

Schlusswort

Wie du siehst, ist es auf jeden Fall nicht so schwer, ein Organigramm in CSS zu erstellen. Der Aufbau ist dabei lediglich etwas aufwändig. Bei großen Organigrammen könnte man hier jedoch etwas den Überblick verlieren. Wenn man jedoch konzentriert an die Sache herangeht, sollte es kein Problem sein.

 

Browser Test

Das oben genannte CSS Snippet habe ich über dies in folgenden Browsern getestet.

  • Internet Explorer 11 (Windows 10 Edition)
  • Microsoft Edge 40.15063
  • Mozilla Firefox 56 (inkl. Firefox 55.0.2 mobile – Android)
  • Google Chrome 61 (inkl. Chrome 61 mobile – Android)

In den genannten Browsern funktioniert das Snippet dabei einwandfrei. Ich kann jedoch leider nicht versichern, dass dieses CSS Snippet auch in hier nicht aufgeführten Browsern funktioniert.

 

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.