Hallo, kurz zu mir: Ich habe bestimmt viele Schwächen, aber Webdesign ist meine Stärkste, wie ja mein Benutzername verrät. Ich habe im Mai ( völlig übnerraschend!) die Webgestaltung unserer Website übernommen. Dann habe ich mal begonnen, aus einer nichtfunktionierenden Seite eine fast nicht funktionierende zu bauen. ( wie man am horizontalem Menü sieht!) Das Ergebnis gibt es hier: <https://www.kirche-und-wir.de> Das, was online ist, ist erst ca. 1/3tel von der gewollten Site. Ein bisschen habe ich irgendwie etwas zusammengebastelt, aber: es sind Fehler in der css in der Form, dass ich die Gridtemplates mit falschen Einheiten benannt habe. % statt fr, etc... . Das wollte ich nun korrigieren und zusätzlich einen footer einbauen, da ich den " Datenschutz vergessen habe. ~~~ .container { height: 100vh; display: grid; grid-template-columns: 0.5fr 1.3fr 0.5fr 5fr 0.5fr; grid-template-rows: 15% 6% 1% auto 1% 3% } ~~~ /grid-template-rows:*15vh 7vh 1vh auto 1vh 5vh; damit funktioniert das Design gar nicht!*/ Bisher funktionierte die Website so, wie sie soll. ( ist ja online) Aber, nachdem ich die Einheiten verändert habe ( das Design ist unverändert geblieben) unter <section> item1 aus dem item- Verbund ( 1-7) gelöst habe, geriet alles ins Wanken. Der Inhalt von item1 scheint gar nicht mehr in dem Gridfenster zu liegen. Der Quelltext: ** html** ~~~html <section> <div class="verticalmenue"> <div class="item1"><h2>Jahreslosung 2021</h2> <h3>Seid barmherzig, wie auch euer Vater barmherzig ist. Lukas 6,36</h3></div> <div class="item2"><a href="gottesdienste.htm">Gottesdienst</a></div> <div class="item3"><a href="'gemeindebrief.htm">Gemeindebrief</a></div> <div class="item4"></div> <div class="item5"><a href="bereichweissandt.htm">Pfarrbereich<br> Weißandt- Gölzau</a></div> <div class="item6"><a href="bereichgoerzig.htm">Pfarrbereich<br> Görzig</a></div> <div class="item7"><a href="bereichwoerbzig.htm">Pfarrbereich<br> Wörbzig</a><br><br> <a href="bereichwoerbzig.htm">Pfarrbereich <br>Gröbzig</a><br><br> <a href="bereichwoerbzig.htm">Pfarrbereich <br>Preußlitz</a></div> </div> </section> ~~~ **.css ** ~~~css section { border: 1px solid black; border-radius: 10px; margin-top:0; background: linear-gradient(90deg, #8B008B, #551a8b); grid-column-start:2; grid-column-end:3; grid-row-start:1; grid-row-end:6; } .verticalmenue { border: 3px solid yellow; /* nur zur Kontrolle*/ width: 1.3fr; display: flex; flex-direction: column; margin-top: 0; padding-left:1em; flex-wrap: wrap; position: fixed; } **.item1 { color: snow; text-align: center; padding: 2em 0.5em 2em 0; }** .item1 h2 { font-size: 1.5vw; } .item h3 { font-size: 1vw; } .item2, .item3, .item4, .item5, .item6, .item7 { color: white; font-weight: bold; /*background: silver;*/ padding-top:1em; font-size: 1.5vw; } .item2 { color: green; } .item1 a , .item2 a , .item3 a , .item5 a , .item6 a , .item7 a { color: white; text-decoration: none; } a:hover, a:focus { color: wheat; } .item4 { flex-grow: 0.2; } .item5 { hyphens: auto; } ~~~ Zudem: Der Text von item1 bricht weder um durch "flex-gap: gap;" noch hält er sich an die Grenzen des Grid-Rasters. Einfach nur lästig. Was mache ich ( außer "Alles" falsch?) Könnt Ihr mir bitte helfen? Herzlichen Dank sagt keineahnung

Hallo, kurz zu mir: Ich habe bestimmt viele Schwächen, aber Webdesign ist meine Stärkste, wie ja mein Benutzername verrät. Ich habe im Mai ( völlig übnerraschend!) die Webgestaltung unserer Website übernommen. Dann habe ich mal begonnen, aus einer nichtfunktionierenden Seite eine fast nicht funktionierende zu bauen. ( wie man am horizontalem Menü sieht!) Das Ergebnis gibt es hier: <www.kirche-und-wir.de> Das, was online ist, ist erst ca. 1/3tel von der gewollten Site. Ein bisschen habe ich irgendwie etwas zusammengebastelt, aber: es sind Fehler in der css in der Form, dass ich die Gridtemplates mit falschen Einheiten benannt habe. % statt fr, etc... . Das wollte ich nun korrigieren und zusätzlich einen footer einbauen, da ich den " Datenschutz vergessen habe. ~~~ .container { height: 100vh; display: grid; grid-template-columns: 0.5fr 1.3fr 0.5fr 5fr 0.5fr; grid-template-rows: 15% 6% 1% auto 1% 3% } ~~~ /grid-template-rows:*15vh 7vh 1vh auto 1vh 5vh; damit funktioniert das Design gar nicht!*/ Bisher funktionierte die Website so, wie sie soll. ( ist ja online) Aber, nachdem ich die Einheiten verändert habe ( das Design ist unverändert geblieben) unter <section> item1 aus dem item- Verbund ( 1-7) gelöst habe, geriet alles ins Wanken. Der Inhalt von item1 scheint gar nicht mehr in dem Gridfenster zu liegen. Der Quelltext: ** html** ~~~html <section> <div class="verticalmenue"> <div class="item1"><h2>Jahreslosung 2021</h2> <h3>Seid barmherzig, wie auch euer Vater barmherzig ist. Lukas 6,36</h3></div> <div class="item2"><a href="gottesdienste.htm">Gottesdienst</a></div> <div class="item3"><a href="'gemeindebrief.htm">Gemeindebrief</a></div> <div class="item4"></div> <div class="item5"><a href="bereichweissandt.htm">Pfarrbereich<br> Weißandt- Gölzau</a></div> <div class="item6"><a href="bereichgoerzig.htm">Pfarrbereich<br> Görzig</a></div> <div class="item7"><a href="bereichwoerbzig.htm">Pfarrbereich<br> Wörbzig</a><br><br> <a href="bereichwoerbzig.htm">Pfarrbereich <br>Gröbzig</a><br><br> <a href="bereichwoerbzig.htm">Pfarrbereich <br>Preußlitz</a></div> </div> </section> ~~~ **.css ** ~~~css section { border: 1px solid black; border-radius: 10px; margin-top:0; background: linear-gradient(90deg, #8B008B, #551a8b); grid-column-start:2; grid-column-end:3; grid-row-start:1; grid-row-end:6; } .verticalmenue { border: 3px solid yellow; /* nur zur Kontrolle*/ width: 1.3fr; display: flex; flex-direction: column; margin-top: 0; padding-left:1em; flex-wrap: wrap; position: fixed; } **.item1 { color: snow; text-align: center; padding: 2em 0.5em 2em 0; }** .item1 h2 { font-size: 1.5vw; } .item h3 { font-size: 1vw; } .item2, .item3, .item4, .item5, .item6, .item7 { color: white; font-weight: bold; /*background: silver;*/ padding-top:1em; font-size: 1.5vw; } .item2 { color: green; } .item1 a , .item2 a , .item3 a , .item5 a , .item6 a , .item7 a { color: white; text-decoration: none; } a:hover, a:focus { color: wheat; } .item4 { flex-grow: 0.2; } .item5 { hyphens: auto; } ~~~ Zudem: Der Text von item1 bricht weder um durch "flex-gap: gap;" noch hält er sich an die Grenzen des Grid-Rasters. Einfach nur lästig. Was mache ich ( außer "Alles" falsch?) Könnt Ihr mir bitte helfen? Herzlichen Dank sagt keineahnung

Hallo, kurz zu mir: Ich habe bestimmt viele Schwächen, aber Webdesign ist meine Stärkste, wie ja mein Benutzername verrät. Ich habe im Mai ( völlig übnerraschend!) die Webgestaltung unserer Website übernommen. Dann habe ich mal begonnen, aus einer nichtfunktionierenden Seite eine fast nicht funktionierende zu bauen. ( wie man am horizontalem Menü sieht!) Das Ergebnis gibt es hier: www.kirche-und-wir.de Das, was online ist, ist erst ca. 1/3tel von der gewollten Site. Ein bisschen habe ich irgendwie etwas zusammengebastelt, aber: es sind Fehler in der css in der Form, dass ich die Gridtemplates mit falschen Einheiten benannt habe. % statt fr, etc... . Das wollte ich nun korrigieren und zusätzlich einen footer einbauen, da ich den " Datenschutz vergessen habe. > .container { height: 100vh; display: grid; grid-template-columns: 0.5fr 1.3fr 0.5fr 5fr 0.5fr; grid-template-rows: 15% 6% 1% auto 1% 3% } /grid-template-rows:*15vh 7vh 1vh auto 1vh 5vh; damit funktioniert das Design gar nicht!*/ Bisher funktionierte die Website so, wie sie soll. ( ist ja online) Aber, nachdem ich die Einheiten verändert habe ( das Design ist unverändert geblieben) unter <section> item1 aus dem item- Verbund ( 1-7) gelöst habe, geriet alles ins Wanken. Der Inhalt von item1 scheint gar nicht mehr in dem Gridfenster zu liegen. Der Quelltext: ** html** > <section> <div class="verticalmenue"> <div class="item1"><h2>Jahreslosung 2021</h2> <h3>Seid barmherzig, wie auch euer Vater barmherzig ist. Lukas 6,36</h3></div> <div class="item2"><a href="gottesdienste.htm">Gottesdienst</a></div> <div class="item3"><a href="'gemeindebrief.htm">Gemeindebrief</a></div> <div class="item4"></div> <div class="item5"><a href="bereichweissandt.htm">Pfarrbereich<br> Weißandt- Gölzau</a></div> <div class="item6"><a href="bereichgoerzig.htm">Pfarrbereich<br> Görzig</a></div> <div class="item7"><a href="bereichwoerbzig.htm">Pfarrbereich<br> Wörbzig</a><br><br> <a href="bereichwoerbzig.htm">Pfarrbereich <br>Gröbzig</a><br><br> <a href="bereichwoerbzig.htm">Pfarrbereich <br>Preußlitz</a></div> </div> </section> **.css ** section { border: 1px solid black; border-radius: 10px; margin-top:0; background: linear-gradient(90deg, #8B008B, #551a8b); grid-column-start:2; grid-column-end:3; grid-row-start:1; grid-row-end:6; } .verticalmenue { border: 3px solid yellow; /* nur zur Kontrolle*/ width: 1.3fr; display: flex; flex-direction: column; margin-top: 0; padding-left:1em; flex-wrap: wrap; position: fixed; } **.item1 { color: snow; text-align: center; padding: 2em 0.5em 2em 0; }** .item1 h2 { font-size: 1.5vw; } .item h3 { font-size: 1vw; } .item2, .item3, .item4, .item5, .item6, .item7 { color: white; font-weight: bold; /*background: silver;*/ padding-top:1em; font-size: 1.5vw; } .item2 { color: green; } .item1 a , .item2 a , .item3 a , .item5 a , .item6 a , .item7 a { color: white; text-decoration: none; } a:hover, a:focus { color: wheat; } .item4 { flex-grow: 0.2; } .item5 { hyphens: auto; } Zudem: Der Text von item1 bricht weder um durch "flex-gap: gap;" noch hält er sich an die Grenzen des Grid-Rasters. Einfach nur lästig. Was mache ich ( außer "Alles" falsch?) Könnt Ihr mir bitte helfen? Herzlichen Dank sagt keineahnung