Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- gf_informatik:web:gridlayout [2022-11-01 21:07] – hof
+++ gf_informatik:web:gridlayout [2023-11-07 10:22] (aktuell) – [Auftrag III (Kombination der beiden Websiten)] gra
@@ Zeile 15: / Zeile 15: @@
      * Dazwischen links: Platz für eine Sidebar
      * Platz rechts davon, zwischen Header und Footer: Mehrere Rasterbereiche mit unterschiedlicher Grösse für Hauptinhalt.
-   * Arbeite in Chrome im [[gf_informatik:web:css#entwicklungsmodus|Entwicklungsmodus]].
+   * Arbeite in Chrome im [[gf_informatik:web:css_2022#entwicklungsmodus|Entwicklungsmodus]].
    * Die Website könnte etwa so aussehen:{{ :gf_informatik:web_sca:grid_layout_example_01.png?400 |}}
@@ Zeile 30: / Zeile 30: @@
    * Erstelle dazu eine neue Website mit einem Grid-Layout, welches zu deiner ersten Website passt.
    * Kopiere dann die Inhalte von dieser hinein.
-   * **Schicke** der Lehrperson per Teams Screenshots von Website im Browser, HTML- und CSS-Code bis am **kommenden Samstag 23.59**
 ==== Grid Einrichten ====
@@ Zeile 98: / Zeile 98: @@
    * https://www.w3schools.com/cssref/css3_pr_mediaquery.php
-Die Website responsive zu machen ist ein wenig mühsam, wenn man die Ranges der einzelnen Grid Elemente wie oben beschrieben mit `grid-column` und `grid-row` festlegt, da man dann die CSS-Einträge sämtlicher Grid Elemente anpassen muss. Alternativ kann man mit `grid-template-areas` arbeiten, dann muss man nur Veränderungen im Eintrag für `.container{...}` vornehmen. Dazu muss man den Elementen einen Namen zuweisen und kann dann über die Namen die Zuteilung der Zellen vornehmen:
+Die Website responsive zu machen ist ein wenig mühsam, wenn man die Ranges der einzelnen Grid Elemente wie oben beschrieben mit `grid-column` und `grid-row` festlegt, da man dann die CSS-Einträge sämtlicher Grid Elemente anpassen muss. Alternativ kann man mit `grid-template-areas` arbeiten, dann muss man nur Veränderungen im Eintrag für `my-container {...}` vornehmen. Dazu muss man den Elementen einen Namen zuweisen und kann dann über die Namen die Zuteilung der Zellen vornehmen:
 <code css>
 my-container {
@@ Zeile 118: / Zeile 118: @@
    * https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid
    * https://css-tricks.com/snippets/css/complete-guide-grid/