Zweierlei Probleme mit meiner Website

[Rolf B]

Hallo einsiedler,

ooookay. Wir redeten aneinander vorbei. Ich sprach vom flex-basis Attribut für #main-nav, vermutlich in Zeile 403. Da wollte ich eine flex-basis von 23em empfehlen - aber Du hast recht, das taugt nicht, dann ist das Menü auch zugeklappt 23em breit. Dein min-width 22.3em am li löst das. Das ist im Prinzip die Breite 23em, die Du im Breitbildmodus setzt, minus des Paddings von 0.35rem am #main-nav (es wird zweimal abgezogen weil das Padding links und rechts ist). Hier lauert aber noch ein Fallstrick, weil es bei einer Schriftgrößenänderung zu Diskrepanzen kommen kann. Derzeit scheint bei Dir em=rem zu sein (rem ist die Standardschriftgröße des Browsers, rem wie "Root EM"), deswegen solltest Du bei dem li nicht min-width:22.3em setzen, sonder die Browser-Rechnung nachvollziehen: calc(23em - 0.7rem).

Merkwürdig finde ich die flex-grow/shrink/basis Eigenschaften für ul.group>li, also Zeile 172. Die sind nämlich ohne Wirkung, weil ul.group kein display:flex hat, und können weg.

Die "850px und schmaler" Darstellung funkt bei mir jetzt auch nicht mehr, hm. Problem ist letztlich, dass das .contentspan Element sein flex-direction:row beibehält. Das muss zu column werden, wenn es übereinander stehen soll.

Was ich übrigens auch nicht verstehe, ist deine HTML Struktur - hat Dir das einer empfohlen? Aus meiner Sicht ist die äußere Liste keine Kunst, sondern kann weg. Sie besteht nur aus einem Listenpunkt. Ich will Dir jetzt nicht alles, was schon funktioniert, auf den Kopf stellen - mir scheint nur, dass diese äußere Einpunktliste es unnötig komplex macht. Oder planst Du noch eine weitere Menüebene, d.h. hier weitere main-treeitem Einträge zu erstellen?

<nav id="main-nav">
  <ul class="tree">
    <li class="main-treeitem">
      <button>...</button>
      <ul class="group">
        <li class="treeitem">
          <a>...</a>
          <button>...</button>
          <div class="nav-group">...</div>          
        </li>
      </ul>
    </li>
  </ul>
</nav>

Rolf