Hallo,

mit Hilfe der vielen Anleitung hier habe ich eine Webseite erstellt. Diese ist bisher für eine Ansicht im Querformat erstellt. Jetzt möchte ich noch die Darstellung ab einer bestimmten Fensterbreite ändern.

bisherige Darstellung:

• header header
• nav main
• aside main
• footer footer

Erreichen möchte ich, dass ab einer bestimmten Breite: z.B. (@media screen and (max-width:45em))

folgende Darstellung erfolgt:

• header header
• nav aside
• main main
• footer footer

Dies ist meine erste Webseite. Ich bitte um nachsicht, wenn die eine oder andere Angabe oder Einstellung nicht richtig ist, ich bin für jeden Tipp dankbar.

Vielen Dank fürs lesen und die Hilfe.

meine css:

body {
        display: grid;
        grid-column-gap: 0.5em;
        grid-row-gap: 0.5em;
        /*  gap: 0.5em;*/
}

@media (min-width: 30em) {
        /* Breite beträgt mindestens 30em */

body {
                grid-template-columns: 22% 1fr;
                grid-template-rows: minmax(4em, 4em) minmax(20em, 23em) minmax(20em, 1fr) minmax(2em, 2em);

         }

}


header,
footer {
         grid-column: 1 / -1;
}

nav {
        grid-row: 2;
}


aside {
         grid-row: 3;

}

header * {

        float: right;
        margin: 0 0 ;
}

main {
         grid-column: 2;
         grid-row: 2 / 4;
}

body {
          background-color: #EFEFEF;


}

header {

         display: grid;
         grid-template-columns: min-content 1fr;
}

body {
        margin: 0 auto;
        max-width: 90%;
      /*   max-width: 77em; */
        font-family: sans-serif;
}


nav,
main,
aside
         {
        border-radius: 1em 1em 1em 1em; /*  links oben / rechts oben / links unten / rechts unten*/
        border: 1px solid;
        padding: 10px;
        border-color: #005F00;
        background-color: #DFDFDF;
}

header {
        background-color: #669933;
        border-radius: 1em 1em 0em 0em;
        border: 1px solid;
        border-color: #005F00;
        padding: 10px;
}



footer {
        border-radius: 0em 0em 1em 1em; /*  links oben / rechts oben / links unten / rechts unten*/
        border: 1px solid;
        border-color: #005F00;
        background-color: #DFDFDF;
}


footer * {
        float: right;
        margin: 0 0 ;
}
/*------------------------------------------------------------------------*/

ul#navigation {
         margin: 20px;
          padding: 0px;
         list-style: None;
         width: 145px;

}

ul#navigation li {
          position: Relative;
         margin-bottom: 10px;
         width: 145px;
}

ul#navigation li ul {
         position: Relative;

         margin-bottom: 10px;
         left: 0px;
         top: 0;
         display: None;    /*  Untermenüs Einblenden Ja/Nein */
         list-style: None;
         z-index: 100;
}

ul#navigation li a {

         margin-bottom: 10px;
         display: Block;
         text-decoration: None;
         font-style: oblique;
         color: #009F00;
         font-weight: bold;
         padding: 5px;
         border-radius: 1em 1em 1em 1em; /*  links oben / rechts oben / links unten / rechts unten*/
         background-color: #DFDFDF;
         border: 1px Solid #005F00;;

}

ul#navigation li a:hover,
ul#navigation li a:active {
         color: #3F3F3F;   /* Farbe bei Hover */
         cursor: Pointer;
}

ul#navigation li:hover ul,
ul#navigation li:active ul {
         display: Block;
}

/* Pluszeichen bei Link mit Untermenü */

li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }

/* Footermenü */

#navfooter li {

         list-style-type: none;
         font-family: Arial, Verdana, serif;
         display: inline-block; /* Menü nebeneinander  */
         padding: 0.0em; /* beeinflusst Menühöhe  */
         text-indent: 0.0em; /* Text einrücken links im Menü */
         text-decoration: none;
         font-size: 0.8em;   /* Schriftgröße */
         font-weight: none;
         width: 8em 8em 8em; /*  Menübreite  */
         position: relative;
         margin-left: 15px; /* abstand links Menüelemente */
         margin-bottom: 5px; /* abstand unten Menüelemente */
         cursor: pointer;
}


#navfooter  {
         float: right;
         margin: 0em 1em;
         padding-top: 10px;

}

navfo ul {
         padding: 0;
         margin: 0;
         list-style: none;
         position: relative;

  }

navfo ul li {
         display:inline-block;
         /* background-color: #007F00; */
         border-radius: 0px;
  }

navfo a {
         display:block;
         padding:0 0px;
         color:#009F00;
         font-size:17px;
         /* line-height: 28px;    Menühöhe */
         text-decoration:none;
         border-radius: 0px;
}

navfo a:hover {
         /* background-color: #9F9F9F; */
         color:#7F7F7F;
}

/* Hauptüberschrift Gartenverein*/

hueb {

         grid-column: 1 / -1;
     /*    justify-self: center; */
         font-family: Arial, Verdana, serif;
         font-size: calc(23px + (24 - 18) * (100vw - 400px) / (800 - 400));
         overflow: hidden; /* beschneidet den Text*/
         text-overflow: ellipsis; /* sorgt dafür, dass der beschnittene Text mit Auslassungspunkten versehen wird*/
         white-space: nowrap;     /* verhindert, dass der Text mehrzeilig wird */
      /*   font-size: 2.3em;  */
         font-weight: bold;
         text-decoration: none;
         font-style: oblique;
         color: #66FF66;
         text-shadow: 1px 2px 0px #000000;
         text-align: center;

}


/* Abstände Inhalt vom Rand im Grid - allgemeine Texte */

.texte {
         display: flow-root; /** float am Ende des Blocks beenden **/
         margin-top: 20px;
         margin-left: 20px;
         margin-right: 20px;
}

/* Abstände Inhalt vom Rand im Grid - Termine*/

#termine {
         margin-top: 20px;
         margin-left: 20px;
         margin-right: 20px;
}



ueb {
         font-family: Arial, Verdana, serif;
         font-size: 1.5em;
         font-weight: bold;
         text-decoration: none;
         font-style: oblique;
         color: #009F00;
         text-align: left;

}


#p_info {
         font-family: Arial, Verdana, serif;
         font-size: 1em;
         font-weight: bold;
         text-decoration: none;
         font-style: oblique;
         color: #009F00;
         text-align: left;
}

#p_term {
         font-family: Arial, Verdana, serif;
         font-size: 0.8em;
         font-weight: none;
         text-decoration: none;
         font-style: oblique;
         color: #009F00;
         text-align: left;


}


uebgart {
         font-family: Arial, Verdana, serif;
         font-size: 1.2em;
         font-weight: bold;
         text-decoration: none;
         font-style: oblique;
         color: #009F00;
         text-align: left;
}


#gart {
         font-family: Arial, Verdana, serif;
         font-size: 0.8em;
         font-weight: bold;
         text-decoration: none;
         font-style: oblique;
         color: #009F00;
         text-align: left;
}


#pgart {

        font-family: Arial, Verdana, serif;
        font-size: 1em;
        font-weight: none;
        text-decoration: none;
        font-style: oblique;
        color: #3F3F3F;
        text-align: justify; /* Blocksatz */


}

sup { font-size: 60%;

}

img {

         display:inline-block;
}

/* unterstrichene Zwischenüberschrift */

hzwisch {    font-family: Arial, Verdana, serif;
             font-size: 1em;
             font-weight: bold;
             text-decoration: underline;
             font-style: oblique;
             color: #009F00;
             text-align: left;

}

/* Haupttexte */

#p_allg {

        font-family: Arial, Verdana, serif;
        font-size: 1em;
        font-weight: none;
        text-decoration: none;
        font-style: oblique;
        color: #3F3F3F;
        text-align: justify; /* Blocksatz */
        clear:left;
}

/* Haupttexte fett */

#p_allg_bold {

        font-family: Arial, Verdana, serif;
        font-size: 1em;
        font-style: oblique;
        font-weight: bold;
        text-decoration: none;
        color: #3F3F3F;
        text-align: justify; /* Blocksatz */
        clear:left;
}




/* horizontale Linie */

#hrhoriz {
         border-color: #000080;
         border-hight: 1px;
         width: 100%;

}

.blau  { color: #0000FF;
}


.leftFloat {

         box-shadow: 8px 10px 8px #3F3F3F;
         border: none;
         border-radius: 20px;
         float: left;
         margin: 15px 25px 20px 0px;  /* top | right | bottom | left */

}
.rightFloat {
  float: right
}

eine Seite:

<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv=”Page-Enter” content=”revealtrans(duration=0.1,transition=5)” >
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>

        <hueb>Kleingartenverein "Einigkeit" Großaga e.V. </hueb>
</header>

<nav>

<ul id="navigation">
            <li><a href="index.html">Der Kleingarten</a></li>
            <li><a href="verein.html">Unser Verein</a>
            </li>
            <li><a href="recht.html">Rechtliches</a>
            <ul>

                 <li><a href="mitgliedschaft.html">Mitgliedschaft</a></li>
                 <li><a href="kuendigung.html">Kündigung</a></li>
                 <li><a href="laubenvers.html">Laubenversich.</a></li>


            </ul>
            </li>
            <li><a href="downloads.html">Downloads</a></li>
            <li><a href="gaerten.html">freie Gärten</a>
            <!-- Untermenü -->
            <ul>
                <li><a href="garten1.html">Parzelle 8</a></li>
                <li><a href="garten2.html">Parzelle 24</a></li>
             <!--    <li><a href="garten3.html">Parzelle 19</a></li> -->
            </ul>
            </li>
            </ul>
</nav>

<aside id="news">
        <div id="termine">
        <ueb>Termine 2023</ueb>
        <hr id="hrhoriz" />
        <p id="p_info">Vollversammlung</p>
        <p id="p_term">Samstag 15. April 2023
        <br>10:00 Uhr</p>
        <p id="p_info">Inbetriebnahme Wasser</p>
        <p id="p_term">Samstag 15. April 2023
        <br>13:00 Uhr</p>
        </div>
</aside>


<main>
        <div class="texte">
        <ueb>Der Kleingarten</ueb>
        <hr id="hrhoriz" />

        <p id="p_allg">Kleingärten sollen der Erholung in der Natur dienen und Stadtbewohnern nach dem Vorbild alter Bauerngärten den Anbau von Obst und Gemüse ermöglichen. Es finden sich in diesen Gärten aber auch Zierpflanzen und Rasenflächen, insbesondere wenn die Erholung im Vordergrund steht.
<br>
Meist befindet sich eine Laube auf jedem Grundstück einer Gartenanlage. Geregelt wird das Kleingartenleben durch die jeweilige Kleingartenordnung/Satzung/Statuten eines jeden Vereins. In Deutschland kommt das Bundeskleingartengesetz (BKleingG) hinzu.
</p>
<p id="p_allg">
<img class="leftFloat" loading="lazy" src="pictures/pic06.jpg" width="30%" alt="" />
<br>
Der Allgemeinheit bieten die Kleingärten eine bessere Lebensqualität in den Städten durch Lärmverringerung, Staubbindung, Durchgrünung, Auflockerung der Bebauung, Biotop- und Artenschutz, Lebensraumvernetzung und klimatische Auswirkungen.
<br>
Familien bieten die Kleingärten eine sinnvolle Freizeitbeschäftigung; eine gärtnerische Betätigung und das preiswerte Züchten von gesundem Gemüse; das persönliche Erlebnis vom Säen, Wachsen, Gedeihen und Ernten von gesundem Gemüse; ein Gegengewicht zum Leben in Betonburgen und auf Asphaltflächen; Förderung von harmonischen zwischenmenschlichen Beziehungen; einen direkten Kontakt mit der Natur.
</p>
<p id="p_allg">
<img class="leftFloat" loading="lazy" src="pictures/pic18.jpg" alt=""/>
<br>
Kindern und Jugendlichen bieten die Kleingärten Ausgleich für die oft fehlenden Spielplätze; ein Spiel- und Kommunikationsfeld; Erlebnisräume in der Natur und Wahrnehmung ihrer natürlichen Zusammenhänge; Anschauungsunterricht in Biologie.
<br><br>
Berufstätigen bieten die Kleingärten eine Entspannung vom Arbeitsstress durch gesunde Betätigung; eine ideale Alternative zum Arbeitsalltag.
</p>
</div>
</main>

<footer>

<navfo>
         <ul id="navfooter">
         <li><a href="datenschutz.html">Datenschutz</a></li>
         <li><a href="impressum.html">Impressum und Kontakt</a></li>
         </ul>
</navfo>

</footer>
</body>
</html>