Organigramm erstellen.

Hallo,

nun bräuchte ich mal ein paar Tipps von euch, bzw. eure Unterstützung.

Ich habe vor auf einer Seite ein Organigramm zu erstellen.

Es handelt sich um dieses Organigramm.

http://www.feuerwehr-angelbach…ganigramm/Organigramm.png

Die gelben Punkte müssen nicht so versetzt sein, es langt wenn diese in einer Reihe sind.

Nun hab ich auch schon etwas gegoogelt und bin auf dies gestoßen.

https://www.astuteo.com/slickmap/

Ansich ist dies ja schonmal nicht schlecht.

Nun hab ich aber mir gedacht dies müsste doch auch mittels den Hausmitteln vom wsc gehen.

Und zwar das ganze mit div containern und der grid.scss.

Nun aber dennoch die Frage wie würdet ihr vorgehen, vielleicht gibt es ja jemanden der sowas schon umgesetzt hat.

So ich habe mich mach dran gewagt.

Komplett mit boardmittel geht das ganze nicht.

Ich bin hergegangen und hab den Boxen eine feste breite gegeben, so wusste ich genau wieviel px ich das ganze hin und her schieben muss.

Das ganze Organigramm wurde rein mit div container aufgebaut.

Wenn sich das jemand ansehen will, kann er dies gerne derzeit unter

http://feuerwehr-angelbachtal.…ge/index.php?organigramm/

Quote from jens1o

Nicht schlecht

Danke dir.

Hier mal der CSS Code für jeden der ihn vllt gebrauchen kann.

body[data-page-id="105"] {
    .border {
        border: $wcfContentBorder 1px solid;
    }
    
    .organigramm-col {
        flex: 0 0 160px;
        width: 160px;
        min-height: 40px;
    }
    .border-left {
        border-left: $wcfContentBorder 1px solid;
        min-height: 20px;
        flex: 0 0 200px;
        width: 200px;
    }
    .border-right {
        border-right: $wcfContentBorder 1px solid;
        min-height: 20px;
        flex: 0 0 200px;
        width: 200px;
    }
    .border-top {
        border-top: $wcfContentBorder 1px solid;
        min-height: 20px;
    }
    .border-bottom {
        border-bottom: $wcfContentBorder 1px solid;
        min-height: 20px;
    }
    
    .border-left-right-top {
        border-top: $wcfContentBorder 1px solid;
        border-left: $wcfContentBorder 1px solid;
        border-right: $wcfContentBorder 1px solid;
        min-height: 20px;
        flex: 0 0 200px;
        width: 200px;
    }
    
    .border-left-right {
        border-left: $wcfContentBorder 1px solid;
        border-right: $wcfContentBorder 1px solid;
        min-height: 20px;
        flex: 0 0 200px;
        width: 200px;
    }
}

Zusätzlich wurde bei einigen rows style="justify-content: center;" für die Boxen die sich nach links und rechts aufteillen wurde style="margin-right: 40px;" verwendet.

Und das ganze noch per style="text-align: center;" in der section zentriert.

Vielleicht mach ich das ganze noch in css klassen rein, ich weiß es noch nicht.

Scamander

Mobil ist es noch nicht, optimiert.

Hatte ich glaub vergessen zu erwähnen. Mobil müsste es aber mit Boardmitteln werden, muss ich noch schaun.

Das kleiner gemacht, hast du das auf dem PC? Oder wo hast du das gemacht?

Weil bei mir kann ich es doch recht weit kleiner machen.

Ok, ja ich konnte es nun nachvollziehen. Das muss ich wohl noch eine min-weight rein machen, das dies nicht kleiner wie x Pixel wird.

Und für Mobil muss das ganze dann eben untereinander kommen, weil anderst langt der platz definitiv nicht.

Ich berichte wenn ich es verbessert habe, muss nun erstmal noch andere Sachen erledigen.