Antwort an „keineahnung“ verfassen

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

freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar

Ihre Identität in einem Cookie zu speichern erlaubt es Ihnen, Ihre Beiträge zu editieren. Außerdem müssen Sie dann bei neuen Beiträgen nicht mehr die Felder Name, E-Mail und Homepage ausfüllen.

abbrechen