P
Patella
Member
- Beiträge
- 11
- Punkte Reaktionen
- 1
Guten Abend,
ich beschäftige mich seit einiger Zeit mit HTML und CSS und komme derzeit mit einer bestimmten Technik bzw. Aufgabenstellung nicht weiter. Vielleicht kann mir hier jemand den richtigen Tipp geben.
Ziel ist, ein 12-spaltiges CSS-Grid mit über zehn Zeilen zu erstellen, bei dem in einzelnen Zeilen jeweils mehrere Spalten zu einer Zelle zusammen gefasst werden, das ganze auf EINER Webseite (One-Pager). Die so entstandenen größeren Zellen liegen teilweise versetzt übereinander (das tut allerdings nichts zur Sache, denke ich. Die große Zelle in Zeile 1 soll später als Webseitenkopf dienen, die zweite große Zelle in Zeile 2 als Navigationsbereich (später zu füllen mit einem waagerechten Flex-Container, denke ich). Alle anderen Zellen sind verschieden große Boxen für den restlichen Seiteninhalt, im Wesentlichen Texte und Bilder.
Das Grid habe ich fertig gebaut, ebenso in HTML die Inhalte eingefügt. Die Seite steht, sieht richtig aus und ist fehlerfrei validiert.
Ich möchte aber gleichzeitig noch semantische Tags einsetzen, also <header>, <nav>, <main>, etc. Da das 12-er Grid einigermaßen anspruchsvoll ist, dachte ich, ich erstelle erst einmal DAS und füge danach die Tags an den richtigen Stellen ein (generell erstelle ich meist erst die CSS-Klassen und setze erst danach die entsprechenden Tags in HTML ein (wo bis zu diesem Zeitpunkt, abgesehen vom Grundgerüst, nur die fast blanken Inhalte stehen, nur versehen mit <h1>, <p> und ähnlichen rudimentären Tags).
Für die ersten beiden Zellen (Seitenkopf, Navigation) funktionierte das problemlos. Ich habe <header> und <nav> im HTML einfach eng um die Inhalte gelegt, also INNERHALB einer Grid-Zelle. Nun verteilt sich der restliche Inhalt aber über mehrere Zellen des Gitters (neben- und untereinander). Daher habe ich <main> im HTML einfach AUßEN um den betreffenden Bereich gelegt, was im Quelltext selbst ja erst einmal kein Problem ist. Allerdings war damit die Webseite hinüber
Das funktioniert also nicht, die semantischen Tags und das Gitter - oder besser gesagt, dieser TEIL des Gitters - kommen sich hier in die Quere. Was mir auch durchaus logisch erscheint, wenn ich mir das Ganze quasi bildlich vorstelle.
Ich hoffe, meine Darstellung ist soweit verständlich ;-)
Ich möchte jetzt ungern irgendwelche abenteuerlichen Grid- oder Container-Ineinander-Verschachtelungen vornehmen. Oder sollte ich statt einem großen Grid drei kleine entwerfen (jeweils für Seitenkopf, Navigation, Kernseite)? Das wäre allerdings nicht im Sinne der Aufgabenstellung, denke ich.
Das ganze soll W3C-konform, barrierefrei und responsive sein.
Wie kann ich das lösen? Ist das überhaupt möglich?
(Vielleicht gehört das Thema besser in die Rubrik CSS, sorry.)
Vielen Dank.
ich beschäftige mich seit einiger Zeit mit HTML und CSS und komme derzeit mit einer bestimmten Technik bzw. Aufgabenstellung nicht weiter. Vielleicht kann mir hier jemand den richtigen Tipp geben.
Ziel ist, ein 12-spaltiges CSS-Grid mit über zehn Zeilen zu erstellen, bei dem in einzelnen Zeilen jeweils mehrere Spalten zu einer Zelle zusammen gefasst werden, das ganze auf EINER Webseite (One-Pager). Die so entstandenen größeren Zellen liegen teilweise versetzt übereinander (das tut allerdings nichts zur Sache, denke ich. Die große Zelle in Zeile 1 soll später als Webseitenkopf dienen, die zweite große Zelle in Zeile 2 als Navigationsbereich (später zu füllen mit einem waagerechten Flex-Container, denke ich). Alle anderen Zellen sind verschieden große Boxen für den restlichen Seiteninhalt, im Wesentlichen Texte und Bilder.
Das Grid habe ich fertig gebaut, ebenso in HTML die Inhalte eingefügt. Die Seite steht, sieht richtig aus und ist fehlerfrei validiert.
Ich möchte aber gleichzeitig noch semantische Tags einsetzen, also <header>, <nav>, <main>, etc. Da das 12-er Grid einigermaßen anspruchsvoll ist, dachte ich, ich erstelle erst einmal DAS und füge danach die Tags an den richtigen Stellen ein (generell erstelle ich meist erst die CSS-Klassen und setze erst danach die entsprechenden Tags in HTML ein (wo bis zu diesem Zeitpunkt, abgesehen vom Grundgerüst, nur die fast blanken Inhalte stehen, nur versehen mit <h1>, <p> und ähnlichen rudimentären Tags).
Für die ersten beiden Zellen (Seitenkopf, Navigation) funktionierte das problemlos. Ich habe <header> und <nav> im HTML einfach eng um die Inhalte gelegt, also INNERHALB einer Grid-Zelle. Nun verteilt sich der restliche Inhalt aber über mehrere Zellen des Gitters (neben- und untereinander). Daher habe ich <main> im HTML einfach AUßEN um den betreffenden Bereich gelegt, was im Quelltext selbst ja erst einmal kein Problem ist. Allerdings war damit die Webseite hinüber
Das funktioniert also nicht, die semantischen Tags und das Gitter - oder besser gesagt, dieser TEIL des Gitters - kommen sich hier in die Quere. Was mir auch durchaus logisch erscheint, wenn ich mir das Ganze quasi bildlich vorstelle.Ich hoffe, meine Darstellung ist soweit verständlich ;-)
Ich möchte jetzt ungern irgendwelche abenteuerlichen Grid- oder Container-Ineinander-Verschachtelungen vornehmen. Oder sollte ich statt einem großen Grid drei kleine entwerfen (jeweils für Seitenkopf, Navigation, Kernseite)? Das wäre allerdings nicht im Sinne der Aufgabenstellung, denke ich.
Das ganze soll W3C-konform, barrierefrei und responsive sein.
Wie kann ich das lösen? Ist das überhaupt möglich?
(Vielleicht gehört das Thema besser in die Rubrik CSS, sorry.)
Vielen Dank.
Zuletzt bearbeitet:
Anders herum wird ein Schuh daraus: Wenn Du Fragen nicht beantwortest und die Empfehlung, deinen Code hier zu posten, ignorierst, ist es nicht möglich, dein Problem zu lösen und eine weitere Diskussion zwecklos!