grid, zwei Spalten, links Text, rechts bilder, scrollbalken verhindern – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self grid, zwei Spalten, links Text, rechts bilder, scrollbalken verhindern Mon, 23 Nov 20 19:02:48 Z https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778354#m1778354 https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778354#m1778354 <p>Hi,</p> <p>in einen Zweispalten-grid-design soll der Text in den linken Zellen in die Bilder der rechten Zellen überfließen:</p> <pre><code class="block language-css"><span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<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 20em<span class="token punctuation">;</span> <span class="token comment">/* <-- das soll möglichst so bleiben; bie breiter werdendem Viewport sollen die Bilder eben (zunächst) nicht skalieren, aber der Text immer mehr platz bekommen */</span> <span class="token punctuation">}</span> </code></pre> <p>Gegenwärtig ist es so, dass der Text die linken Zellen auf die notwendige Breite aufdrückt (wie das Text in fr-Zellen, bzw. Spalten nunmal macht, der Inhalt wird dadurch breiter als den Viewport) und die Bilder nach rechts aus der Zelle drückt.</p> <p>Wie muss ich die Rahmenbedingungen setzen, damit das wie gewünscht klappt. (Ich hatte das schonmal hinbekommen, mein Beispiel aber gelöscht, was mich jetzt etwas nevt; ich hoffe meine spärlichen Angaben reichen aus)</p> grid, zwei Spalten, links Text, rechts bilder, scrollbalken verhindern Mon, 23 Nov 20 19:43:27 Z https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778356#m1778356 https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778356#m1778356 <p>Hallo michaah,</p> <p>suchst Du <a href="https://jsfiddle.net/Rolf_b/orvmf2j6/" rel="noopener noreferrer">so was</a>?</p> <p>Das einzig Spezielle war eigentlich ein max-width: 100% für das img Element.</p> <p>Das h2 möchte vermutlich lieber ein h1 sein, aber so ein Artikel steht ja zumeist nicht allein auf der Seite, und der Rest der Seite steht nicht im Fiddle.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> grid, zwei Spalten, links Text, rechts bilder, scrollbalken verhindern Mon, 23 Nov 20 21:25:04 Z https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778362#m1778362 https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778362#m1778362 <p>@@michaah</p> <blockquote> <p>in einen Zweispalten-grid-design soll der Text in den linken Zellen in die Bilder der rechten Zellen überfließen:</p> </blockquote> <p>Grid-Zellen können sich überlappen.</p> <p>In meinem <a href="https://codepen.io/gunnarbittersmann/pen/XWKvYNa" rel="noopener noreferrer">Beispiel</a> geht <code>main</code> über die volle Breite; <code>img</code> nur über einen Teil davon.</p> <p> LLAP</p> <div class="signature">-- <br> Wenn der Faschismus wiederkehrt, wird er nicht sagen: „Hallo, ich bin der Faschismus.“ Er wird sagen: „Hört auf zu zählen! Ich habe gewonnen!“ </div> grid, zwei Spalten, links Text, rechts bilder, scrollbalken verhindern Mon, 23 Nov 20 21:41:47 Z https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778368#m1778368 https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778368#m1778368 <p>@@michaah</p> <blockquote> <p>in einen Zweispalten-grid-design soll der Text in den linken Zellen in die Bilder der rechten Zellen überfließen:</p> </blockquote> <p>Bist du sicher, dass das keine <a href="https://codepen.io/gunnarbittersmann/pen/bGeXKaV" rel="noopener noreferrer">Hintergrundbilder</a> sind?</p> <p> LLAP</p> <div class="signature">-- <br> Wenn der Faschismus wiederkehrt, wird er nicht sagen: „Hallo, ich bin der Faschismus.“ Er wird sagen: „Hört auf zu zählen! Ich habe gewonnen!“ </div> grid, zwei Spalten, links Text, rechts bilder, scrollbalken verhindern Mon, 23 Nov 20 20:40:58 Z https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778357#m1778357 https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778357#m1778357 <blockquote> <p>Hallo michaah,</p> <p>suchst Du <a href="https://jsfiddle.net/Rolf_b/orvmf2j6/" rel="noopener noreferrer">so was</a>?</p> </blockquote> <p>Nein. Der Text in deinen Beispiel bricht um. Das ist ja easy-peasy ;-)</p> <p>Ich möchte dass meine (erläuternden) Einzeilertexte in den linken Zellen bei engem Viewport (zunächst) in dir jeweils rechten Zellen <strong>überfließt</strong>. Je breiter dann der Viewport aufgezogen wird (bzw je breiter die devices werden) möchte ich das in die Breite ziehen, somit den Text quasi aus dem Bild herausziehen.</p> <p>Ich hatte das aber wohl doch etwas anders gelöst als ich mich zunächst erinnerte, habe dann in den Tiefen der Verzeichnisse doch noch ein abgespeichertes Zwischenergebnis gefunden. Dort wurde die Gritbreite so berechnet:</p> <pre><code class="block language-css"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 30em<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">main</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</span><span class="token punctuation">:</span> <span class="token string">"header header"</span> min-content <span class="token string">"bli bli"</span> <span class="token string">"details details"</span> <span class="token string">"bla blubb"</span> <span class="token string">"bla blubb"</span> / <span class="token function">calc</span><span class="token punctuation">(</span><span class="token punctuation">(</span>130% - 30em<span class="token punctuation">)</span> + 5em<span class="token punctuation">)</span> 1fr<span class="token punctuation">;</span> <span class="token punctuation">}</span> ... <span class="token punctuation">}</span> </code></pre> <p>Damit funktioniert die Überlappung ganz gut, aber offen gestanden versteh ich nicht (mehr) warum ...</p> grid, zwei Spalten, links Text, rechts bilder, scrollbalken verhindern Mon, 23 Nov 20 21:00:15 Z https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778358#m1778358 https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778358#m1778358 <p>Hallo michaah,</p> <p>okay. Also z-index setzen damit der Text über dem Bild ist, und etwas Spielerei mit den Grid-Bereichen.</p> <p>Damit Text beim Bild bleibt, einen Container um die Zeilen. Und der Container ist das Grid. Ein einziges Grid mit Auto-Placement würde Dir die Bilder unter den Text stellen (es sei denn, ich bin mal wieder zu dumm für Grid).</p> <p><a href="https://jsfiddle.net/Rolf_b/buy7ckrz/" rel="noopener noreferrer">So was?</a></p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> grid, zwei Spalten, links Text, rechts bilder, scrollbalken verhindern Mon, 23 Nov 20 22:43:21 Z https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778375#m1778375 https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778375#m1778375 <blockquote> <p>okay ... und etwas Spielerei mit den Grid-Bereichen.</p> </blockquote> <p>jahhhhhh ....hmmmmmm <em>kopfkratz</em></p> <blockquote> <p>Damit Text beim Bild bleibt, einen Container um die Zeilen. Und der Container ist das Grid. Ein einziges Grid mit Auto-Placement würde Dir die Bilder unter den Text stellen (es sei denn, ich bin mal wieder zu dumm für Grid).</p> <p><a href="https://jsfiddle.net/Rolf_b/buy7ckrz/" rel="noopener noreferrer">So was?</a></p> <p><em>Rolf</em></p> </blockquote> <p>Es tut in jedem Fall was es für mich tuen sollte. Aber das figure Element will verstanden sein ... das ist mir bislang noch nicht in ausreichendem Maß gelungen.</p> <p>Danke.</p> grid, zwei Spalten, links Text, rechts bilder, scrollbalken verhindern Mon, 23 Nov 20 21:34:12 Z https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778366#m1778366 https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778366#m1778366 <p>Hallo Gunnar,</p> <p>okay, ich hatte es mit Nummern gemacht.</p> <p>Aber was ist der Unterschied zwischen full-main und main-end? Ich kannte bisher nur letzteres.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> grid, zwei Spalten, links Text, rechts bilder, scrollbalken verhindern Mon, 23 Nov 20 22:36:53 Z https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778373#m1778373 https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778373#m1778373 <blockquote> <p>@@michaah</p> <blockquote> <p>in einen Zweispalten-grid-design soll der Text in den linken Zellen in die Bilder der rechten Zellen überfließen:</p> </blockquote> <p>Grid-Zellen können sich überlappen.</p> <p>In meinem <a href="https://codepen.io/gunnarbittersmann/pen/XWKvYNa" rel="noopener noreferrer">Beispiel</a> geht <code>main</code> über die volle Breite; <code>img</code> nur über einen Teil davon.</p> <p> LLAP</p> </blockquote> <p>Das schaut auch nachvollziehbar aus. Werde ich mir morgen genau anschauen.</p> <p>Danke.</p> grid, zwei Spalten, links Text, rechts bilder, scrollbalken verhindern Mon, 23 Nov 20 21:45:15 Z https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778369#m1778369 https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778369#m1778369 <p>@@Rolf B</p> <blockquote> <p>Hallo Gunnar,</p> <p>okay, ich hatte es mit Nummern gemacht.</p> </blockquote> <p>Und media query, den man nicht braucht.</p> <blockquote> <p>Aber was ist der Unterschied zwischen full-main und main-end?</p> </blockquote> <p>Das eine ist falsch; das andere richtig.</p> <p>Im Pen berichtigt.</p> <p> LLAP</p> <div class="signature">-- <br> Wenn der Faschismus wiederkehrt, wird er nicht sagen: „Hallo, ich bin der Faschismus.“ Er wird sagen: „Hört auf zu zählen! Ich habe gewonnen!“ </div> grid, zwei Spalten, links Text, rechts bilder, scrollbalken verhindern Mon, 23 Nov 20 22:33:52 Z https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778372#m1778372 https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778372#m1778372 <p>Hi</p> <blockquote> <p>Bist du sicher, dass das keine <a href="https://codepen.io/gunnarbittersmann/pen/bGeXKaV" rel="noopener noreferrer">Hintergrundbilder</a> sind?</p> </blockquote> <p>Es sind definitiv keine Hintergründe sondern Inhalte. Das ist sicher.</p> <p>Technisch gesehen ist das für mich allerdings das am einfachsten nachvollziehbare Beispiel von euch Beiden. Da fällt es mir richtig schwer einen Inhalt nicht als HG zu behandeln.</p> <p>Danke dafür ;-) .</p> grid, zwei Spalten, links Text, rechts bilder, scrollbalken verhindern Tue, 24 Nov 20 08:07:32 Z https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778387#m1778387 https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778387#m1778387 <p>Hallo michaah,</p> <p>wenn Du das figure-Element nicht verstehst, dann kann das daran liegen, dass es daran nicht viel zu verstehen gibt und Du tiefen Sinn suchst, wo keiner ist.</p> <p><figure> ist eins der Elemente aus dem <em>semantischen Web</em>. D.h. man soll das Markup seiner Seiten so gestalten, dass die HTML Elemente aussagen, welche Art von Inhalt hier vorliegt. Zu Beginn waren HTML Elemente eher auf „wie soll das aussehen“ gestrickt, denk an <i> für italic, <u> für underline. Für's Aussehen ist heute CSS da. Das HTML soll vor allem aussagen: was bedeutet das.</p> <p><figure> steht für Bilder, Illustrationen, Diagramme, Codeschnipsel etc, auf die im Hauptdokument Bezug genommen wird, die man aber auch in einen anderen Teil des Dokuments oder in einen Anhang verlegen könnte. Zu einer figure gehört normalerweise auch einen Titel, der steckt in <figcaption>. <figcaption> muss erstes oder letztes Element in der <figure> sein.</p> <p>Mehr gibt's da nicht zu verstehen. Zugegeben, Browser bringen ein paar Default-Formatierungen für figures mit (Abstände und Ränder), die Du natürlich nach Wunsch anpassen kannst.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> grid, zwei Spalten, links Text, rechts bilder, scrollbalken verhindern Tue, 24 Nov 20 09:01:08 Z https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778395#m1778395 https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778395#m1778395 <p>@@Rolf B</p> <blockquote> <p><figure> ist eins der Elemente aus dem <em>semantischen Web</em>.</p> </blockquote> <p>Nein, überhaupt nicht.</p> <p>Das <a href="https://de.wikipedia.org/wiki/Semantic_Web" rel="nofollow noopener noreferrer">semantische Web</a> ist was völlig anderes und hat nichts mit Elementtypen zu tun.</p> <p> LLAP</p> <div class="signature">-- <br> Wenn der Faschismus wiederkehrt, wird er nicht sagen: „Hallo, ich bin der Faschismus.“ Er wird sagen: „Hört auf zu zählen! Ich habe gewonnen!“ </div> grid, zwei Spalten, links Text, rechts bilder, scrollbalken verhindern Tue, 24 Nov 20 10:03:58 Z https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778398#m1778398 https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778398#m1778398 <p>Hallo Gunnar,</p> <p>okay, wieder was gelernt.</p> <p>Gemeint habe ich: Es ist ein Element, das mit HTML 5 eingeführt wurde, um Semantik, also Bedeutung, ins Markup zu bringen.</p> <p>Dass "semantisches Web" eine andere Semantik einführt, hatte ich nicht unterschieden.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> grid, zwei Spalten, links Text, rechts bilder, scrollbalken verhindern Tue, 24 Nov 20 10:21:08 Z https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778402#m1778402 https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778402#m1778402 <p>@@Rolf B</p> <blockquote> <p>Dass "semantisches Web" eine andere Semantik einführt, hatte ich nicht unterschieden.</p> </blockquote> <p>Und ich rede mir da seit Jahren den Mund fusslig:</p> <ul> <li> <p><a href="https://forum.selfhtml.org/self/2005/jan/15/linktipp-semantischer-code-ist-der-anfang-von-gutem-design/748300#m748300" rel="noopener noreferrer">https://forum.selfhtml.org/self/2005/jan/15/linktipp-semantischer-code-ist-der-anfang-von-gutem-design/748300#m748300</a></p> </li> <li> <p><a href="https://forum.selfhtml.org/self/2005/jul/29/was-ist-semantik/848226#m848226" rel="noopener noreferrer">https://forum.selfhtml.org/self/2005/jul/29/was-ist-semantik/848226#m848226</a></p> </li> <li> <p><a href="https://forum.selfhtml.org/self/2007/may/5/element-fuer-verfasser-autor-eines-textes-semantisch/1115916#m1115916" rel="noopener noreferrer">https://forum.selfhtml.org/self/2007/may/5/element-fuer-verfasser-autor-eines-textes-semantisch/1115916#m1115916</a></p> </li> <li> <p><a href="https://forum.selfhtml.org/self/2010/jan/22/ein-paar-fragen-zum-thema-webdesign/1423166#m1423166" rel="noopener noreferrer">https://forum.selfhtml.org/self/2010/jan/22/ein-paar-fragen-zum-thema-webdesign/1423166#m1423166</a> ff.</p> </li> </ul> <p> LLAP</p> <div class="signature">-- <br> Wenn der Faschismus wiederkehrt, wird er nicht sagen: „Hallo, ich bin der Faschismus.“ Er wird sagen: „Hört auf zu zählen! Ich habe gewonnen!“ </div>