Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m287:learningunits:lu05:loesungen:praktisches-beispiel [2026/05/29 07:59] – ↷ Seite von de:modul:m307:learningunits:lu05:loesungen:praktisches-beispiel nach de:modul:m287:learningunits:lu05:loesungen:praktisches-beispiel verschoben vdemir
+++ de:modul:m287:learningunits:lu05:loesungen:praktisches-beispiel [2026/05/29 13:22] (aktuell) – vdemir
@@ Zeile 274: / Zeile 274: @@
 [[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir
-===== Sourcecode: style.css =====
-<code css>
-/* ==========================================================================
-. DESKTOP-ANSICHT (Basis-Layout)
-   Grafik links: Header oben | Nav (links) - Main (mitte) - Aside (rechts) | Footer unten
-   ========================================================================== */
-* {
-    box-sizing: border-box;
-}
-body {
-    font-family: sans-serif;
-    margin: 0; /* Verhindert ungewollte Ränder am Bildschirmrand */
-}
-#page-wrapper {
-    margin: auto;
-    width: 960px; /* Feste Breite für die Desktop-Ansicht */
-}
-header, footer {
-    background: lightgreen;
-    text-align: center;
-    padding: 10px;
-    width: 100%;
-}
-.main-content {
-    display: flex; /* Flexbox aktiviert das nebeneinander Anordnen */
-}
-.post-with-image {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 15px;
-}
-#mainnav {
-    padding: 15px;
-    width: 20%; /* Nav nimmt 20% Breite ein */
-}
-#sidebar {
-    padding: 15px;
-    width: 20%; /* Sidebar nimmt 20% Breite ein */
-}
-main {
-    padding: 15px;
-    width: 60%; /* Hauptbereich nimmt 60% Breite ein (Zusammen 100%) */
-}
-article img {
-    margin: 0 10px 10px 0;
-    max-width: 100%;
-    height: auto;
-    border: 3px solid black;
-}
-article {
-    padding: 15px;
-    margin-bottom: 5px;
-    background: lightblue;
-}
-nav ul {
-    padding-left: 0;
-}
-nav ul li {
-    list-style: none;
-    margin-left: 0;
-}
-/* ==========================================================================
-. TABLET-ANSICHT (Breakpoint: unter 960px)
-   Grafik mitte: Header oben | Navigation vollflächig darunter
-                 Seitenleiste (links) - Hauptbereich (rechts)
-                 Footer unten
-   ========================================================================== */
-@media screen and (max-width: 959px) {
-    #page-wrapper {
-        width: 100%; /* Layout passt sich flexibel der Bildschirmbreite an */
-        padding: 0 10px;
-    }
-    .main-content {
-        flex-wrap: wrap; /* Ermöglicht das Umbrechen der Elemente in eine neue Zeile */
-    }
-    /* Navigation wird vollflächig über die Inhaltsblöcke geschoben */
-    #mainnav {
-        width: 100%;
-        order: 1; /* Kommt als erstes Element innerhalb von .main-content */
-    }
-    /* Seitenleiste rutscht nach links */
-    #sidebar {
-        width: 30%; /* Nimmt 30% der Breite ein */
-        order: 2;   /* Kommt an zweite Stelle (links) */
-    }
-    /* Hauptbereich rutscht nach rechts neben die Seitenleiste */
-    main {
-        width: 70%; /* Nimmt die restlichen 70% der Breite ein */
-        order: 3;   /* Kommt an dritte Stelle (rechts) */
-    }
-}
-/* ==========================================================================
-. MOBILE-ANSICHT (Breakpoint: unter 600px)
-   Grafik rechts: Header | Navigation | Hauptbereich | Seitenleiste | Footer
-   (Alle Elemente untereinander gestapelt)
-   ========================================================================== */
-@media screen and (max-width: 600px) {
-    /* Alle Blöcke werden auf die volle Breite gesetzt, um untereinander zu stehen */
-    #mainnav, main, #sidebar {
-        width: 100%;
-    }
-    /* Reihenfolge laut Skizze anpassen */
-    #mainnav {
-        order: 1; /* 1. Navigation */
-    }
-    main {
-        order: 2; /* 2. Hauptbereich rutscht über die Seitenleiste */
-    }
-    #sidebar {
-        order: 3; /* 3. Seitenleiste rutscht unter den Hauptbereich */
-    }
-    /* Optimierung für den Artikel: Das zweispaltige Grid wird einspaltig */
-    .post-with-image {
-        grid-template-columns: 1fr;
-        gap: 10px;
-    }
-    /* Das Artikelbild wird für Mobilgeräte zentriert dargestellt */
-    article img {
-        margin: 0 0 10px 0;
-        width: 100%;
-    }
-}
-</code>
-[[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir