(Baum)hierarchie in CSS/HTML

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    Vom 9.-12. März findet das Weltenbastler Frühjahrstreffen im Landgut Breibach im Bergischen Land statt. Zur verbindlichen Anmeldung geht es hier lang.

    • (Baum)hierarchie in CSS/HTML

      Hedaho!


      Ich hab mir einen hierarchischen "Baum" für die digitale Weltpräsentation gebastelt und wollte den Code zur Verfügung stellen, damit auch ihr das Gebilde bei Bedarf bei euch verbasteln könnt, und dabei gerne auch soweit verändern wie ihrs braucht/wollt.

      Obwohl als Technologiebaum gedacht, kann man das auch für andere Zwecke verwenden. Z.B. um organisatorische Hierarchien darzustellen. Wenn euch noch andere Anwendungsfälle einfalle, bitte melden, ich rätsel auch noch ein bisschen dran. :) - Vorlage war folgendes: jsfiddle.net/jedidiah/sTj3E/4/embedded/result/ <Beim Anklicken sieht man hier die vorausgesetzten Technologien markiert.

      Zum Testen den folgenden Code hier links reinkopieren und auf "Run" drücken: w3schools.com/cssref/tryit.asp…ame=trycss_vertical-align . Ggf. brauchts nochmal Anpassungen, weils auf Firefox getestet wurde und -ms-box-orient:horizontal; nur der firefox-Befehl dafür ist x.x

      Rechts zu sehen sind die Boxen "Feuer", "Kupfer" und "Both", wobei die letzteren beim Maushover jeweils die vorigen mit hervorheben.

      CSS-Quellcode

      1. <!DOCTYPE html><html><head><style>
      2. .tree {
      3. display: flex; -ms-box-orient: horizontal;
      4. flex-direction: row-reverse;
      5. width: 500px;
      6. flex-wrap:wrap-reverse;text-align: center;
      7. background-color: #222;color: #ccc;
      8. padding:10px;
      9. }
      10. .tree div {display:inline-block;
      11. flex:1;
      12. height:30px;
      13. line-height:30px;
      14. flex-basis:84px;
      15. max-width:84px;
      16. align-self: flex-end;
      17. background-color: #444;
      18. margin: 4px 6px;
      19. border: 2px solid #444;
      20. transition: all 0.5s ease-out;
      21. }
      22. .tree div span{display: inline-block;vertical-align:middle;}
      23. .tree div:hover { cursor:help;
      24. border-color:white;
      25. background-color: #666;
      26. color: #fff;
      27. }
      28. .tree div[Hidden] {visibility:hidden;}
      29. .tree div[rFeuer]:hover ~ div[Feuer] {
      30. background-color: #555;border-color: green;}
      31. .tree div[rKupfer]:hover ~ div[Kupfer] {
      32. background-color: #555;border-color: green;}
      33. </style></head><body>
      34. <div class="tree">
      35. <div><span>end</span></div>
      36. <div rFeuer rKupfer><span>Both</span></div>
      37. <div Hidden><span>d</span></div>
      38. <div><span>e</span></div>
      39. <div><span>d</span></div>
      40. <!-- Da 5 Boxen pro Zeile passen beginnt hier die nächste. -->
      41. <div Kupfer rFeuer><span>Kupfer</span></div>
      42. <div><span>b</span></div>
      43. <div Feuer><span>Feuer</span></div>
      44. <div><span>x</span></div>
      45. </div>
      46. </body></html>
      Alles anzeigen
      Im .tree-Container ist eine Weite von 500px vorgegeben, wobei die Box selbst durch das Padding größer wird, für die kleinen Boxen jeweils 100px Breite durch 84 + 2*6px im Margin und 2*2px im Rahmen. So passen hier 5 Boxen nebeneinander.

      Eine Hidden-Box wird nicht dargestellt, füllt aber den Raum.

      Boxen mit Attribut rFeuer (für Requires Feuer) markieren Feuer-Boxen mit grünem Rahmen.
      Boxen mit Attribut rKupfer (für Requires Kupfer) markieren Kupfer-Boxen mit grünem Rahmen.
      Boxen mit Attribut Feuer oder Kupfer geben an, dass sie eine Feuer- oder eben Kupfer-Box sind und reagieren auf die rFeuer/rKupfer-Anfragen.

      Wichtig ist, dass im CSS nur nachfolgende Geschwisterboxen angesprochen werden können, nicht vorhergehende. Wenn man in den Code schaut, müssen die rAttribut-Boxen vor den Attribut-Boxen kommen, wenn das mit der Markierung funktionieren soll. Gibt man der ersten "end"-Box ein Feuer-Attribut, wird dieses nicht von nachfolgenden rFeuer-Attributen angesprochen. Das ist leider ein Fehler, den man schnell machen kann und der sich nur darin zeigt, dass die Box eben nicht grün eingerahmt wird.

      Auch eklig bei der Bearbeitung ist hier das "row-reverse". Damit in der Hierarchie eben nicht angesprochen wird, das folgt, sondern was vorhergegangen ist, ist der ganze Baum falschrum aufgezogen. Man beachte, dass die End-Box im Code an erster Stelle kommt, in der Darstellung aber das Ende bildet. Genauso findet man die X-Box im Code am Ende, in der Darstellung jedoch am Anfang. Die Boxen werden also von rechts unten der Reihe folgend nach links, und dann in der Zeile darüber abermals von rechts nach links gefüllt. Die letzte Box hinterm X ist nicht hidden, sondern existiert nicht. In der Darstellung ist das aber die allererste Box.



      Soweit so gut, bei Fragen gerne fragen, bei Anwendung oder Anwendungsideen gerne mitteilen und viel Spaß. :)


      Erweiterungen
      Was als nächstes ansteht ist eine Vollweiten-Box über allen anderen zu haben, und diese beim Hover der anderen mit einem Beschreibungstext zu füllen. Das funktioniert wie das Grünhovern, nur dass die Box ganz oben per :after-Befehl dann einen anderen Text erhält.
      Damit bricht man aber mit dem heiligen Prinzip des zweiten S aus CSS und macht ein CCS draus! (Cascading Style Sheet -> Cascading Content Sheet)
      > Möchte in Fantasy-Ausrichtung an den Erfolg von Scientology anknüpfen.

      Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von Eru ()