Ausrichten von containern und boxen in einer section

Ein main-Element ist für eine korrekte HTML-Seite nicht erforderlich. Das kannst du also auch weglassen.

Eine id ändert an einem HTML-Element überhaupt nichts. Damit kannst du einem header-Element also auch keine bestimmte Bedeutung geben. Was für eine Bedeutung das header-Element hat hängt allein von seiner Stellung im HTML-Quelltext ab.

Innerhalb des main-Elements bezieht es sich auf das main-Element. Wenn du in deinem Beispiel das main-Element weglässt bezieht es sich auf die gesamte Webseite. Entsprechend sollte auch jeweils der Inhalt sein.

Wenn das header-Element bislang für die gesamte Webseite gedacht war hättest du es als direktes Kind vom body-Element in den Quelltext einfügen müssen. Wo es als direktes Kind vom body-Element steht spielt wiederum keine Rolle. Die Bezeichnung "header" sagt nicht aus, dass es sich oben im Quelltext befinden muss, sondern welche Informationen es enthält.

Zitat

Was für eine Bedeutung das header-Element hat hängt allein von seiner Stellung im HTML-Quelltext ab.

Da habe ich mich ungeschickt ausgedrückt. Besser ist wohl: Auf welches Element sich das header-Element bezieht hängt von seiner Stellung im HTML-Quelltext ab.

Guten Morgen Emess ,

dein letztes Posting #20 verstehe ich so, dass Du Probleme siehst, bestimmte Elemente anzusprechen bei der momentanen Struktur deiner Seite. Diese Probleme sehe ich nicht. Gib doch mal ein oder zwei Beispiele wo Du meinst, dass es nicht geht.

I. allg. sollten die Elemente so angeordnet werden wie es von der Semantik her geboten ist. Es gibt einige Ausnahmen durch die Beschränkungen von CSS aber die sehe ich bei deinem Layout ebenfalls nicht.

Zitat

Mein Idee wäre die  main komplett zu entfernen und dem Header eine id zb. #kopf. Also <header id="kopf">

Die Notwendigkeit sehe ich nicht. Das ist ja ein Vorteil, dass man bei semantischen Tag in gewissem Umfang auf Klassen und IDs verzichten kann. So weit ich das überblicke, hast Du im Moment nur einen Header und dann ist ein Selektor nur mit dem Tagnamen ausreichend:

header {
    /* Mach was mit dem Header */
}

Anders kann es aussehen, wenn Du auch in deinem Modal header und footer verwenden möchtest. Auch dann kann man es wahrscheinlich über Kind- oder Nachfahrenselektoren regeln aber zur Klarheit kann eine Klasse oder ID angebracht sein.

Natürlich funktioniert das. Du benutzt das CSS falsch. Außerdem solltest du mehr auf Tipfehler / Rechtschreibfehler achten.

Auf deiner Beispielseite schreibst du

justify-content: left;

Das funktioniert aber bei bei Flex- oder Grid-Containern. Zumindest beim Firefox geben das auch die Entwicklerwerkzeuge aus.

Ich weiß auch nicht was ich von

#my-new.section

halten soll.

Zitat

Was ist an "justify-content: left;" falsch?

Das habe ich geschrieben:

Zitat

Das funktioniert aber bei bei Flex- oder Grid-Containern.

Das h1-Element ist weder ein Flex- noch ein Grid-Container. Deshalb hat die CSS-Anweisung keine Auswirkung.

Du willst diese Überschrift im neuen Container links ausrichten, nicht wahr? Dazu brauchst Du align-items: flex-start; beim Flex-Container #my-new-section weil Du die Flex-Items durch flex-direction: row; untereinander anordnest. Da wird auch sofort offensichtlich, warum es flex-start heißt statt left: Je nach Anordnung bewirkt das mal Ausrichtung left oder top, start ist dagegen ein Begriff, der allgemein passt. Alternativ kannst Du auch align-self bei der Überschrift bzw. dem Flex-Item verwenden, das wirkt dann, wie der Name sagt, nur auf diese Überschrift:

#my-new-section>h1 {
    color: red;
    align-self: start;
}

Eine schöne Seite, auf der man mit Flex testen und sofort sieht, welche Auswirkungen Änderungen haben: https://the-echoplex.net/flexyboxes/

Klar, durch Post #19 ist ja die ganze Verwirrung entstanden, dass Du glaubtest, es geht nur, indem Du das HTML umorganisierst. Spricht nichts dagegen, damit weiter zu machen.

Zitat

Ob das richtig war ist fraglich.

Das ist falsch. Mit der Anweisung machst du die h1-Überschrift zu einem Flex-Container und kannst deren Inhalt mit Flex-Anweisungen ausrichten, nicht aber die Überschrift selbst.

Wie willst du die Überschrift ausrichten?

Zitat

Plan wäre die h1 in der section auszurichten oben, rechts oder links egal. Deshalb habe ich ihr display-flex mitgegeben. Ob das richtig war ist fraglich.

Dass sie nicht oben ist, liegt daran, dass der Container #my-new-section von main>section justify-content: center; erbt. Ändere ich es auf start rutscht die Überschrift sofort nach oben.

Zitat

Wie bekomme ich horizontal Abstand zwischen die boxen? mit row-gab hatte ich kein erfolg.

row-gap musst Du beim Container notieren, tue ich das, funktioniert es.

#my-new-section {
    /* flex: 1; */
    flex-direction: column;
    background-color: lightsalmon;
    border: 20px solid blue;
    row-gap: 5px;
    justify-content: start;
}

flex: 1; macht hier keinen Sinn, da wir den Container ja nicht flexibel wollen sondern er soll eine feste Höhe haben entspr. der des Browserfensters.

Außerdem beobachte ich jetzt, wenn ich rechts die Entwicklerwerkzeuge offen habe, dass einige der Boxen horizontal über den Container hinaus ragen. Das liegt daran, das Du ihnen eine feste Breite gegeben hast. Damit verschenkst Du den eigentlichen Vorteil von Flexlayout, dass sich die Elemente an das Browserfenster anpassen. Deaktiviere ich die Breitenangabe schrumpfen die Boxen in der Breite und orientieren sich am Inhalt.

#my-new-section .box1 {
    display: flex;
    /* width: 250px; */
    height: 80px;
    background-color: pink;
}

Dadurch werden sie dann sehr schmal, weil nichts drin steht als box1, box2, ... aber das liegt daran, dass das eine Testversion ist ohne ausgefüllte Inhalte.

Versuch es mal mit

align-self: start;

in dem CSS für die h1-Überschrift.

Meine Rede, siehe #28

Emess

Gibt es noch Fragen?

Das "display:flex" in <h1> ist immer noch drinne .