Webseite mit HTML und CSS umsetzten

[MrMurphy1]

Hallo,

aus deiner Beschreibung und dem Bild gehen leider nicht alle notwendigen Informationen hervor.

1. Wozu ist der blaue Bereich unter der Navigation gedacht? Soll der noch Inhalt bekommen? Falls ja: welchen?

2. Soll das graue Feld "Ihr Warenkorb ist leer." genau so hoch sein wie der Balken? Falls im Warenkorb Einträge enthalten sind wird das nicht mehr funktionieren.

3. Du bezeichnest das breite graue Feld mit Content. Später schreibst du "Der Content soll immer in drei Teile aufgebaut sein." Sollen sich innerhalb des Contents also noch mal 3 Spalten befinden?

4. Sollen Nav 1, Nav 2 u.s.w. andere Seiten aufrufen oder nur den Content (Inhalt des großen grauen Kastens in der Mitte) austauschen?

Zu deinem Entwurf von 19:51 Uhr:

Die Liste im header ist unnötig und sollte weggelassen werden. Listen für Navigationen waren mal ein inoffizielles Hilfskonstrukt, die fälschlicherweise zur Pflicht erhoben wurden. Die Listen solltest du nur verwenden wenn auch dein Lehrer diesem Irrtum unterliegt.

Hingegen darf sich das nav-Element nicht im main-Element befinden. Deshalb musst du zur Erstellung des Layouts ein div-Element statt des main-Elements verwenden. Das main-Element kann sinnvollerweise für den Content verwendet werden.

Das nav-Element im aside-Element (also die ganz rechte Spalte) ist nicht sinnvoll. Der Grund in diesem Fall ist, dass das nav-Element nur für die Hauptnavigation verwendet werden soll. Die Hauptnavigation sehe ich in diesem Fall nur in "Home Nav 1 ...". Im linken grauen Kasten könnte das nav-Element auch passen.

Um das nav-Element (und auch andere) richtig verwenden zu können muss der Inhalt der gesamten Seite bekannt sein. Der fehlt aber.

eine <section></section> ist hier nicht richtig, oder?

Das sehe ich auch so. Mit dem section-Element könnten die Inhalte der ganz rechten Spalte (Markzettel + Warenkorb, Angebote, Social Media) unterteilt werden.

Zum Schluss habe ich unterhalb von der Navigation noch den großen blauen Bereich, wie würdest du diesen anordnen bzw. in welchen Bereich sollte dieser gepackt werden? Das gleiche habe ich auf der rechten Seite im aside - Bereich nochmals.

Das verstehe ich nicht, wie oben bereits in meiner Nachfrage deutlich geworden ist.

Zu deinem Beitrag von 20:25 Uhr:

wenn ich auf die zwei umschließenden div-Elemente verzichten kann / soll,

Für die Anordnung mit Flexbox benötigst du die beiden Container. Wie bereits beschrieben würde ich für den linken auch ein div-Element wählen. Für den rechten eher ein aside, ein div passt aber auch.

Und dann bleibt noch die Frage, wie kann ich das Problem? mit der großen Kasten unterhalb der Navigation lösen, der sollte ich ja mit der Navigation ändern?

Welcher große Kasten? Der blaue Bereich (dessen Sinn sich mir noch nicht erschließt) oder der mittlere große graue Kasten, dein Content?

Ich sehe die HTML-Grundstruktur zur Zeit folgendermaßen:

• header
• div
• aside

Im div dann:

• nav
• aside (oder div)
• main

im ersten aside (der ganz rechten Spalte):

• mehrere section (oder div), je nach Bedarf

Gruss

MrMurphy