Verschachtelte Tabelle mit Tabellenlayout

[heinetz]

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

[MrMurphy1]

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

[heinetz]

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.

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

[MrMurphy1]

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

[Gunnar Bittersmann]

@@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 🖖

[heinetz]

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

[heinetz]

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

[Gunnar Bittersmann]

@@heinetz

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 🖖

[heinetz]

@@heinetz

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

[Matthias Apsel]

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

[heinetz]

Hallo Matthias,

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

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

gruss, heinetz

[Gunnar Bittersmann]

@@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 🖖

[Matthias Apsel]

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

[Gunnar Bittersmann]

@@Matthias Apsel

display:block; sollte der default-Wert sein.

Nicht für ein list-item.

LLAP 🖖