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-angelbachtal.de/homepage/image…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.

    Gruß Alex

  • Nicht schlecht ;)

    Danke dir.

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

    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.

    Gruß Alex

  • Seiht gut aus. :thumbup:

    Aber wirklich flexibel ist das leider nicht. Mobil funktioniert es überhaupt nicht und selbst wenn das Fenster nur minimal kleiner ist, kommt es schon zu erheblichen Darstellungsfehlern. So würde mir persönlich das ganze nicht gefallen. :D

    Aber ansonsten eine nette Sache mit dem Diagramm und CSS. Nicht schlecht.

  • 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.

    Gruß Alex

  • 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.

    Gruß Alex

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!