Bilder und Icons unterschiedlich plazieren per CSS – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self?srt=yes Bilder und Icons unterschiedlich plazieren per CSS Sat, 19 Jun 21 14:54:11 Z https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789363?srt=yes#m1789363 https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789363?srt=yes#m1789363 <p>Hallo zusammen,</p> <p>ich stehe hier vor einem kleinen Problem und habe nicht wirklich eine Idee zu einem Lösungs<strong>ansatz</strong> .</p> <p>Rahmenbedingungen: Etliche Leute sollen Beiträge für eine interne Informationsseite schreiben. Die Texte kommen in Markdown daher (schon das ist problematisch genug, den Leuten beizubiegen ...).</p> <p>Hugo wirft dann per entsprechenden Templates die fertigen HTML-Seiten raus.</p> <p>Im Inhalt können Bilder vorkommen, diese sollen in voller Größe mittig plaziert werden - kein Problem.</p> <p>Schwierig wird's jetzt, weil in den Texten auch PDF-Dokumente verlinkt werden sollen. Der Transparenz wegen soll den verlinkten Titeln dieser Dokumente jeweils ein pdf-Icon vorangestellt werden.</p> <p>Das Problem: Wenn ich Bilder mittig auf die Seite positioniere, dann kommen auch die PDF-Icons mittig. Ich kann in markdown eben keine Klassen zuordnen.</p> <p>Wie kann ich jetzt beispielsweise im CSS definieren, daß</p> <ul> <li>Bilder bis 64x64px eben icons sind und im Textfluss bleiben</li> <li>größere Bilder aber als Bilder, Fotos, Grafiken zu betrachten sind und in voller Größe mittig auf der Seite zu erscheinen haben?</li> </ul> <p>Irgendwie hab ich keine Idee, wonach ich suchen muß ...</p> Bilder und Icons unterschiedlich plazieren per CSS Sat, 19 Jun 21 15:10:08 Z https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789364?srt=yes#m1789364 https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789364?srt=yes#m1789364 <p>Hallo,</p> <blockquote> <p>Etliche Leute sollen Beiträge für eine interne Informationsseite schreiben. Die Texte kommen in Markdown daher (schon das ist problematisch genug, den Leuten beizubiegen ...).</p> <p>Hugo wirft dann per entsprechenden Templates die fertigen HTML-Seiten raus.</p> </blockquote> <p>wer ist Hugo? .oO(?)</p> <blockquote> <p>Wie kann ich jetzt beispielsweise im CSS definieren, daß</p> <ul> <li>Bilder bis 64x64px eben icons sind und im Textfluss bleiben</li> <li>größere Bilder aber als Bilder, Fotos, Grafiken zu betrachten sind und in voller Größe mittig auf der Seite zu erscheinen haben?</li> </ul> </blockquote> <p>An der Bildgröße kannst du dich nicht orientieren, die ist für CSS nicht zugänglich. Aber ein Icon für einen bestimmten Dateityp hat doch wahrscheinlich immer denselben Dateinamen. Da könntest du eventuell mit dem <a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren/Teil%C3%BCbereinstimmung" rel="nofollow noopener noreferrer">Attributselektor</a> was anfangen:</p> <pre><code class="block language-css"><span class="token selector">img[src*="pdf"]</span> <span class="token punctuation">{</span> <span class="token comment">/* CSS-Regeln für ein PDF-Icon */</span> <span class="token punctuation">}</span> </code></pre> <p>Vielleicht kommst du damit ein Stück weiter ...</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Fische, die bellen, beißen nicht. </div> Bilder und Icons unterschiedlich plazieren per CSS Sat, 19 Jun 21 15:23:57 Z https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789366?srt=yes#m1789366 https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789366?srt=yes#m1789366 <p>Servus!</p> <blockquote> <p>Hallo zusammen,</p> <p>ich stehe hier vor einem kleinen Problem und habe nicht wirklich eine Idee zu einem Lösungs<strong>ansatz</strong> .</p> <p>Rahmenbedingungen: Etliche Leute sollen Beiträge für eine interne Informationsseite schreiben. Die Texte kommen in Markdown daher (schon das ist problematisch genug, den Leuten beizubiegen ...).</p> </blockquote> <p>Für schwierigeres Layout kannst du im Hugo auch HTML-Markup verwenden!</p> <ul> <li><a href="https://gohugo.io/content-management/formats/" rel="nofollow noopener noreferrer">https://gohugo.io/content-management/formats/</a></li> </ul> <blockquote> <p>Schwierig wird's jetzt, weil in den Texten auch PDF-Dokumente verlinkt werden sollen. Der Transparenz wegen soll den verlinkten Titeln dieser Dokumente jeweils ein pdf-Icon vorangestellt werden.</p> <p>Irgendwie hab ich keine Idee, wonach ich suchen muß ...</p> </blockquote> <p>Du kannst in CSS alles selektieren und benötigst keine Klassen.</p> <p>In diesem Tutorial erhalten zip und mp3-Dateien unterschiedliche Icons:</p> <p><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Links/Gestaltung_mit_CSS#Links_auf_unterschiedliche_Dokumenttypen_kennzeichnen" rel="nofollow noopener noreferrer">HTML/Tutorials/Links/Gestaltung_mit_CSS#Links_auf_unterschiedliche_Dokumenttypen_kennzeichnen</a></p> <p>Da könntest du vor jeden Link, der auf <code>.pdf endet</code>, ein SVG-Icon tun und das würde nicht als Bild im Markdown, bzw. dann im HTML-Markup erscheinen.</p> <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> Bilder und Icons unterschiedlich plazieren per CSS Sat, 19 Jun 21 15:17:56 Z https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789365?srt=yes#m1789365 https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789365?srt=yes#m1789365 <p>Hallo,</p> <blockquote> <p>Vielleicht kommst du damit ein Stück weiter ...</p> </blockquote> <p>Noch weiter vermutlich mit einem zusätzlichen ‚not‘…</p> <p>Gruß<br> Kalk</p> Bilder und Icons unterschiedlich plazieren per CSS Sat, 19 Jun 21 15:25:05 Z https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789367?srt=yes#m1789367 https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789367?srt=yes#m1789367 <p>Servus!</p> <blockquote> <p>Hallo,</p> <blockquote> <p>Etliche Leute sollen Beiträge für eine interne Informationsseite schreiben. Die Texte kommen in Markdown daher (schon das ist problematisch genug, den Leuten beizubiegen ...).</p> <p>Hugo wirft dann per entsprechenden Templates die fertigen HTML-Seiten raus.</p> </blockquote> <p>wer ist Hugo? .oO(?)</p> </blockquote> <p>Im Wiki: <a href="https://wiki.selfhtml.org/wiki/Content_Management_System#Alternative:_statische_Homepage-Generatoren" rel="nofollow noopener noreferrer">Content_Management_System#Alternative:_statische_Homepage-Generatoren</a></p> <p>Gerade kleinere Vereine und Webauftritte, die vorher jahrelang Eigenlösungen oder ein gehacktes Wordpress hatten, steigen auf diesen Static Site Generator um.</p> <p>Der verträgt Markdown, aber auch reines HTML und wandelt das gleich nach dem Hochladen in fertige HTML-Dateien um, die er dann bei jedem Request gleich ausliefern kann. Angeblich ist das schneller, als sich erst aus den Datenbanken die einzelnen Bestandteile zusammenbauen zu müssen.</p> <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> Bilder und Icons unterschiedlich plazieren per CSS Sat, 19 Jun 21 19:27:51 Z https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789384?srt=yes#m1789384 https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789384?srt=yes#m1789384 <blockquote> <p>An der Bildgröße kannst du dich nicht orientieren, die ist für CSS nicht zugänglich. Aber ein Icon für einen bestimmten Dateityp hat doch wahrscheinlich immer denselben Dateinamen. Da könntest du eventuell mit dem <a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren/Teil%C3%BCbereinstimmung" rel="nofollow noopener noreferrer">Attributselektor</a> was anfangen:</p> <pre><code class="block language-css"><span class="token selector">img[src*="pdf"]</span> <span class="token punctuation">{</span> <span class="token comment">/* CSS-Regeln für ein PDF-Icon */</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>Manchmal sieht man den Wald vor Bäumen nicht. Das setze ich seit Jahren ein, um externe Links zu kennzeichnen. Und zudem war mir nicht geläufig, daß ich damit auch nicht nur am Anfang, sondern auch <em>irgendwo zwischendrin</em> selektieren kann <code>*=</code>.</p> <p>Besten Dank!! So funzt das tatsächlich und ich kann alle anderen <code>img</code> zentrieren.</p> Bilder und Icons unterschiedlich plazieren per CSS Sat, 19 Jun 21 15:43:49 Z https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789368?srt=yes#m1789368 https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789368?srt=yes#m1789368 <p>@@Matthias Scharwies</p> <blockquote> <p><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Links/Gestaltung_mit_CSS#Links_auf_unterschiedliche_Dokumenttypen_kennzeichnen" rel="nofollow noopener noreferrer">HTML/Tutorials/Links/Gestaltung_mit_CSS#Links_auf_unterschiedliche_Dokumenttypen_kennzeichnen</a></p> </blockquote> <p>Mal reingeschaut, ob … oh, es ist mit <code>type</code>-Attribut umgesetzt, nicht mit Klasse. Klasse!</p> <p>Ist doch schön, wenn man ein Beispiel im Wiki auch mal loben kann. </p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> Bilder und Icons unterschiedlich plazieren per CSS Sat, 19 Jun 21 19:16:41 Z https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789381?srt=yes#m1789381 https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789381?srt=yes#m1789381 <blockquote> <p>Servus!</p> <blockquote> <p>Hallo zusammen,</p> <p>ich stehe hier vor einem kleinen Problem und habe nicht wirklich eine Idee zu einem Lösungs<strong>ansatz</strong> .</p> <p>Rahmenbedingungen: Etliche Leute sollen Beiträge für eine interne Informationsseite schreiben. Die Texte kommen in Markdown daher (schon das ist problematisch genug, den Leuten beizubiegen ...).</p> </blockquote> <p>Für schwierigeres Layout kannst du im Hugo auch HTML-Markup verwenden!</p> <ul> <li><a href="https://gohugo.io/content-management/formats/" rel="nofollow noopener noreferrer">https://gohugo.io/content-management/formats/</a></li> </ul> </blockquote> <p>Was <em>ich</em> kann, das steht leider nicht zur Debatte :( Ich bin schon froh, wenn die Mitstreiter sich auf <em>markdown mit einem WYSIWIG-Editor</em> einlassen und nicht blind ein Wordpress installieren ohne eine Idee, wie die bereits existierenden hunderte Seiten migriert werden können.</p> <blockquote> <blockquote> <p>Schwierig wird's jetzt, weil in den Texten auch PDF-Dokumente verlinkt werden sollen. Der Transparenz wegen soll den verlinkten Titeln dieser Dokumente jeweils ein pdf-Icon vorangestellt werden.</p> <p>Irgendwie hab ich keine Idee, wonach ich suchen muß ...</p> </blockquote> <p>Du kannst in CSS alles selektieren und benötigst keine Klassen.</p> <p>In diesem Tutorial erhalten zip und mp3-Dateien unterschiedliche Icons:</p> <p><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Links/Gestaltung_mit_CSS#Links_auf_unterschiedliche_Dokumenttypen_kennzeichnen" rel="nofollow noopener noreferrer">HTML/Tutorials/Links/Gestaltung_mit_CSS#Links_auf_unterschiedliche_Dokumenttypen_kennzeichnen</a></p> <p>Da könntest du vor jeden Link, der auf <code>.pdf endet</code>, ein SVG-Icon tun und das würde nicht als Bild im Markdown, bzw. dann im HTML-Markup erscheinen.</p> </blockquote> <p>Das ist wirklich ein guter Ansatz, allerdings nicht <code>.pdf</code> am <em>Ende</em>, sondern <em>enthalten</em> als Bedingung (gelegentlich könnte ein <code>dateiname.pdf#page=12</code> oder sowas auftauchen).</p> Bilder und Icons unterschiedlich plazieren per CSS Sat, 19 Jun 21 19:31:27 Z https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789385?srt=yes#m1789385 https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789385?srt=yes#m1789385 <blockquote> <p>Im Wiki: <a href="https://wiki.selfhtml.org/wiki/Content_Management_System#Alternative:_statische_Homepage-Generatoren" rel="nofollow noopener noreferrer">Content_Management_System#Alternative:_statische_Homepage-Generatoren</a></p> <p>Gerade kleinere Vereine und Webauftritte, die vorher jahrelang Eigenlösungen oder ein gehacktes Wordpress hatten, steigen auf diesen Static Site Generator um.</p> <p>Der verträgt Markdown, aber auch reines HTML und wandelt das gleich nach dem Hochladen in fertige HTML-Dateien um, die er dann bei jedem Request gleich ausliefern kann. Angeblich ist das schneller, als sich erst aus den Datenbanken die einzelnen Bestandteile zusammenbauen zu müssen.</p> </blockquote> <p>Genau der ist's. Läuft super. In diesem Fall ist's nicht ganz so kritisch, aber meine anderen Webseiten laufen draußen im echten Internet, und da bin ich ganz froh, daß ich mir nicht dauernd 'n Kopf um Backups und Updates und Sicherheitslücken etc. machen muß. Und schnell ist die Seitenauslieferung tatsächlich.</p> Bilder und Icons unterschiedlich plazieren per CSS Sat, 19 Jun 21 15:45:41 Z https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789369?srt=yes#m1789369 https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789369?srt=yes#m1789369 <p>Servus!</p> <blockquote> <p>@@Matthias Scharwies</p> <blockquote> <p><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Links/Gestaltung_mit_CSS#Links_auf_unterschiedliche_Dokumenttypen_kennzeichnen" rel="nofollow noopener noreferrer">HTML/Tutorials/Links/Gestaltung_mit_CSS#Links_auf_unterschiedliche_Dokumenttypen_kennzeichnen</a></p> </blockquote> <p>Mal reingeschaut, ob … oh, es ist mit <code>type</code>-Attribut umgesetzt, nicht mit Klasse. Klasse!</p> <p>Ist doch schön, wenn man ein Beispiel im Wiki auch mal loben kann. </p> </blockquote> <p>Danke!</p> <p>Und jetzt machen wir alle die Rechner aus und schauen "unseren" Jungs beim Spielen zu!</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> "Wenn wir hier nicht gewinnen, treten wir ihnen wenigstens den Rasen kaputt!" </div> Fußball Sat, 19 Jun 21 15:54:56 Z https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789370?srt=yes#m1789370 https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789370?srt=yes#m1789370 <p>Hallo Matthias,</p> <blockquote> <p>Und jetzt machen wir alle die Rechner aus und schauen "unseren" Jungs beim Spielen zu!</p> </blockquote> <p>spielen? Du meinst dieses komische Spiel, bei dem 20 erwachsene Männer hinter einem Ball herrennen und ihn treten? - Ohne mich, danke. Dem konnte ich noch nie einen Reiz abgewinnen. Weder in jungen Jahren als Spieler, noch später als Zuschauer.<br> Und dabei ist es mir egal, wer spielt - ich kann mich mit "unseren" Jungs weder persönlich noch durch sowas wie Nationalstolz identifizieren, weil ich so etwas nicht kenne.</p> <p>Wenn Ballspiel, dann eher schon Basketball. Das hat immerhin noch eine gewisse Ästhetik.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Fische, die bellen, beißen nicht. </div> Fußball Sat, 19 Jun 21 16:01:04 Z https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789371?srt=yes#m1789371 https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789371?srt=yes#m1789371 <p>Hallo,</p> <blockquote> <p>Wenn Ballspiel, dann eher schon Basketball.</p> </blockquote> <p>Du meinst diese angeblich kontaktlose Mannschaftssportart? Dann lieber Volleyball, da kann man wenigstens nur über die eigenen Mannschaftsglieder stolpern…</p> <p>Gruß<br> Kalk</p> Fußball Sat, 19 Jun 21 16:17:36 Z https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789373?srt=yes#m1789373 https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789373?srt=yes#m1789373 <p>@@Der Martin</p> <blockquote> <p>Wenn Ballspiel, dann eher schon Basketball. Das hat immerhin noch eine gewisse Ästhetik.</p> </blockquote> <p>Bei mir anders. Basketball (und ebenso Handball) geht immer hin und her, da spielt sich alles vor dem Korb (Tor) ab. Nichts zum Zuschauen für mich.</p> <p>Fußball hingegen geht übers ganze Spielfeld. Für die Spieler heißt das auch, nicht nur möglichst schnell über gesamte Feld vor- bzw. zurückzulaufen. Das macht ein gutes Fußballspiel für mich durchaus ansehenswert.</p> <p>Auch wenn ich – wie du – dem Nationalstolz und Fangehabe wenig abgewinnen kann. Obwohl ich mich heimlich ein kleines bisschen lokalpatriotisch freue, wenn die Berliner gewinnen. Die rot-weißen, nicht die blau-weißen.</p> <p>Hatte ich eigentlich <a href="https://twitter.com/g16n/status/1104072447425421313" rel="nofollow noopener noreferrer">das</a> schon erwähnt?</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> Fußball Sat, 19 Jun 21 16:09:57 Z https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789372?srt=yes#m1789372 https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789372?srt=yes#m1789372 <p>Hi,</p> <blockquote> <blockquote> <p>Wenn Ballspiel, dann eher schon Basketball.</p> </blockquote> <p>Du meinst diese angeblich kontaktlose Mannschaftssportart?</p> </blockquote> <p>kontaktlos? - Nein, das ist es ganz gewiss nicht. Basketball war eins der drei Schwerpunktthemen im Sport-Grundkurs in der Oberstufe (die anderen beiden waren Leichtathletik und Turnen). Ich war damals kein wirklich guter Basketballspieler, aber für schulische Maßstäbe ganz okay.</p> <p>Aber kontaktlos? Nö.</p> <blockquote> <p>Dann lieber Volleyball, da kann man wenigstens nur über die eigenen Mannschaftsglieder stolpern…</p> </blockquote> <p>Da ist natürlich was dran. Was die Sache aber nicht weniger unfallträchtig macht.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Fische, die bellen, beißen nicht. </div> Fußball Sat, 19 Jun 21 19:02:13 Z https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789379?srt=yes#m1789379 https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789379?srt=yes#m1789379 <p>Hallo,</p> <blockquote> <p>Aber kontaktlos? Nö.</p> </blockquote> <p><a href="https://www.decathlon.de/c/learn/die-vorteile-von-basketball_7f62e3b2-a2bb-49ab-a2ca-8f8937a040f8" rel="nofollow noopener noreferrer">Doch</a>.</p> <p>Gruß<br> Kalk</p> <p>Edith ergänzt: <a href="https://www.soliver-wuerzburg.de/fans/basketball-1x1/foulregeln" rel="nofollow noopener noreferrer">Kontakt ist foul</a></p> Fußball Sat, 19 Jun 21 16:24:03 Z https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789374?srt=yes#m1789374 https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789374?srt=yes#m1789374 <p>Hi Gunnar,</p> <blockquote> <blockquote> <p>Wenn Ballspiel, dann eher schon Basketball. Das hat immerhin noch eine gewisse Ästhetik.</p> </blockquote> <p>Bei mir anders. Basketball (und ebenso Handball) geht immer hin und her, da spielt sich alles vor dem Korb (Tor) ab. Nichts zum Zuschauen für mich.</p> </blockquote> <p>beim Handball deckt sich das mit meinem Eindruck. Basketball ist dagegen wesentlich ... ähm, was ist der passende deutsche Ausdruck für <em>versatile</em>? - Okay, vielleicht nicht im Profisport, da habe ich dann doch wenig Einblick; ich denke eher an den Schulsport zurück.</p> <blockquote> <p>Fußball hingegen geht übers ganze Spielfeld. Für die Spieler heißt das auch, nicht nur möglichst schnell über gesamte Feld vor- bzw. zurückzulaufen. Das macht ein gutes Fußballspiel für mich durchaus ansehenswert.</p> </blockquote> <p>Ja, okay. Aber genau das ist <em>ein</em> Faktor, der es für mich langweilig macht: Die rennen die meiste Zeit nur rum.</p> <blockquote> <p>Auch wenn ich – wie du – dem Nationalstolz und Fangehabe wenig abgewinnen kann. Obwohl ich mich heimlich ein kleines bisschen lokalpatriotisch freue, wenn die Berliner gewinnen. Die rot-weißen, nicht die blau-weißen.</p> </blockquote> <p>Sei dir gegönnt. Aber ich kann es nicht nachvollziehen.</p> <blockquote> <p>Hatte ich eigentlich <a href="https://twitter.com/g16n/status/1104072447425421313" rel="nofollow noopener noreferrer">das</a> schon erwähnt?</p> </blockquote> <p>Jetzt ja. </p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Fische, die bellen, beißen nicht. </div> Fußball Tue, 22 Jun 21 09:38:27 Z https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789489?srt=yes#m1789489 https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789489?srt=yes#m1789489 <p>Hallo</p> <blockquote> <p>Basketball (und ebenso Handball) geht immer hin und her, da spielt sich alles vor dem Korb (Tor) ab. Nichts zum Zuschauen für mich.</p> <p>Fußball hingegen geht übers ganze Spielfeld.</p> </blockquote> <p>Ein (mehr oder minder posthumes) Hoch auf das leider mehr oder minder ausgestorbene Spiel <a href="https://de.wikipedia.org/wiki/Feldhandball" rel="nofollow noopener noreferrer">Feldhandball</a>. Das spielte sich auf einem fußballfeldgroßen Spielfeld ab (oft war es auch ein Fußballfeld). Viel Platz, um das Spiel „über das ganze Feld“ zu erstrecken <sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup>.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> 200 ist das neue 35. </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Nicht, dass das auf dem kleineren Hallenspielfeld nicht ebenso wäre. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> Fußball Sat, 19 Jun 21 19:11:02 Z https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789380?srt=yes#m1789380 https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789380?srt=yes#m1789380 <p>Hi,</p> <blockquote> <blockquote> <p>Aber kontaktlos? Nö.</p> </blockquote> <p><a href="https://www.decathlon.de/c/learn/die-vorteile-von-basketball_7f62e3b2-a2bb-49ab-a2ca-8f8937a040f8" rel="nofollow noopener noreferrer">Doch</a>.</p> </blockquote> <p>"Ein Kontakt ist oftmals nicht zu vermeiden und sollte auch nicht geahndet werden, wenn er als zufällig eingestuft wird."</p> <p>Also alles andere als kontaktlos. Es liegt im Ermessen des Schiedsrichters, ob ein Körperkontakt als Foul gewertet wird osr nicht. Nach meiner laienhaften Erfahrung: Meistens eher nicht. Aber selbst wenn nicht: Der unerwünschte direkte Körperkontakt war dennoch da.</p> <blockquote> <p>Edith ergänzt: <a href="https://www.soliver-wuerzburg.de/fans/basketball-1x1/foulregeln" rel="nofollow noopener noreferrer">Kontakt ist foul</a></p> </blockquote> <p>Ja. Aber der Schiedsrichter hat das letzte Wort.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Fische, die bellen, beißen nicht. </div> Fußball Sat, 19 Jun 21 19:37:59 Z https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789386?srt=yes#m1789386 https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789386?srt=yes#m1789386 <p>Hallo,</p> <blockquote> <p>Also alles andere als kontaktlos.</p> </blockquote> <p>Na dann ergänze ich einfach ein „angeblich“ und dann passts...</p> <p>Gruß<br> Kalk</p> Bilder und Icons unterschiedlich plazieren per CSS Sat, 19 Jun 21 19:23:29 Z https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789383?srt=yes#m1789383 https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789383?srt=yes#m1789383 <p>Hallo,</p> <blockquote> <blockquote> <p>Da könntest du vor jeden Link, der auf <code>.pdf endet</code>, ein SVG-Icon tun und das würde nicht als Bild im Markdown, bzw. dann im HTML-Markup erscheinen.</p> </blockquote> <p>Das ist wirklich ein guter Ansatz, allerdings nicht <code>.pdf</code> am <em>Ende</em>, sondern <em>enthalten</em> als Bedingung (gelegentlich könnte ein <code>dateiname.pdf#page=12</code> oder sowas auftauchen).</p> </blockquote> <p>das hatte ich doch <a href="https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789364#m1789364" rel="noopener noreferrer">kurz nach fünf schon vorgeschlagen</a>.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Fische, die bellen, beißen nicht. </div> Bilder und Icons unterschiedlich plazieren per CSS Sat, 19 Jun 21 19:50:29 Z https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789387?srt=yes#m1789387 https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789387?srt=yes#m1789387 <p>Hi,</p> <blockquote> <p>das hatte ich doch [kurz nach fünf schon vorgeschlagen]</p> </blockquote> <p>Nein. Du wolltest die img formatieren. Matthias braucht für die pdf-Links keine img-Elemente, weil er das PDF-Icon per CSS direkt ins a-Element reinsetzt.</p> <p>cu,<br> Andreas a/k/a MudGuard</p> Bilder und Icons unterschiedlich plazieren per CSS Sat, 19 Jun 21 19:50:54 Z https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789388?srt=yes#m1789388 https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789388?srt=yes#m1789388 <p> und genau so hab ich das ja auch gemacht ... Danke!!</p> Bilder und Icons unterschiedlich plazieren per CSS Sat, 19 Jun 21 19:53:16 Z https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789389?srt=yes#m1789389 https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789389?srt=yes#m1789389 <p>ist das nicht dasselbe, was Martin hier geschrieben hatte:</p> <blockquote> <p>An der Bildgröße kannst du dich nicht orientieren, die ist für CSS nicht zugänglich. Aber ein Icon für einen bestimmten Dateityp hat doch wahrscheinlich immer denselben Dateinamen. Da könntest du eventuell mit dem <a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren/Teil%C3%BCbereinstimmung" rel="nofollow noopener noreferrer">Attributselektor</a> was anfangen:</p> <pre><code class="block language-css"><span class="token selector">img[src*=".pdf"]</span> <span class="token punctuation">{</span> <span class="token comment">/* CSS-Regeln für ein PDF-Icon */</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>sorry - nein ist nicht dasselbe. Denn:</p> <pre><code class="block">img[src*=".pdf"] { /* CSS-Regeln für ein PDF-Icon */ } </code></pre> <p>ist nicht dasselbe wie</p> <pre><code class="block">a[href*=".pdf"] { /* CSS-Regeln für ein PDF-Icon */ } </code></pre> <p>und letzteres hab ich tatsächlich eingebaut.</p> Bilder und Icons unterschiedlich plazieren per CSS Sat, 19 Jun 21 20:33:42 Z https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789392?srt=yes#m1789392 https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789392?srt=yes#m1789392 <p>@@webeditor</p> <blockquote> <pre><code class="block">a[href*=".pdf"] { /* CSS-Regeln für ein PDF-Icon */ } </code></pre> <p>und letzteres hab ich tatsächlich eingebaut.</p> </blockquote> <p>Hm, der Selektor matcht auch auf <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mein.pdf-erklärvideo.mp4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code>.</p> <p>Besser wäre wohl zu kucken, ob <code>.pdf</code> am Ende oder <code>.pdf#</code> irgendwo auftaucht:</p> <pre><code class="block language-css"><span class="token selector">a[href$=".pdf"], a[href*=".pdf#"]</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span> </code></pre> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> Bilder und Icons unterschiedlich plazieren per CSS Sun, 20 Jun 21 13:48:20 Z https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789415?srt=yes#m1789415 https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789415?srt=yes#m1789415 <p><code>printf('Hallo %s!', ['Du', 'ihr', 'Welt', 'zusammen'][rand(0, 3)]);</code></p> <blockquote> <p>Hm, der Selektor matcht auch auf <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mein.pdf-erklärvideo.mp4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code>.</p> <p>Besser wäre wohl zu kucken, ob <code>.pdf</code> am Ende oder <code>.pdf#</code> irgendwo auftaucht:</p> <pre><code class="block language-css"><span class="token selector">a[href$=".pdf"], a[href*=".pdf#"]</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span> </code></pre> </blockquote> <p>Sollte an dieser Stelle nicht zusätzlich ein Fragezeichen (eventuelle Parameter) einbezogen werden?</p> <p>/K</p> <div class="signature">-- <br> <a href="https://www.youtube.com/watch?v=oj10ikQEFlw" rel="nofollow noopener noreferrer">Ceterum censeo LEGO® esse delendam</a> </div> Bilder und Icons unterschiedlich plazieren per CSS Sun, 20 Jun 21 13:49:43 Z https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789416?srt=yes#m1789416 https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789416?srt=yes#m1789416 <p>@@kai345</p> <blockquote> <blockquote> <pre><code class="block language-css"><span class="token selector">a[href$=".pdf"], a[href*=".pdf#"]</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span> </code></pre> </blockquote> <p>Sollte an dieser Stelle nicht zusätzlich ein Fragezeichen (eventuelle Parameter) einbezogen werden?</p> </blockquote> <p>Wenn das auch ein möglicher <em lang="en">use case</em> ist, ja.</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> Bilder und Icons unterschiedlich plazieren per CSS Sun, 20 Jun 21 14:08:02 Z https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789419?srt=yes#m1789419 https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789419?srt=yes#m1789419 <p>Hallo Kai,</p> <blockquote> <blockquote> <pre><code class="block language-css"><span class="token selector">a[href$=".pdf"], a[href*=".pdf#"]</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span> </code></pre> </blockquote> <p>Sollte an dieser Stelle nicht zusätzlich ein Fragezeichen (eventuelle Parameter) einbezogen werden?</p> </blockquote> <p>prinzipiell ein guter Gedanke - aber ist das ein realistischer Use Case? Gibt es PDF-Viewer oder entsprechende Browser-Plugins, die URL-Parameter interpretieren? Da ist mir zumindest nichts bekannt (was aber nichts heißen muss).<br> <strong>EDIT:</strong> Ah, ich sehe gerade, dass Gunnar das auch schon bejaht und in Frage gestellt hat.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Fische, die bellen, beißen nicht. </div> Bilder und Icons unterschiedlich plazieren per CSS Sun, 20 Jun 21 14:25:55 Z https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789420?srt=yes#m1789420 https://forum.selfhtml.org/self/2021/jun/19/bilder-und-icons-unterschiedlich-plazieren-per-css/1789420?srt=yes#m1789420 <blockquote> <pre><code class="block language-css"><span class="token selector">a[href$=".pdf"], a[href*=".pdf#"]</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span> </code></pre> </blockquote> <p>hmm ... <code>.pdf</code> am Ende <em>oder</em> <code>.pdf#</code> irgendwo ... scheint mir eine gute Kombi zu sein und besser als das, was ich gestern eingebaut hatte.</p> <blockquote> <p>prinzipiell ein guter Gedanke - aber ist das ein realistischer Use Case? Gibt es PDF-Viewer oder entsprechende Browser-Plugins, die URL-Parameter interpretieren? Da ist mir zumindest nichts bekannt (was aber nichts heißen muss).</p> </blockquote> <p>In Firefox und Chrome (Standard-Browser in der Firma) funzt das jedenfalls sehr zuverlässig. Ist Klasse, wenn man den Leser gleich auf die richtige Seite schubsen kann, ohne langen Text dazu schreiben zu müssen, wo er was findet.</p>