Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- gf_informatik:web:gridlayout [2022-11-01 21:03] – 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 ====
-Erzeuge im Body des HTML-Seite ein div-Element und weise diesem die Klasse 'Container' zu:
+Erzeuge im Body des HTML-Seite ein neues Element und nennen es `my-container`. Dieses Element ist nicht Teil des HTML-Standards, aber wir dürfen beliebige Elemente erfinden, solange wir in deren Namen einen Bindestrich verwenden:
 <code html>
 <body>
-    <grid-container>
+    <my-container>
         <!-- Füge hier alle Elemente hinzu, die im Grid angezeigt werden sollen -->
-    </grid-container>
+    </my-container>
 </body>
 </code>
@@ Zeile 49: / Zeile 49: @@
 }
-grid-container {
+my-container {
     display: grid;
     width: 100vw; /* 100% der verfügbaren Breite */
@@ Zeile 63: / Zeile 63: @@
 Machen wir ein Beispiel:
 <code html>
-<grid-container>
+<my-container>
-    <grid-content>Content</grid-content>
+    <my-header>Header</my-header>
-</grid-container>
+    <my-content>Content</my-content>
+</my-container>
 </code>
 <code css>
-grid-content {
+my-content {
     grid-column: 2 / 3; /* erste Zahl: in welcher Zeile beginnt, zweite Zahl: in welcher aufhört */
     grid-row: 2;
@@ Zeile 82: / Zeile 83: @@
 @media only screen and (max-width: 500px) {
     /* überschreibe hier für alle Selektoren, für die sich etwas ändern soll, die entsprechenden Werte, wie z.B. */
-    grid-container {
+    my-container {
         grid-template-columns: 1fr;
         /* ... */
@@ Zeile 97: / 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>
-grid-container {
+my-container {
     ...
     grid-template-areas:
@@ Zeile 108: / Zeile 109: @@
 }
-grid-header {
+my-header {
     grid-area: h;
 }
@@ Zeile 117: / Zeile 118: @@
    * https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid
    * https://css-tricks.com/snippets/css/complete-guide-grid/