Antwort an „Gunnar Bittersmann“ verfassen

Ausrichtung mit flex

Gunnar Bittersmann E-Mail-Adresse des Autors Homepage des Autors 05.08.2025 23:26

css
html

@@Walter P.

ich habe nach wie vor Probleme mit flex. Zu dem folgenden Beispiel

Codepen

habe ich folgende Fragen.

Ich ganz andere. Bevor wir zu deinem Layout-Problem kommen, müsste erst was am Markup getan werden.

<a href='/en/' lang='en'><img src='/bilder/d-e.GIF' alt='Flagge'/>english version</a>

English wird im Englischen immer großgeschrieben.

Das Bild ist rein dekorativ, da muss alt='' gesetzt werden.

(Andernfalls, wenn da wirklich Text auf deutsch drinstehen soll, müsste dessen Sprache mit lang='de' am img-Element angegeben werden, sonst gilt noch das lang='en' vom a-Element außenrum.)

Aber „Flagge“ ist ein deutliches Indiz dafür, dass das Bild gar nicht da sein sollte. Welche Flagge sollte denn für die englische Sprachversion stehen? Die englische (Georgskreuz)? Die (er)kennt außer Fußballfans oder Dart-Fans vermutlich kaum jemand. Und Englisch wird ja nicht nur in England gesprochen.

Flaggen stehen nicht für Sprachen.

<nav>
 <h4>Auswahl</h4>
  <div><a href="....">item1</a></div>
  <div><a href="....">item2</a></div>
</nav>

Die Überschriften-Ebenen dürfen nicht beliebig verwendet werden; auch nicht nach der gewünschten Darstellung. Schriftgröße ist Sache von CSS. Nach h1 muss als nächstes h2 kommen, nicht h4.

Und ein Menü ist eine Liste ist eine Liste:

<nav>
  <h2>Auswahl</h2>
  <ul>
    <li><a href="....">item1</a></li>
    <li><a href="....">item2</a></li>
  </ul>
</nav>

Entfernung der Bullets ist wieder Sache von CSS: list-style-type: none.

<main>
  <nav>…</nav>
  <aside>…</aside>
  <footer>…</footer>
</main>

Die Navigation gehört nicht ins main-Element; der Footer auch nicht.

Was du im aside-Element hast, ist wohl kein So-nebenbei-Inhalt, sondern der Hauptinhalt, d.h. aside ist falsch.

Deine Markup-Struktur sollte eher so aussehen:

<body>
  <header>…</header>
  <nav>…</nav>
  <main>…</main>
  <footer>…</footer>
</body>

Und dafür haben wir auch schon die Lösung – den heiligen Gral. Und das auch gleich responsiv. Du musst dir nur das aside-Element und die zugehörige Spalte im Grid wegdenken.

Im dort verlinkten Forums-Thread hatte @Rolf B auch was mit Flexbox gebastelt. Ich hätte keine Lust, mir das anzutun.

🖖 Live long and prosper

--
“In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”
— Bruce Springsteen, Manchester 2025-05-14