Inhalte bei einem 3 spaltigen Grid Layout in der 1. und 3. Spalte hinterlegen – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self?srt=yes Inhalte bei einem 3 spaltigen Grid Layout in der 1. und 3. Spalte hinterlegen Sat, 24 Oct 20 17:01:27 Z https://forum.selfhtml.org/self/2020/oct/24/inhalte-bei-einem-3-spaltigen-grid-layout-in-der-1-und-3-spalte-hinterlegen/1777001?srt=yes#m1777001 https://forum.selfhtml.org/self/2020/oct/24/inhalte-bei-einem-3-spaltigen-grid-layout-in-der-1-und-3-spalte-hinterlegen/1777001?srt=yes#m1777001 <p>Hallo!</p> <p>Wahrscheinlich ist es ganz einfach, aber ich weiß nicht, wie ich es machen muß. </p> <p>Ich habe folgendes Grid Layout in meiner main.css:</p> <pre><code class="block">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; } </code></pre> <p>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.</p> <p>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.</p> <p>Wie stelle ich das an?</p> <p>Gruß Jürgen</p> <div class="signature">-- <br> Es gibt kein Rezept für den Erfolg. Außer vielleicht das Leben bedingungslos zu akzeptieren, mit allem was es bringt. Hat ein meines Erachtens kluger Mensch gesagt, dessen Name ich leider nicht mehr weiß. </div> Inhalte bei einem 3 spaltigen Grid Layout in der 1. und 3. Spalte hinterlegen Sat, 24 Oct 20 17:48:00 Z https://forum.selfhtml.org/self/2020/oct/24/inhalte-bei-einem-3-spaltigen-grid-layout-in-der-1-und-3-spalte-hinterlegen/1777004?srt=yes#m1777004 https://forum.selfhtml.org/self/2020/oct/24/inhalte-bei-einem-3-spaltigen-grid-layout-in-der-1-und-3-spalte-hinterlegen/1777004?srt=yes#m1777004 <p>@@selfhtml_user_24102020</p> <blockquote> <p><code>grid-template-columns: 20% 60% 20%;</code></p> </blockquote> <p>Das macht wenig Sinn. Bei Grid musst du nicht mitrechnen, dass die einzelnen Teile sich zu 100% ergänzen.</p> <p>Wenn du die Breite im Verhältnis 1 : 3 : 1 aufteilen willst, dann gib das genauso an:<br> <code class="good">grid-template-columns: 1fr 3fr 1fr</code></p> <p>(<code>fr</code> steht für <em lang="en">fraction</em>.)</p> <blockquote> <p>Jetzt möchte ich möglichst ohne JavaScript (darüber habe noch fast gar keine Kenntnisse)</p> </blockquote> <p>JavaScript hat beim Stylen auch nie™ was zu suchen.</p> <blockquote> <p>zum Beispiel in der 3. Spalte rechts neben dem main Content eine Sidebar oder irgend etwas anderes hinterlegen.</p> <p>Wie stelle ich das an?</p> </blockquote> <p>Indem du dafür <code>grid-column: 3; grid-row: 2</code> angibst.</p> <p>Besser bist aber dran, wenn du deine <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/benannte_Linien_und_Rasterbereiche#Rasterbereiche" rel="nofollow noopener noreferrer">Bereiche benennst</a>.</p> <p> LLAP</p> <div class="signature">-- <br> <em>„Sag mir, wie Du Deine Maske trägst, und ich sage Dir, ob Du ein Idiot bist.“</em> —@Ann_Waeltin </div> Inhalte bei einem 3 spaltigen Grid Layout in der 1. und 3. Spalte hinterlegen Sat, 24 Oct 20 17:49:17 Z https://forum.selfhtml.org/self/2020/oct/24/inhalte-bei-einem-3-spaltigen-grid-layout-in-der-1-und-3-spalte-hinterlegen/1777005?srt=yes#m1777005 https://forum.selfhtml.org/self/2020/oct/24/inhalte-bei-einem-3-spaltigen-grid-layout-in-der-1-und-3-spalte-hinterlegen/1777005?srt=yes#m1777005 <p>Servus!</p> <blockquote> <p>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.</p> <p>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.</p> <p>Wie stelle ich das an?</p> </blockquote> <p>Nutze den Vorteil von grid Layout, das man gar nicht so viel Festlegungen braucht:</p> <pre><code class="block language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 1fr 3fr 1fr<span class="token punctuation">;</span> <span class="token comment">/* grid-template-rows: auto auto auto; ist gar nicht nötig */</span> <span class="token property">background-color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">header</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 1 / span -1<span class="token punctuation">;</span> <span class="token comment">/* -1 = 1. von rechts, falls du mal ne Spalte einfügst, musst du nix mehr ändern! */</span> <span class="token comment">/*_ grid-row: 1; ist eh klar! */</span> <span class="token property">background-color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">main</span> <span class="token punctuation">{</span> <span class="token property">grid-column</span><span class="token punctuation">:</span> 2 / span 1<span class="token punctuation">;</span> <span class="token comment">/* grid-row: 2; */</span> <span class="token property">background-color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">padding-top</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token property">padding-right</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token property">padding-left</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 21px<span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 1.5em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">aside</span> <span class="token punctuation">{</span> <span class="token comment">/* keine CSS-Festlegung nötig, wenn es im Markup hinter dem main-Element steht. */</span> <span class="token punctuation">}</span> </code></pre> <blockquote> <p>Gruß Jürgen</p> </blockquote> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> Inhalte bei einem 3 spaltigen Grid Layout in der 1. und 3. Spalte hinterlegen Mon, 26 Oct 20 23:49:24 Z https://forum.selfhtml.org/self/2020/oct/24/inhalte-bei-einem-3-spaltigen-grid-layout-in-der-1-und-3-spalte-hinterlegen/1777220?srt=yes#m1777220 https://forum.selfhtml.org/self/2020/oct/24/inhalte-bei-einem-3-spaltigen-grid-layout-in-der-1-und-3-spalte-hinterlegen/1777220?srt=yes#m1777220 <p>Hallo Gunnar,</p> <p>ja, einfacher kann die Lösung nicht sein. Und ich bin nicht von selber darauf gekommen. </p> <p>Meine Bereiche habe ich jetzt, wie von Dir empfohlen auch benannt. Und es eröffnen sich für mich nun ganz neue Möglichkeiten.</p> <p>Gleichzeitig sind auch neue Fragen aufgetreten, aber dafür ist es mir jetzt zu spät.</p> <p>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.</p> <p>Gruß Jürgen</p> <div class="signature">-- <br> Es gibt kein Rezept für den Erfolg. Außer vielleicht das Leben bedingungslos zu akzeptieren, mit allem was es bringt. Hat ein meines Erachtens kluger Mensch gesagt, dessen Name ich leider nicht mehr weiß. </div> Inhalte bei einem 3 spaltigen Grid Layout in der 1. und 3. Spalte hinterlegen Mon, 26 Oct 20 23:53:41 Z https://forum.selfhtml.org/self/2020/oct/24/inhalte-bei-einem-3-spaltigen-grid-layout-in-der-1-und-3-spalte-hinterlegen/1777221?srt=yes#m1777221 https://forum.selfhtml.org/self/2020/oct/24/inhalte-bei-einem-3-spaltigen-grid-layout-in-der-1-und-3-spalte-hinterlegen/1777221?srt=yes#m1777221 <p>Hallo Matthias,</p> <p>danke für die zusätzlichen Tipps! </p> <p>Gruß Jürgen</p> <div class="signature">-- <br> Es gibt kein Rezept für den Erfolg. Außer vielleicht das Leben bedingungslos zu akzeptieren, mit allem was es bringt. Hat ein meines Erachtens kluger Mensch gesagt, dessen Name ich leider nicht mehr weiß. </div> Inhalte bei einem 3 spaltigen Grid Layout in der 1. und 3. Spalte hinterlegen Tue, 27 Oct 20 08:01:09 Z https://forum.selfhtml.org/self/2020/oct/24/inhalte-bei-einem-3-spaltigen-grid-layout-in-der-1-und-3-spalte-hinterlegen/1777230?srt=yes#m1777230 https://forum.selfhtml.org/self/2020/oct/24/inhalte-bei-einem-3-spaltigen-grid-layout-in-der-1-und-3-spalte-hinterlegen/1777230?srt=yes#m1777230 <p>Hallo selfhtml_user_24102020,</p> <p>erschien der Schnipsel zweimal? Oder nur an der falschen Stelle?</p> <p>Wenn zweimal: Hmmm. Hast Du einen Link?</p> <p>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.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Inhalte bei einem 3 spaltigen Grid Layout in der 1. und 3. Spalte hinterlegen Tue, 27 Oct 20 15:08:28 Z https://forum.selfhtml.org/self/2020/oct/24/inhalte-bei-einem-3-spaltigen-grid-layout-in-der-1-und-3-spalte-hinterlegen/1777263?srt=yes#m1777263 https://forum.selfhtml.org/self/2020/oct/24/inhalte-bei-einem-3-spaltigen-grid-layout-in-der-1-und-3-spalte-hinterlegen/1777263?srt=yes#m1777263 <p>Hallo Rolf,</p> <p>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. </p> <p>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.</p> <p>Der Ursache gehe ich auch nicht weiter nach, es sei denn, es würde öfter auftreten. Scheint ein "thermisches Problem" gewesen zu sein. </p> <p>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.</p> <p>Aber die stehen in einem mörderischen Wettbewerb und müssen wahrscheinlich, um zu überleben, auf diese Weise Kosten sparen.</p> <p>Gruß Jürgen</p> <div class="signature">-- <br> Es gibt kein Rezept für den Erfolg. Außer vielleicht das Leben bedingungslos zu akzeptieren, mit allem was es bringt. Hat ein meines Erachtens kluger Mensch gesagt, dessen Name ich leider nicht mehr weiß. </div> Inhalte bei einem 3 spaltigen Grid Layout in der 1. und 3. Spalte hinterlegen Tue, 27 Oct 20 15:18:09 Z https://forum.selfhtml.org/self/2020/oct/24/inhalte-bei-einem-3-spaltigen-grid-layout-in-der-1-und-3-spalte-hinterlegen/1777267?srt=yes#m1777267 https://forum.selfhtml.org/self/2020/oct/24/inhalte-bei-einem-3-spaltigen-grid-layout-in-der-1-und-3-spalte-hinterlegen/1777267?srt=yes#m1777267 <p>Hallo Jürgen,</p> <blockquote> <p>Das Problem hat sich glücklicherweise aber (so habe ich das am liebsten, passiert nur leider äußerst selten) von selbst gelöst.</p> </blockquote> <p>solche Fälle kenne ich auch, aber genau das macht mich dann nervös. Denn solange ich nicht weiß, <strong>warum</strong> ein Problem (oder ein Symptom) plötzlich verschwunden ist, kann es jederzeit wieder auftauchen. Und dann fange ich wieder an zu suchen.</p> <blockquote> <p>Der Ursache gehe ich auch nicht weiter nach, es sei denn, es würde öfter auftreten.</p> </blockquote> <p>Ich würde in der Situation auch nicht beliebig viel Aufwand reinstecken, aber doch zumindest noch versuchen, das Geheimnis zu ergründen.</p> <blockquote> <p>Scheint ein "thermisches Problem" gewesen zu sein. </p> </blockquote> <p>Ja, war heiß heute. </p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Paradox: Wieso heißen die Dinger Kühlkörper, obwohl sie höllisch heiß werden? </div> Inhalte bei einem 3 spaltigen Grid Layout in der 1. und 3. Spalte hinterlegen Thu, 29 Oct 20 00:35:08 Z https://forum.selfhtml.org/self/2020/oct/24/inhalte-bei-einem-3-spaltigen-grid-layout-in-der-1-und-3-spalte-hinterlegen/1777325?srt=yes#m1777325 https://forum.selfhtml.org/self/2020/oct/24/inhalte-bei-einem-3-spaltigen-grid-layout-in-der-1-und-3-spalte-hinterlegen/1777325?srt=yes#m1777325 <p>Hallo Martin,</p> <p>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.</p> <p>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.</p> <p>Keep Cool Martin. Du hast doch Kühlkörper... </p> <p>Gruß Jürgen</p> <div class="signature">-- <br> Es gibt kein Rezept für den Erfolg. Außer vielleicht das Leben bedingungslos zu akzeptieren, mit allem was es bringt. Hat ein meines Erachtens kluger Mensch gesagt, dessen Name ich leider nicht mehr weiß. </div>