Inhalte bei einem 3 spaltigen Grid Layout in der 1. und 3. Spalte hinterlegen

[selfhtml_user_24102020]

Hallo!

Wahrscheinlich ist es ganz einfach, aber ich weiß nicht, wie ich es machen muß.🤔

Ich habe folgendes Grid Layout in meiner main.css:

body {
		 display: grid;
		 grid-template-columns: 20% 60% 20%;  
		 grid-template-rows: auto auto auto;  
		 background-color: black;
		 }

header {
			 grid-column: 1 / span 3;  
			 grid-row: 1;  
			 background-color: black;
			 }

main {
		 grid-column: 2 / span 1;  
		 grid-row: 2;  
		 background-color: white;
		 padding-top: 5px;
		 padding-right: 10px;
		 padding-left: 10px;
		 font-size: 21px;
		 line-height: 1.5em;
		 }

footer {
			 grid-column: 1 / span 3;  
			 grid-row: 3;
			 color: Cyan;
			 background-color: black;
			 text-align: center;
			 }

Das bedeutet ich habe einen einzeiligen Header, eine einzeilige main und einen einzeiligen footer. In der 2. mittleren Spalte habe im Header u.a. meine Navigation, in der main meinen Content und im footer das Impressum usw. hinterlegt.

Jetzt möchte ich möglichst ohne JavaScript (darüber habe noch fast gar keine Kenntnisse) zum Beispiel in der 3. Spalte rechts neben dem main Content eine Sidebar oder irgend etwas anderes hinterlegen.

Wie stelle ich das an?

Gruß Jürgen

[Gunnar Bittersmann]

@@selfhtml_user_24102020

grid-template-columns: 20% 60% 20%;

Das macht wenig Sinn. Bei Grid musst du nicht mitrechnen, dass die einzelnen Teile sich zu 100% ergänzen.

Wenn du die Breite im Verhältnis 1 : 3 : 1 aufteilen willst, dann gib das genauso an:
grid-template-columns: 1fr 3fr 1fr

(fr steht für fraction.)

Jetzt möchte ich möglichst ohne JavaScript (darüber habe noch fast gar keine Kenntnisse)

JavaScript hat beim Stylen auch nie™ was zu suchen.

zum Beispiel in der 3. Spalte rechts neben dem main Content eine Sidebar oder irgend etwas anderes hinterlegen.

Wie stelle ich das an?

Indem du dafür grid-column: 3; grid-row: 2 angibst.

Besser bist aber dran, wenn du deine Bereiche benennst.

😷 LLAP

[selfhtml_user_24102020]

Hallo Gunnar,

ja, einfacher kann die Lösung nicht sein. Und ich bin nicht von selber darauf gekommen.🙄

Meine Bereiche habe ich jetzt, wie von Dir empfohlen auch benannt. Und es eröffnen sich für mich nun ganz neue Möglichkeiten.

Gleichzeitig sind auch neue Fragen aufgetreten, aber dafür ist es mir jetzt zu spät.

Bis auf eine: Ich habe in der 3. Spalte also rechts einen kleinen Textschnipsel hinterlegt. Meine Seiten erstelle ich mit dem Static Site Generator Jekyll. Der hat einen kleinen lokalen Webserver eingebaut, der die Seiten dann ausgibt. Dort erscheint der Textschnipsel auch so wie ich das haben will. Sehr erstaunt war ich allerdings das dieser Textschnipsel nachdem ich die Seite auf den Webserver meines Hosters hochgeladen habe, identisch auf der 1. also linken Spalte erschien. Der Webserver meines Hosters ist Apache. Irgendeine Idee warum das so ist? Zur Not vertausche ich es lokal, dann müßte es konsequenterweise beim Hoster dann ja wieder stimmen.

Gruß Jürgen

[Rolf B]

Hallo selfhtml_user_24102020,

erschien der Schnipsel zweimal? Oder nur an der falschen Stelle?

Wenn zweimal: Hmmm. Hast Du einen Link?

Wenn falsche Stelle: Bitte stelle sicher, dass dein Browser die aktuelle Version der Seite hat (Refresh mit Strg+F5 unter Windows, oder in den Browser Entwicklerwerkzeugen auf dem Netzwerk-Tab den Cache löschen). Es gibt auch Hoster, die Inhalte cachen, one.com zum Beispiel. Da lade ich ein CSS hoch und mein Browser bekommt es zum Verrecken nicht. Tags drauf ist dann alles ok.

Rolf

[selfhtml_user_24102020]

Hallo Rolf,

das Cache Problem kenne ich. Ein oder auch manchmal mehrere Refreshs lösen das Problem, das im Grunde genommen gar nicht existiert, sondern eher als Fata Morgana einzustufen ist, normalerweise. Das ich also ggf. die alte Version meiner Seite zu sehen bekomme, kann ich ja nachvollziehen. Aber das ein Textschnipsel der auf der alten Seite gar nicht existierte, dann allerdings auf der falschen Seite (übrigens nur einmal) angezeigt wurde, finde ich suspekt.🤔

Das Problem hat sich glücklicherweise aber (so habe ich das am liebsten, passiert nur leider äußerst selten) von selbst gelöst. Ein paar Stunden später ein bisschen auf meiner eigenen Seite gesurft und auf die "Problemseite" zurückgekehrt, war alles so wie es sein soll.

Der Ursache gehe ich auch nicht weiter nach, es sei denn, es würde öfter auftreten. Scheint ein "thermisches Problem" gewesen zu sein.😆

Das es Hoster gibt, die Inhalte selber cachen, war mir neu und ist eine für mich wertvolle Information. Das finde ich ziemlich grenzwertig. Bei einer wirklich großen kommerziellen Website kann dem Kuden dadurch ein unter Umständen großer finanzieller Schaden entstehen. Sie sollten ihre Kunden wenigstens darüber aufklären.

Aber die stehen in einem mörderischen Wettbewerb und müssen wahrscheinlich, um zu überleben, auf diese Weise Kosten sparen.

Gruß Jürgen

[Der Martin]

Hallo Jürgen,

Das Problem hat sich glücklicherweise aber (so habe ich das am liebsten, passiert nur leider äußerst selten) von selbst gelöst.

solche Fälle kenne ich auch, aber genau das macht mich dann nervös. Denn solange ich nicht weiß, warum ein Problem (oder ein Symptom) plötzlich verschwunden ist, kann es jederzeit wieder auftauchen. Und dann fange ich wieder an zu suchen.

Der Ursache gehe ich auch nicht weiter nach, es sei denn, es würde öfter auftreten.

Ich würde in der Situation auch nicht beliebig viel Aufwand reinstecken, aber doch zumindest noch versuchen, das Geheimnis zu ergründen.

Scheint ein "thermisches Problem" gewesen zu sein.😆

Ja, war heiß heute. 😉

Live long and pros healthy,
 Martin

[selfhtml_user_24102020]

Hallo Martin,

die Zeiten als ich unter DOS 3.3 (und später auch noch) manchmal wochenlang oft vergeblich versucht habe Problemen auf den Grund zu gehen, sind bei mir glücklicherweise schon lange vorbei. Ich verschwende meine wertvolle immer geringer werdende Lebenszeit nicht mehr damit, irgendwelche Hard- und Softwarebugs zu ergründen. Es sei denn, es ist etwas, was mich sehr stört. So leistungsfähig Hard- und Software heutzutage sind, so komplex sind die Produkte auch. Da blickt eh keiner mehr wirklich durch und so eine Kleinigkeit macht mich auch nicht nervös.

Wenn es nochmal auftritt, warte ich ein paar Tage und wenn dann alles wieder stimmt ist es gut. Wenn nicht, dann hake ich da nochmal nach. Aber nur dann.

Keep Cool Martin. Du hast doch Kühlkörper...😉

Gruß Jürgen

[Matthias Scharwies]

Servus!

Das bedeutet ich habe einen einzeiligen Header, eine einzeilige main und einen einzeiligen footer. In der 2. mittleren Spalte habe im Header u.a. meine Navigation, in der main meinen Content und im footer das Impressum usw. hinterlegt.

Jetzt möchte ich möglichst ohne JavaScript (darüber habe noch fast gar keine Kenntnisse) zum Beispiel in der 3. Spalte rechts neben dem main Content eine Sidebar oder irgend etwas anderes hinterlegen.

Wie stelle ich das an?

Nutze den Vorteil von grid Layout, das man gar nicht so viel Festlegungen braucht:

body {
		 display: grid;
		 grid-template-columns: 1fr 3fr 1fr;  
		 /* grid-template-rows: auto auto auto;   ist gar nicht nötig */
		 background-color: black;
		 }

header {
			 grid-column: 1 / span -1;     /* -1 = 1. von rechts, falls du mal ne Spalte einfügst, musst du nix mehr ändern! */
			/*_ grid-row: 1;   ist eh klar! */
			 background-color: black;
			 }

main {
		 grid-column: 2 / span 1;  
		 /* grid-row: 2; */  
		 background-color: white;
		 padding-top: 5px;
		 padding-right: 10px;
		 padding-left: 10px;
		 font-size: 21px;
		 line-height: 1.5em;
		 }

aside {
/* keine CSS-Festlegung nötig, wenn es im Markup hinter dem main-Element steht. */
}

Gruß Jürgen

Herzliche Grüße

Matthias Scharwies

[selfhtml_user_24102020]

Hallo Matthias,

danke für die zusätzlichen Tipps!🙂

Gruß Jürgen