Vertikale Nav-Leiste in Flexbox fixieren

[Matthias Scharwies]

Herzlich willkommen!

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 mit dem lila Kreuz auf dem cremefarbenen Hintergrund sieht erst mal gut aus.

Wenn Du Deine Seite auf dem Handy / kleinen Tablet anschaust, ist alles durcheinander.

Normalerweise zeigt man eine Navigationsliste auf kleinen Bildschirmen unter- und auf größeren Bildschirmen nebeneinander. Im Allgemeinen beschränkt man sich da auf eine Navigation. Du könntest Kontakt und Impressum und "Kontakt" rechts neben die "Rückblicke" packen.

Datenschutz kann in den footer gepackt werden, da suchen ihn die meisten.

Der senkechte Block könnte nur mit der Jahreslosung gefüllt werden.

.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%
   }

Du könntest die fr erweitern:

grid-template-columns: 1fr 2.6fr 1fr 10fr 1fr;

Andererseits scheint mir, dass Du die 0.5fr gar nicht für Rasterzellen benötigst, sondern für Abstände, die du mit gap und margin auch erzielen kannst.

Ich würde da radikal aufräumen und das Hintergrundbild rausschmeißen. Das purple (#800080) passt gut zum Hintergrund, ich würde das durchgehend für die Überschriften h1, h2 verwenden (keine maroon mehr). Das orange auf der Unterseite https://www.kirche-und-wir.de/familie.htm wirkt frisch, ist bei schlechten Sichtverhältnissen und für alte Leute nicht lesbar.(Geh mit [F12] oder Rechtsklick in den Seiteninspektor und klick auf die Farbe.)

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.

Teste lokal und übertrage erst das fertige Produkt auf Deine Webseite!

Herzliche Grüße

Matthias Scharwies