heinetz: Verschachtelte Tabelle mit Tabellenlayout

Hallo Forum,

ich stehe vor der Aufgabe, eine verschachtelte Liste mit css zu gestalten, ohne die HTML-Struktur verändern zu können.

Meine Liste sieht wie folgt aus:

<ul class="menu">
 <li class="has-children">
  <a>A</a>
  <ul class="sub-menu">
   <li><a>A1</a></li>
   <li><a>A2</a></li>
   <li><a>A3</a></li>
  </ul>
 </li>
 <li class="has-children">
  <a>B</a>
  <ul class="sub-menu">
   <li><a>B1</a></li>
   <li><a>B2</a></li>
   <li><a>B3</a></li>
  </ul>
 </li>
 <li class="has-no-children">
  <a>C</a>
 </li>
 <li class="has-no-children">
  <a>D</a>
 </li>
 <li class="has-no-children">
  <a>E</a>
 </li>
</ul>

Mit einer HTML-Tabelle würde ich das Layout wie folgt umsetzen:

<table>
 <tr>
  <td rowspan="3">A</td>
  <td rowspan="3">B</td>
  <td>C</td>
 </tr>
 <tr>
  <td>D</td>
 </tr>
 <tr>
  <td>E</td>
 </tr>
</table>

(A-E sind die li[class="$children"])

Alle Listen nebeneinander darzustellen geht einfach mit display:table-cell. Aber wie ich die letzten drei li[class="has-no-children"] untereinander darstelle, weiss ich nicht.

Hat jemand einen Lösungsvorschlag?

danke und

beste gruesse, heinetz

  1. Hallo

    Deine Angaben sind leider sehr nebulös. So gibt es in der Liste Inhalte, die in der Tabelle nicht erscheinen.

    Ohne Änderungen am Quelltext sehe ich "float:left;" mit passenden Angaben zu Größen, Abständen und Aussehen (list-style-type) als mögliche Lösung.

    Gruss

    MrMurphy

    1. Hallo,

      Deine Angaben sind leider sehr nebulös. So gibt es in der Liste Inhalte, die in der Tabelle nicht erscheinen.

      entschuldige, ich dachte, ich könne das so beschreiben. Ich habe jetzt einen Screenshot von meinem Layout gemacht.

      Screenshot

      Das will ich aus der o.g. HTML-Struktur erzeugen. Nochmal kurz:

      <ul class="menu">
       <li class="has-children">
        <a>Lösungen</a>
        <ul class="sub-menu">
         <li><a>Modulares System</a><li></ul>
       </li><li>
        <a>ZukunftsCheck</a>
       </li>
      </ul>
      

      … ist vielleicht verständlicher

      gruss, heinetz

      1. Hallo

        Zu dem Quelltext

              <ul class="menu">
                 <li class="has-children">
                    <a>Lösungen</a>
                    <ul class="sub-menu">
                       <li><a>Modulares System</a></li>
                       <li><a>Compliance &amp; Risk Management</a></li>
                       <li><a>IT-Solution</a></li>
                       <li><a>Operations</a></li>
                    </ul>
                 </li>
                 <li class="has-children">
                    <a>Kompetenzen</a>
                    <ul class="sub-menu">
                       <li><a>On-Boarding</a></li>
                       <li><a>Bewilligungsbegleitung</a></li>
                       <li><a>Compliance Officer</a></li>
                       <li><a>Backoffice</a></li>
                    </ul>
                 </li>
                 <li class="has-children">
                    <a>Über Uns</a>
                    <ul class="sub-menu">
                       <li><a>Mission</a></li>
                       <li><a>Verwaltungsrat</a></li>
                       <li><a>Geschäftsleitung</a></li>
                       <li><a>Team</a></li>
                       <li><a>Karriere</a></li>
                       <li><a>Partner</a></li>
                    </ul>
                 </li>
                 <li class="has-no-children">
                    <a>Aktuelles</a>
                 </li>
                 <li class="has-no-children">
                    <a>Kontakt</a>
                 </li>
                 <li class="has-no-children">
                    <a>ZukunftsCheck</a>
                 </li>
              </ul>
        

        könntest du das folgende CSS verwenden

              .menu {
                 background-color: hsla(201, 100%, 25%, 1);
                 width: 52rem;
                 padding: 0.5rem;
              }
              .menu>* {
                 float: left;
              }
              .menu>li>:nth-child(1) {
                 font-weight: bold;
              }
              .menu>:nth-child(1) {
                 width: 17rem;
              }
              .menu>:nth-child(2) {
                 width: 13rem;
              }
              .menu>:nth-child(3) {
                 width: 11rem;
              }
              .menu>:nth-child(1n+4) {
                 width: 9rem;
              }
              .menu>:nth-child(1n+5) {
                 margin-top: 1.3rem;
              }
              .menu ul {
                 padding: 0;
              }
              .menu li {
                 font-size: 1rem;
                 color: white;
                 list-style-type: none;
              }
              .menu li a::before {
                 content: "❯";
                 margin-right: 0.5rem;
              }
        

        Zum direkten Ausprobieren noch ein Link zu meiner Testdatei. Das Ergebnis ist unter Lösung 2:

        Testdatei

        Gruss

        MrMurphy

        1. @@MrMurphy1

          könntest du das folgende CSS verwenden

          Selektoren, die einem bei der nächsten Gelegenheit um die Ohren fliegen (:nth-child(3), :nth-child(1n+4)), magic numbers als Werte (17rem, 13rem) …

          Nein, nicht verwenden.

          LLAP 🖖

          --
          “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
          Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
        2. Wow, das ist ja ne Komplettlösung, die ich so per Copy & Paste verwenden könnte!

          Ganz vielen Dank!

          Nun liegst's an mir, ob ich das übernehme. In Anbetracht der Tatsache, dass Du Dir echt Arbeit gemacht hast, wäre es ja fast eine Schande, das nicht auch zu tun.

          herzlichen Dank, heinetz

          1. Selektoren, die einem bei der nächsten Gelegenheit um die Ohren fliegen (:nth-child(3), :nth-child(1n+4)), magic numbers als Werte (17rem, 13rem) …

            Nein, nicht verwenden.

            Der Einwand ist natürlich berechtigt, zumal die Listenpunkte redaktionell gepflegt werden und das ganze responsible sein soll. Allerdings stellt sich diese Frage ja immer. Nun, wie kann man dem Problem begegnen? Die festen Werte (17rem, 13rem) resultieren ja aus Textlängen. Man könnte dem Problem also begegnen, wenn man die also dynamisch errechnen lassen könnte. Das habe ich hier mal ausprobiert und in Lösung 2 implementiert.

            Jetzt habe ich noch eine andere relativ einfache Lösung gefunden und hier umgesetzt. Charmant daran ist, dass relativ wenig fixe Werte verwendet werden. Mir ist, ehrlich gesagt, etwas mulmig damit zumute, weil ich das Verhalten logisch nicht nachvollziehen kann.

            Ist das ein Zufallsprodukt oder entspricht das Verhalten den CSS-Standards?

            beste gruesse, heinetz

      2. @@heinetz

        Screenshot

        Das will ich aus der o.g. HTML-Struktur erzeugen.

        Ich hab da mal mit Floats rumgemacht.

        Problematisch:

        • nicht wirklich responsive, bei schmalem Viewport Kraut und Rüben

        • die Höhe der .has-no-children zusammen darf nicht höher sein als die des letzten .has-children, sonst rutschen die Items darunter, Kraut und Rüben

        • die Trennlinien gehen nicht über die ganze Höhe, sondern sind nur so hoch wie das jeweils höhere Items links und rechts davon

        Auch mit Flexbox hab ich noch nichts zaubern können. Um mit diesem Markup diese Darstellung zu erzeugen, braucht man wohl CSS Grid. Oder Nachhilfe mit JavaScript.

        LLAP 🖖

        --
        “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
        Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
        1. @@heinetz

          Screenshot

          Ich hab da mal mit Floats rumgemacht.

          Das entspricht im Prinzip meinem Versuch hier:

          Jetzt habe ich noch eine andere relativ einfache Lösung gefunden und hier umgesetzt. Charmant daran ist, dass relativ wenig fixe Werte verwendet werden. Mir ist, ehrlich gesagt, etwas mulmig damit zumute, weil ich das Verhalten logisch nicht nachvollziehen kann.

          Ist das ein Zufallsprodukt oder entspricht das Verhalten den CSS-Standards?

          … und damit betrachte ich meine Frage als beantwortet.

          Problematisch:

          Ich denke, all das lässt sich mit relativ überschaubarem Aufwand in den den Griff kriegen.

          • nicht wirklich responsive, bei schmalem Viewport Kraut und Rüben

          Das Menü wird in einem Bootstrap-Grid angezeigt. Ich glaube, damit wird es relativ unproblematisch, das Ganze responsive zu machen.

          • die Höhe der .has-no-children zusammen darf nicht höher sein als die des letzten .has-children, sonst rutschen die Items darunter, Kraut und Rüben

          Das kriegt man in den Griff, wenn man sich um die Trennlinien kümmert.

          • die Trennlinien gehen nicht über die ganze Höhe, sondern sind nur so hoch wie das jeweils höhere Items links und rechts davon

          Dazu habe ich den li.has-children einfach 100% und dem umschliessenden Container ul.menu eine feste Höhe gegeben. Diese Höhe lässt sich relativ einfach mit ein paar Zeilen JS errechnen.

          danke, das wird mein Weg

          gruss, heinetz

  2. Hallo heinetz,

    Alle Listen nebeneinander darzustellen geht einfach mit display:table-cell. Aber wie ich die letzten drei li[class="has-no-children"] untereinander darstelle, weiss ich nicht.

    li[class="has-no-children"] { display: block;}

    Bis demnächst
    Matthias

    --
    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
    1. Hallo Matthias,

      li[class="has-no-children"] { display: block;}

      Korrekt, so werden sie untereinander dargestellt. Allerdings auch unterhalb der li[class="has-children"]

      Bildbeschreibung

      gruss, heinetz

    2. @@Matthias Apsel

      li[class="has-no-children"]

      Üblicherweise schreibt man dafür li.has-no-children.

      Der Selektor wäre aber überspezifiziert; .has-no-children genügt.

      LLAP 🖖

      --
      “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
      Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
      1. Hallo Gunnar Bittersmann,

        Der Selektor wäre aber überspezifiziert; .has-no-children genügt.

        Ja, wie die ganze Regel, denn display:block; sollte der default-Wert sein.

        Bis demnächst
        Matthias

        --
        Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
        1. @@Matthias Apsel

          display:block; sollte der default-Wert sein.

          Nicht für ein list-item.

          LLAP 🖖

          --
          “The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
          Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|