Ausrichtung mit flex

[Walter P.]

Hallo,

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

Codepen

habe ich folgende Fragen.

Warum ist der Footer nicht unten im Viewport?

Wie erreiche ich, dass der Text im nav-Bereich oben im Bereich beginnt und dort bleibt, wenn man den aside-Bereich nach unten "scrollt".

[MudGuard]

Hi,

Codepen

Warum ist der Footer nicht unten im Viewport?

weil er in Main steckt.

cu,
Andreas a/k/a MudGuard

[MrMurphy]

Im CSS-Teil scheint die Struktur der schließenden Klammern nicht zu stimmen.

Durch die flex-Anweisung werden die drei Elemente nav, aside und footer im main-Bereich von links nach rechts angeordnet. Das footer-Element "steht" nicht automatisch unten, weil es footer heißt. Die Bezeichnung footer hat in dieser Hinsicht keine Auswirkungen.

Damit der nav-Bereich direkt unterhalb des headers bleibt musst du ihn entsprechend im Quelltext anordnen und dann fixieren. Dafür gibt es unterschiedliche Möglichkeiten. Zum Beispiel mit der position-Anweisung oder indem du dem "nebenstehenden" Container (in deinem Beispiel aside) eine feste Höhe zuweist.

Was am sinnvollsten ist hängt von deinem Quelltext ab.

[Gunnar Bittersmann]

@@MrMurphy

Im CSS-Teil scheint die Struktur der schließenden Klammern nicht zu stimmen.

Entweder Walter hat da schon was korrigiert oder du irrst.

flex-Anweisung

😱

Soetwas gibt es nicht!

Ich weiß nicht, ob das jetzt bedenkenloser Umgang mit Begriffen ist oder grundlegendes Unverständnis, was CSS eigentlich ist. (Zu deinem Gunsten nehme ich mal ersteres an.)

CSS ist eine deklarative Sprache, d.h. eine beschreibende Sprache.

Es wird bspw. beschrieben: Gib der Box 2lh Abstand in Block-Richtung und 3em Abstand in Inline-Richtung. Wie sich aus den Angaben im Stylesheet die Positionen aller Elemente berechnen, ist nicht Teil von CSS, sondern von der rendering engine des jeweiligen Browsers.

Es gibt in CSS keine Anweisungen, keine Befehle.

„CSS kennt im Übrigen keine Befehle, bestenfalls Empfehle, ehm. ;-)“ (Orlando)

🖖 Live long and prosper

[MrMurphy]

Das CSS ist immer noch falsch strukturiert.

Außerhalb deiner Scheuklappen sind meine Ausdrücke korrekt formuliert. Und ich habe die Antwort nicht für dich geschrieben.

[Gunnar Bittersmann]

@@MrMurphy

Das CSS ist immer noch falsch strukturiert.

Nein, das ist es nicht, AFAIS. Wenn du da was anderes siehst, zeig es.

Außerhalb deiner Scheuklappen sind meine Ausdrücke korrekt formuliert.

Nein, das sind sie nicht.

Und ich habe die Antwort nicht für dich geschrieben.

Eben. Ich könnte damit leben. Für andere, insbesondere Anfänger, benutze bitte korrekte Begriffe!

🖖 Live long and prosper

[MrMurphy]

Mit dir zu diskutieren ist sinnfrei, da du mich wie immer krankhaft unsachlich diffamieren willst.

[Gunnar Bittersmann]

@@MrMurphy

Mit dir zu diskutieren ist sinnfrei, da du mich wie immer krankhaft unsachlich diffamieren willst.

Nein, das will ich nicht.

Wenn du mal etwas Richtiges schreibst, dann sage ich das auch.

Unsachlich? Das können wir uns gegenseitig an den Kopf werfen, also lassen wir das. Und holen lieber eine dritte Meinung ein, z.B. die von Tabellenkalk.

🖖 Live long and prosper

[Rolf B]

Hallo MrMurphy,

da du mich wie immer...

Was das Problem ist. Ihr beiden habt euch schon so oft aneinander gerieben, dass ihr extrem empfindlich geworden seid. Und leider rutschen Dir auch schonmal, naja, Legacy-Aussagen heraus. Was dann Gunnar zu einem Update triggert.

Ich habe den Thread nicht intensiv lesen können und auch nicht ständig kontrollieren können, wer von euch beiden sich irrt, aber als ich in den Codepen geschaut habe, über den Du "CSS hat falsche Struktur" geschrieben hast und zu dem Gunnar meinte, dass ein möglicher Fehler seitdem korrigiert worden sei, hast Du "LÜGE" geschrieen und auf Nachfragen auch nicht konkretisiert, was Du meinst. Was soll das?

Die Menge der Lügen ist eine Teilmenge der Menge der falschen Aussagen. Im Rest finden sich Irrtümer und ggf. auch abweichende Meinungen. Und warum sollte Gunnar das Trumpeltier machen und Lügen in die Welt setzen, die sich schon durch kurzes Nachdenken entlarven lassen.

Und im Fall der "falschen Struktur" weiß auch ich nicht, was Du meinst. Hältst Du das CSS-Nesting für falsch?! In dem Fall wären wieder beim Legacy-Wissen...

---

Die Sache mit den CSS-Anweisungen ist etwas, wo man überlegen muss, wer im deutschsprachigen Raum die Sprachhoheit für Webentwickler hat. Man könnte sagen: Wenn sie einer hat, dann traditionell Selfhtml, aber zum einen hat Stefan die Kathedra damals mitgenommen und zum anderen weiß ich nicht, ob das ebenfalls eine Legacy-Aussage wäre. Wenn die Wikipedia widerspruchslos meint, CSS-Regeln "Anweisungen" nennen zu müssen, hat das schon Gewicht. Und das editiere ich dort auch nicht einfach um, das ist etwas, was diskutiert werden muss.

Es gibt aber durchaus eine Tendenz. Schnelle Recherche bei den zwei Enten:

Suchbegriff	Ergebnis
"CSS Regel"	0 Treffer
"CSS-Regel"	38 Seiten (findet auch CSS-Regeln)
"CSS Anweisung"	0 Treffer
"CSS-Anweisung"	8 Seiten + 1 Treffer (findet auch CSS-Anweisungen)

Die Mehrheit ist also für Regeln. Und alle sind für den Bindestrich 😉

Den Vogel schießt IONOS mit der Überschrift ab: "CSS-Befehle: häufig verwendete Anweisungen" - brrr.

Rolf

[Tabellenkalk]

Hallo,

Das CSS ist immer noch falsch strukturiert.

Wenn dir gesagt wurde, dass es korrekt ist, solltest du bei Wiederholung deiner Behauptung auch Belege dafür mitbringen.

Außerhalb deiner Scheuklappen sind meine Ausdrücke korrekt formuliert. Und ich habe die Antwort nicht für dich geschrieben.

Warum verlässt du stattdessen die sachliche Ebene und wirst persönlich?

Gruß
Kalk

[MrMurphy]

Wenn dir gesagt wurde, dass es korrekt ist, solltest du bei Wiederholung deiner Behauptung auch Belege dafür mitbringen.

Einfach mal den Quelltext durchlesen, so wie ich es getan habe.

Warum verlässt du stattdessen die sachliche Ebene und wirst persönlich?

Weil gegen Lügen keine Sachlichkeit ankommt.

[Gunnar Bittersmann]

@@MrMurphy

Weil gegen Lügen keine Sachlichkeit ankommt.

Da du hier mich meinst, verlange ich von dir eine Antwort: An welcher Stelle habe ich hier deiner Meinung nach gelogen?

🖖 Live long and prosper

[MrMurphy]

Entweder Walter hat da schon was korrigiert oder du irrst.

Lüge.

Soetwas gibt es nicht!

Lüge.

Es gibt in CSS keine Anweisungen

Das ist übliche Umgangssprache, die sachlich nicht falsch ist. CSS gibt Anweisungen wie HTML-Quelltext sich verhalten soll. Außer dir versteht das auch Jeder, der sich mit CSS beschäftigt. Also Lüge.

[Der Martin]

Hallo,

jetzt halt mal bitte den Ball flach!

Entweder Walter hat da schon was korrigiert oder du irrst.

Lüge.

Hab ich nicht nachgeprüft, lass ich mal so stehen.

Soetwas gibt es nicht!

Lüge.

Nein. Vielleicht Paragraphenreiterei, vielleicht Konrinthenkackerei. Aber es gibt in CSS keine Befehle oder Anweisungen, nur Deklarationen.

Es gibt in CSS keine Anweisungen

Das ist übliche Umgangssprache

Ebenso wie jemand erzählt, er hätte im abgelaufenen Jahr weniger als 1300 Kilowatt verbraucht. Das versteht auch jeder, trotzdem ist es falsch. Gemeint sind Kilowattstunden.

Und gerade im technischen Kontext sollten wir schon bei den korrekten Bezeichnungen bleiben.

Also Lüge.

Nein. Korrektur einer falschen Verwendung von Fachbegriffen.

Einen schönen Tag noch
 Martin

[Ryuno-Ki]

Moin Der,

Danke.

[Gunnar Bittersmann]

@@MrMurphy

Entweder Walter hat da schon was korrigiert oder du irrst.

Lüge.

Dir wurde auch schon von anderer Seite zu verstehen gegeben, dass du es bist, der da falsch liegt. Du hast den Wink mit dem Zaunpfahl nicht verstanden‽

Soetwas gibt es nicht!

Lüge.

Zeig mir die Stelle in der CSS-Spezifikation, wo was von „Anweisungen“ steht!

Es gibt in CSS keine Anweisungen

Das ist übliche Umgangssprache,

In deiner Filterblase mag das vielleicht üblich sein. Allgemein üblich würde ich anzweifeln.

die sachlich nicht falsch ist.

In deiner Filterblase vielleicht. Für mich ist die falsche Verwendung von Begriffen sachlich falsch.

Außer dir versteht das auch Jeder, der sich mit CSS beschäftigt.

Jeder, der sich mit CSS beschäftigt, sollte verstehen, dass CSS eben keine imperative Sprache ist.

🖖 Live long and prosper

[MrMurphy]

Du hast schon gelesen was ich geschrieben habe?

Außerhalb deiner Scheuklappen

Beispiele von Idioten, die deiner Meinung nach Schrott schreiben, indem sie den Begriff CSS-Anweisung(en) verwenden:

https://de.wikipedia.org/wiki/Cascading_Style_Sheets

https://www.html-seminar.de/cascading_style_sheets_aufbau.htm

https://developer.mozilla.org/de/docs/Web/CSS/CSS_nesting/Nesting_at-rules

https://userpage.fu-berlin.de/mirjamk/htmlkurs/css.html

[Gunnar Bittersmann]

@@MrMurphy

Beispiele von Idioten, die deiner Meinung nach Schrott schreiben,

Nur um’s klarzustellen: die Betitelung als „Idioten“ stammt nicht von mir.

indem sie den Begriff CSS-Anweisung(en) verwenden:

OK, du hast Stellen gefunden, denen man nicht nachsagen kann, in deiner Filterblase zu sein.

Dass statement und ruleset aus der englischen Originalversion im MDN mit Anweisung übersetzt wird, halte ich für bedenklich. Und dass der Begriff so in der deutschen Wikipedia steht, auch.

Wenn Leute auf ihren privaten Webseiten Begriffe falsch verwenden, was willste machen? Wenn sie das allerdings hier im Forum tun, dann sag ich was dagegen.

🖖 Live long and prosper

[Tabellenkalk]

Hallo,

Warum verlässt du stattdessen die sachliche Ebene und wirst persönlich?

Weil gegen Lügen keine Sachlichkeit ankommt.

Ich hätte dazuschreiben sollen, dass das eine rhetorische Frage ist, die keiner Antwort bedarf. Erst recht nicht so eine absurde Antwort.

Gruß
Kalk

[MudGuard]

Hi,

Im CSS-Teil scheint die Struktur der schließenden Klammern nicht zu stimmen.

CSS-Schachtelung

Für mich sieht das korrekt aus im Codepen.

cu,
Andreas a/k/a MudGuard

[MrMurphy]

Bin ich der einzige, der den CSS-Quelltext lesen kann? Aktuell kopiert und nur strukturiert, aber sachlich nichts geändert:

   header,
   main,
   aside,
   footer {
      padding: 0.5em;
   }
   header {
      border: 1px red solid;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      a {
         display: flex;
         align-items: center;
         gap: 0.5em;
      }
      img {
         /*   max-width: 100%;  */
         width: 60px: height: auto;
      }

      h1 {
         justify-content: center;
         margin: 0 auto 0 auto;
      }
   }
   main {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      nav {
         border: 2px green dotted;
         font-size: 0.8em;
         flex-grow: 0;
      }
      aside {
         border: 2px yellow solid;
         flex-grow: 2;

      }
   }
   footer {
      border: 1px black solid;
   }

Die schließenden Klammern vom header und vom main fehlen nicht, sondern stehen an falscher Stelle. Also falsch strukturiert.

[Der Martin]

Hallo,

Die schließenden Klammern vom header und vom main fehlen nicht, sondern stehen an falscher Stelle. Also falsch strukturiert.

nein - du kennst CSS Nesting noch nicht.

Einen schönen Tag noch
 Martin

[Gunnar Bittersmann]

@@Der Martin

nein - du kennst CSS Nesting noch nicht.

Doch, kennt er schon. Sollte er zumindest schon gekannt haben.

Oh!

🖖 Live long and prosper

PS: Ich hab Nesting mal wörtlich genommen. 😏

[Gunnar Bittersmann]

@@MrMurphy

Bin ich der einzige, der den CSS-Quelltext lesen kann?

Eher der einzige, der das nicht kann.

Nesting sollte dir bekannt sein – spätestens seit ein paar Tagen.

Wenn du da was nicht nicht verstanden hast, hättest du nachfragen können. Aber nein, du ziehst es vor, anderen dummzukommen.

Die schließenden Klammern vom header und vom main fehlen nicht, sondern stehen an falscher Stelle. Also falsch strukturiert.

Um’s mit deinen Worten zu sagen: Lüge.

🖖 Live long and prosper

[MudGuard]

Hi,

ich hab's Dir doch extra noch verlinkt, wo man das mit der Schachtelung (a/k/a Nesting) nachlesen kann.

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

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

[Walter Pe.]

Hi @all, mit Walter P. hat er mich abgelehnt, daher Pe!

Besonderen Dank an Gunnar für die ausführlichen Tipps und Korrekturen

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

English wird im Englischen immer großgeschrieben.

OK, da es "english speaking people" anspricht, hat Du Recht. Ist aber lang='en' korrekt, ich habe nämlich gerade gefunden 'hreflang'.

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

OK

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?

Meinen Chefs möchte ich ungern widersprechen, zumal neben dem Bild ja der Text steht.

---

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.

Verstanden

Und ein Menü ist eine Liste ist eine Liste:

OK

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.

Richtig!

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.

Habe ich gemacht, sieht gut aus!

Danke, thank you, merci, ...

[Walter P.]

Hallo Andreas,

Warum ist der Footer nicht unten im Viewport?

Danke für den Lösungstipp.

Kann mir jemand noch bei der folgenden Frage helfen.

Wie erreiche ich, dass der Text im nav-Bereich oben im Bereich beginnt und dort bleibt, wenn man den aside-Bereich nach unten "scrollt".

codepen

[Rolf B]

Hallo Walter P.,

Wie erreiche ich, dass der Text im nav-Bereich oben im Bereich beginnt...

main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

Woher kommt das align-items:center? Irgendwo abgeschrieben? Empfehlung: mach dich schlau, was die CSS-Eigenschaften bedeuten, die Du zusammenkopierst. Dann weißt Du auch, was Du mit dieser Eigenschaft machen musst.

Aber warum verwendest Du für dein Seitenlayout eine Flexbox? Empfehlung: mach den ganzen Body zu einem Grid

body {
   margin: 0;
   height: 100vh;
   max-width: 60em;
   display: grid;
   grid: "hugo hugo" auto
         "niko maja" 1fr
         "finn finn" auto / auto 1fr;
}
header { grid-area: hugo; }
nav { grid-area: niko; }
main {
   grid-area: maja;
   overflow-y: auto;
}
footer { grid-area: finn; }

Die Namen für die Grid-Bereiche sind Schall und Rauch, ich habe sie bewusst albern gewählt. Man KÖNNTE den Bereich für den Header auch header nennen (aber dann denkt nachher jemand, das müsste so sein)

Das HTML ist dann ganz flach:

<header>
...
</header>
<nav>
...
</nav>
<main>
...
</main>
<footer>
...
</footer>

...und dort bleibt, wenn man den aside-Bereich nach unten "scrollt".

Mit dem Grid kannst Du, wie gezeigt:

• die Navigation aus dem main herausziehen und damit den semantisch unsinnigen aside loswerden. Dein Hauptinhalt ist keine Randnotiz
• die Höhe auf 100vh festnageln. Mit einem overflow-y für main erreichst Du dann, dass nur der main-Bereich scrollt. Das Problem bei 100vh ist, dass der vom Browser festgelegte Margin dafür sorgt, dass 100vh eigentlich zu hoch ist. Deswegen habe ich margin:0 gesetzt. Wenn Du einen Margin haben willst, dann setze ihn bitte explizit und ziehe ihn von der Höhe wieder ab. Beispielsweise:

body {
   margin: 5px auto;
   height: calc(100vh - 10px);
}

Wenn Du die Höhe NICHT festnageln willst, dann kansnt Du auch mit position:sticky auf dem nav dafür sorgen, dass die Navigation im sichtbaren Bereich bleibt.

Ist unter den entsprechenden Stichworten im Selfwiki zu finden.

Rolf

[Gunnar Bittersmann]

@@Rolf B

body {
   margin: 5px auto;
   height: calc(100vh - 10px);
}

Ugh, kein single point of truth.

Das sollte eher so gemacht werden:

body {
  --body-margin-block: 5px;
  margin: var(--body-margin-block) auto;
  height: calc(100vh - 2 * var(--body-margin-block));
}

Noch eher in em o.ä. statt px.

Und noch eher dvh statt vh.

Aber noch eher würde ich den Abstand nullen und den Gridzellen padding verpassen.

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar Bittersmann,

naja, den Rand des Body mach ich schon gern in px, das soll ja nur "ein Hauch" sein, nicht mitskalieren und kein Rundungsdurcheinander geben.

Custom Properties und calc() wollte ich heraushalten, um das Thema nicht zu kompliziert zu machen. Also ja, margin:0, box-sizing:border-box und padding. Dann braucht man kein calc. border-box mit der Gießkanne verteilt ist eh besser.

dvh ist auch so eine Sache, damit habe ich Layout schon ganz schön zum Flattern gebracht. Sobald die Menüleiste rausfährt, verschiebt sich das Layout.

Rolf

[Gunnar Bittersmann]

@@Walter P.

Wie erreiche ich, dass der Text im nav-Bereich oben im Bereich beginnt

align-items: start für die Flexbox.

Aber wie gesagt, Grid ist das bessere und einfachere Tool für dein Seitenlayout.

und dort bleibt, wenn man den aside-Bereich nach unten "scrollt".

position: sticky ☞ Beispiel

codepen

Von den notwendigen HTML-Änderungen hast du noch nichts umgesetzt‽

🖖 Live long and prosper

[Walter Pe.]

@@Rolf und Gunnar:

Jetzt kämpfe ich gerade mit flex, weil dies laut einer Empfehlung leichter ist als grid. Jetzt ist es demnach umgekehrt. Also alles zurück auf Null.

Ich fürchte, dass Ihr mich nicht so schnell los werdet. Ich hoffe, dass ich dann nicht wieder einen solchen bösen Streit auslöse. Bis dann Walter

[Gunnar Bittersmann]

@@Walter Pe.

Jetzt kämpfe ich gerade mit flex, weil dies laut einer Empfehlung leichter ist als grid.

Sagt wer? Vermutlich jemand, der schon einige Zeit mit Floats und Flexboxen rumhantiert hat und in der Von-innen-nach-außen-Denke verhaftet ist und sich schwertut, andersrum zu denken. Nur ist das keine gute Empfehlung für andere. Grid ist einfach.

“Those who never learned to float or flexbox love [Grid] most. The others have quite a lot to unlearn, but after a while they love it too.” —Vasilis van Gemert

Ich fürchte, dass Ihr mich nicht so schnell los werdet.

You’re welcome.

Ich hoffe, dass ich dann nicht wieder einen solchen bösen Streit auslöse.

Hast du nicht. Nicht du.

🖖 Live long and prosper