tag:forum.selfhtml.org,2005:/self grid, zwei Spalten, links Text, rechts bilder, scrollbalken verhindern – SELFHTML-Forum 2020-11-24T10:21:08Z https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778354?srt=yes#m1778354 michaah 2020-11-23T19:02:48Z 2020-11-23T19:33:24Z grid, zwei Spalten, links Text, rechts bilder, scrollbalken verhindern <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> https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778356?srt=yes#m1778356 Rolf B 2020-11-23T19:43:27Z 2020-11-23T19:45:48Z grid, zwei Spalten, links Text, rechts bilder, scrollbalken verhindern <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> https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778362?srt=yes#m1778362 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-11-23T21:25:04Z 2020-11-23T21:25:04Z grid, zwei Spalten, links Text, rechts bilder, scrollbalken verhindern <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> https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778368?srt=yes#m1778368 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-11-23T21:41:47Z 2020-11-23T21:41:47Z grid, zwei Spalten, links Text, rechts bilder, scrollbalken verhindern <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> https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778357?srt=yes#m1778357 michaah 2020-11-23T20:40:58Z 2020-11-24T06:23:20Z grid, zwei Spalten, links Text, rechts bilder, scrollbalken verhindern <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> https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778358?srt=yes#m1778358 Rolf B 2020-11-23T21:00:15Z 2020-11-23T21:00:15Z grid, zwei Spalten, links Text, rechts bilder, scrollbalken verhindern <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> https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778375?srt=yes#m1778375 michaah 2020-11-23T22:43:21Z 2020-11-23T22:43:21Z grid, zwei Spalten, links Text, rechts bilder, scrollbalken verhindern <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> https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778366?srt=yes#m1778366 Rolf B 2020-11-23T21:34:12Z 2020-11-23T21:34:12Z grid, zwei Spalten, links Text, rechts bilder, scrollbalken verhindern <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> https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778373?srt=yes#m1778373 michaah 2020-11-23T22:36:53Z 2020-11-23T22:36:53Z grid, zwei Spalten, links Text, rechts bilder, scrollbalken verhindern <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> https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778369?srt=yes#m1778369 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-11-23T21:45:15Z 2020-11-23T21:45:15Z grid, zwei Spalten, links Text, rechts bilder, scrollbalken verhindern <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> https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778372?srt=yes#m1778372 michaah 2020-11-23T22:33:52Z 2020-11-23T22:33:52Z grid, zwei Spalten, links Text, rechts bilder, scrollbalken verhindern <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> https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778387?srt=yes#m1778387 Rolf B 2020-11-24T08:07:32Z 2020-11-24T08:07:32Z grid, zwei Spalten, links Text, rechts bilder, scrollbalken verhindern <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> https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778395?srt=yes#m1778395 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-11-24T09:01:08Z 2020-11-24T10:20:29Z grid, zwei Spalten, links Text, rechts bilder, scrollbalken verhindern <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> https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778398?srt=yes#m1778398 Rolf B 2020-11-24T10:03:58Z 2020-11-24T10:20:07Z grid, zwei Spalten, links Text, rechts bilder, scrollbalken verhindern <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> https://forum.selfhtml.org/self/2020/nov/23/grid-zwei-spalten-links-text-rechts-bilder-scrollbalken-verhindern/1778402?srt=yes#m1778402 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-11-24T10:21:08Z 2020-11-24T10:21:08Z grid, zwei Spalten, links Text, rechts bilder, scrollbalken verhindern <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>