Advertisement
  1. Web Design
  2. CSS

CSS-Diagramme: Erstellen eines Organigramms

by
Read Time:7 minsLanguages:

German (Deutsch) translation by Ines Willenbrock (you can also view the original English article)

In früheren Tutorials haben wir gelernt, wie man verschiedene Arten von Diagrammen erstellt, einschließlich Balkendiagramme, Thermometerdiagramme und Ringdiagramme. Heute setzen wir diese Reise fort, indem wir ein Organigramm nur in CSS erstellen.

Sind Sie bereit, Ihre CSS-Fähigkeiten zu testen?

Das Organigramm, das wir erstellen werden

Hier ist das CSS-Diagramm, das wir erstellen werden:

Es besteht aus vier Ebenen und beschreibt die hierarchische Struktur eines Unternehmens.

Was ist ein Organigramm?

Um herauszufinden, was ein Organigramm ist, leihen wir uns Wikipedias Definition aus:

"Ein Organisationsdiagramm, auch Organigramm oder Organogramm genannt, ist ein Diagramm, das die Struktur einer Organisation und die Beziehungen und die relativen Ränge ihrer Teile und Positionen/Jobs zeigt. Der Begriff wird auch für ähnliche Diagramme verwendet, z. B. für Diagramme, die die verschiedenen Elemente eines Wissensfeldes oder einer Gruppe von Sprachen zeigen."

Hier ist ein Beispiel:

Von S.s.kulkarni9090 - Eigene Arbeit, CC BY-SA 3.0

Diese Art von Diagramm wird häufig verwendet, um die Beziehungen zwischen den Personen oder Abteilungen eines Unternehmens darzustellen. Auf einer Unternehmenswebsite finden Sie sie wahrscheinlich auf der Seite "Über uns" oder "Unternehmen".

Sie sehen auch Organigramme, die für Stammbäume verwendet werden (siehe den Stammbaum der britischen Royal Family und die Nachfolgelinie auf der Website der BBC). Sie eignen sich ideal zur Veranschaulichung von Hierarchien.

1. Geben Sie den Container an

Unser Diagramm wird in einem Container leben:

2. Definieren Sie einige grundlegende Stile

Bevor wir die Ebenen durchlaufen, richten wir einige Reset-Regeln und Hilfsklassen ein:

Beachten Sie die rectangle-Klasse. Wir fügen dies an jeden Knoten/jedes Element unseres Diagramms an.

Hinweis: Der Einfachheit halber habe ich das CSS nicht optimiert. Dies wird Ihnen helfen, ein besseres Verständnis der Stile der einzelnen Ebenen zu bekommen.

3. Geben Sie die Ebenen an

An diesem Punkt können wir die Diagrammebenen angeben. Wie wir vorhin besprochen haben, haben wir hier vier davon:

LevelsLevelsLevels

Jede Ebene stellt eine Rolle in einem Unternehmen dar, beginnend mit der höchsten Ebene.

Level #1

Die erste Ebene enthält nur einen einzelnen Knoten:

Level 1Level 1Level 1

HTML

Um es zu beschreiben, verwenden wir ein h1-Element, da es der wichtigste Teil unseres Diagramms ist:

CSS

Wir verwenden das Pseudoelement ::before, um eine Beziehung zwischen der ersten und zweiten Ebene zu erstellen:

Level #2

Die zweite Ebene besteht aus zwei Knoten:

Level 2Level 2Level 2

Wie wir in einem Moment sehen werden, wird jeder Knoten andere untergeordnete Knoten enthalten.

Diese untergeordneten Knoten stellen niedrigere Ebenen der Führungshierarchie dar.

HTML

Um dies zu beschreiben, verwenden wir eine geordnete Liste mit zwei Listenelementen. Jedes Listenelement enthält ein h2-Element:

CSS

Dank CSS Grid erstellen wir das Layout für diese Ebene.

Als Nächstes verwenden wir das Pseudoelement ::before bestimmter Elemente zum Erstellen der Zuordnungen zwischen den Knoten dieser Ebene und den angrenzenden Ebenen:

Beachten Sie, dass wir auch das Pseudoelement ::after der Knoten der zweiten Ebene definieren. Dies wird nur auf kleinen Bildschirmen angezeigt.

Level #3

Die dritte Ebene umfasst vier Knoten.

Wir ordnen die ersten beiden Knoten dem ersten Knoten der zweiten Ebene zu und die letzten beiden Knoten dem zweiten Knoten der ersten Ebene:

Level 3Level 3Level 3

HTML

Nun definieren wir in der ursprünglichen Liste, in der sich die zweite Ebene befindet, zwei neue Listen. Jedes von ihnen enthält zwei Listenelemente. Für jedes Element wird ein h3-Element angegeben:

CSS

Nochmals vielen Dank an CSS Grid, wir positionieren die Knoten.

Auf die gleiche Weise legen wir das Pseudoelement ::before bestimmter Elemente zum Erstellen der erforderlichen Verbindungen fest:

Level #4

Wir brauchen sechzehn Knoten für die vierte Ebene. Diese werden ebenfalls in vier Listen verteilt.

Jeder Knoten der dritten Ebene enthält eine Liste:

Level 4Level 4Level 4

HTML

Wir definieren in der ursprünglichen Liste, in der sich die zweite Ebene befindet, vier neue Listen. Jedes von ihnen enthält vier Listenelemente. Für jedes Element wird ein h4-Element angegeben:

CSS

Erneut werden wir das ::before Pseudo-Element bestimmter Elemente für die Zuordnung der Knoten der vierten Ebene mit ihren Eltern festlegen:

Organigramme und Responsive Design

Es ist schwierig, ein Organigramm responsive zu machen. Ich erinnere mich, dass ich das Markup ein oder zwei Mal rekonstruieren musste, bis ich zu dieser Version kam. Wenn Sie planen, ein solches Diagramm zu erstellen, empfehle ich Ihnen, einem mobile-first-Ansatz zu folgen.

In diesem Sinne ist hier sein mobiles Layout:

Responsive Layout of Organization ChartResponsive Layout of Organization ChartResponsive Layout of Organization Chart

Um dieses Verhalten zu erreichen, müssen wir einige Stile ändern:

Wir haben unser CSS-Diagramm fertig gestellt!

Herzlichen Glückwunsch, Leute! Ohne eine einzige Zeile JavaScript zu schreiben, haben wir es geschafft, ein voll funktionsfähiges Organigramm zu erstellen.

Erinnern wir uns an das, was wir gebaut haben:

Natürlich denken Sie daran, dass unser Diagramm eine bestimmte Struktur hat. Je nach Ihren Anforderungen können Sie den Inhalt anreichern oder das Layout ändern. Wenn Sie etwas Fortschrittlicheres oder Dynamisches benötigen, werfen Sie einen Blick auf einige JavaScript-Bibliotheken wie Highcharts.js.

Haben Sie jemals ein CSS-Diagramm erstellt? Wenn ja, teilen Sie bitte Ihre Erfahrungen mit uns!

Weitere CSS-Diagramme (manchmal mit JavaScript)

Wenn Sie noch etwas Inspiration benötigen, vergessen Sie nicht, meine anderen Diagramme im Tuts+ Archiv zu überprüfen oder eine schnelle Suche auf CodePen zu machen.

Wie immer vielen Dank für das Lesen!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.