keineahnung: Vertikale Nav-Leiste in Flexbox fixieren

problematische Seite

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**

<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

  1. problematische Seite

    Hallo - hm - Michael, würd ich mal behaupten ;) (es ist doof, jemanden mit "keineahnung" anzureden).

    Du solltest versuchen, das Seitenlayout konsistent mit Grid aufzubauen. Im Moment hast du einen Header, der über die ganze Breite geht, und das macht es unnötig kompliziert. Wenn ich ein bisschen stöbere, haben alle Seiten das gleiche Layout:

    • das violette Kreuz als Seiteneinteilung
    • oben rechts euren Namen und euer Titel-Icon
    • sechs Links im vertikalen Kreuzbalken
    • vier Links im horizontalen Kreuzbalken
    • ein großer Hauptbereich rechts unten
    • und ein Datenschutzlink, der im Moment oben rechts rumgeistert und da bestimmt nicht bleiben soll...

    Ein Grid ist dafür durchaus okay. Und du hast deine Elemente auch schon so angeordnet, dass sie im schmalen Modus halbwegs sinnvoll untereinander stehen.

    Was Du mit der Jahreslosung meinst, habe ich nicht verstanden. Ich sehe sie auf der Seite nicht, und kann mir aus dem, was Du gepostet hast, keine Vorstellung machen wo die landen soll.

    Ich hätte nur eine Grundüberlegung anzubieten.

    Dein Kreuz teilt die Seite in 9 Bereiche, nämlich 3 Reihen mit 3 Spalten. Mehr nicht. Das kannst Du mit grid-template sehr schön darstellen. Allerdings - man sollte eine Seite nicht breiter als 60em machen. Ansonsten wird das schlecht lesbar. Nachteilig kann nun sein, dass der horizontale Kreuzbalken dann auch nicht breiter wird als 60em, und weil er ein Deko-Element ist, darf er ruhig breiter werden. Dafür - und nur dafür - würde ich dem Grid 5 Spalten geben, in denen sich der Kreuzbalken ausbreiten kann.

    body {
      width: 100vw;
      min-height: 100vh;
      margin: 0 auto;
      padding: 8px;
      box-sizing: border-box;
      overflow: hidden scroll;
      display: grid;
      grid-template: ".    .   losung logo               ." auto
                      "y   y   stamm  menü               m-over" auto
                      ".   .   stamm  main               ." 1fr /
                       1fr 3em 10em   minmax(20em, 50em) 1fr;
    }
    

    body? Ja, body. Einen Extracontainer braucht man nicht.

    Ich muss etwas rumfrickeln. width:100vw bedeutet: Bildschirmbreite. Aber wenn ein vertikaler Scrollbalken erscheint, zieht der Browser den nicht von 100vw ab und es erscheint automatisch auch ein horizontaler Balken. Den will ich nicht sehen, darum overflow: hidden scroll.

    Das Grid-Template verwendet benannte Bereiche. Bzw. einfach einen Punkt für Bereiche, denen ich keinen Namen geben will. Das kannst Du Dir in unserem Wiki anschauen, allerdings seh ich dass ich da nochmal ran muss...

    Die grid-template Eigenschaft definiert jedenfalls ein Raster aus benannten Bereichen. Je Zeile kannst Du eine Höhe angeben, und nach einem / kommen die Breitenangaben für die Spalten.

    minmax ist ein Breitenbereich: von 20em bis 50em.

    Ich hab mal ein Fiddle gemacht, da fehlt die Layout-Umschaltung bei 720px (was eh nicht die beste Idee ist, man sollte Mediabreaks in em festlegen, damit die Breaks sich an Fontänderungen anpassen). Probier einen guten Wert aus, ich denke, ab 45em kannst Du in die Grid-Ansicht schalten. Darunter dann die einfache "alles untereinander" Ansicht. Ich deute die Umschaltung durch einen Farbschleier über dem Hintergrundbild an...

    Ich hoffe, ich habe verstanden, was Du mit der Losung meintest.

    Das Fiddle soll zeigen, wie wenig HTML Du brauchst, um sowas aufzubauen. Die variable Fontgröße, die Du drin hast - das würde ich mir nochmal überlegen. Da schwankst Du zwischen wuchtig und winzig. font-size: 1.7vw variiert zu stark; das Thema hatten wir vor einiger Zeit im Forum und sind überein gekommen, dass man hier mit calc arbeiten sollte, z.B. so:

    font-size: calc(0.8em + 0.4vw);

    Wenn Dein @media-Break bei 45em liegt, sind 0.4vw 0.18em. D.h. als Mindestgröße hast Du 0.98em. Ein breites Fenster mit 120em ergibt 0.48em, in Summe 1.28em Fontsize. Du kannst mit dem em-Wert als Basisangabe und dem vw-Wert als flexible Angabe etwas rumspielen. Mach's halt weder zu klein noch zu groß.

    Mit wird's jetzt zu spät; guck es Dir mal an und wenn was unklar ist, frag gerne. Ich sage auch nicht, dass mein Vorschlag der Weisheit letzter Schluss ist. Aber wenn was da ist, kann man drüber reden 😉

    Ökumenische Grüße aus dem kath. Rheinland...
    Rolf

    --
    sumpsi - posui - obstruxi
  2. problematische Seite

    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

    --
    Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
    1. problematische Seite

      Hallo Matthias,

      geh schlafen! Mach ich jetzt auch... Das Wiki hat Zeit.

      Rolf

      --
      sumpsi - posui - obstruxi
      1. problematische Seite

        Servus!

        Hallo Matthias,

        geh schlafen! Mach ich jetzt auch... Das Wiki hat Zeit.

        Ist ja auch das Forum hier!

        Gute Nacht!

        Matthias Scharwies

        --
        Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“