tag:forum.selfhtml.org,2005:/self Bild+Text mit Link versehen – SELFHTML-Forum 2016-12-20T10:26:17Z https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682441#m1682441 ManU.K 2016-12-12T20:14:43Z 2016-12-12T20:14:43Z Bild+Text mit Link versehen <p>Hallo,</p> <p>ich möchte eine Überschrift und ein Bild mit einem Link versehen.</p> <p>Mein Problem dabei ist, die Breite der Überschrift "automatisch" an dem Bild anzupassen und beide direkt untereinander anzuordnen. Entweder es entsteht eine Leerzeile zwischen den Elementen oder die Breite der beiden Elemente ist nicht gleich. Wie würdet ihr vorgehen? Würdet ihr das überhaupt mit CSS machen oder mit einem anderen Bildbearbeitungsprogramm und dann einfach das Bild hochladen und einen Link hinterlegen? Wenn ja, welches Programm könntet ihr da empfehlen? Vielen Dank!</p> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682445#m1682445 MrMurphy1 2016-12-12T23:00:28Z 2016-12-12T23:00:28Z Bild+Text mit Link versehen <p>Hallo</p> <p>Bilder sollten grundsätzlich für das Internet angepasst werden, so dass auch deren Größe im vorraus bestimmt wird.</p> <p>In der Praxis hat es sich bewährt, die Überschrift und das Bild in einen Container zu packen, dessen größte Breite (max-width) auf die Bildbreite oder schmaler gesetzt wird.</p> <p>Damit werden von vornherein viele Probleme ausgeschlossen, die sich bei anderen Vorgehensweisen ergeben können.</p> <p>Welches Element als Container geeignet ist hängt vom jeweiligen Inhalt der Webseite ab. Zum Beispiel, ob es sich bei der Überschrift um eine echte Überschrift oder "nur" eine Bezeichnung des Bildes handelt.</p> <p>Wenn alles verlinkt werden soll bietet sich als Container direkt das a-Element an.</p> <blockquote> <p>oder mit einem anderen Bildbearbeitungsprogramm</p> </blockquote> <p>Das hört sich nach Text als Grafik an und sollte vermieden werden.</p> <blockquote> <p>Würdet ihr das überhaupt mit CSS machen</p> </blockquote> <p>Ja, wie schon beschrieben ist das kein großer Aufwand sondern beim Erstellen von aktuellen Webseiten ein ganz üblicher Arbeitsschritt.</p> <p>Gruss</p> <p>MrMurphy</p> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682446#m1682446 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2016-12-13T03:10:27Z 2016-12-17T15:12:37Z Bild+Text mit Link versehen <p>@@ManU.K</p> <blockquote> <p>ich möchte eine Überschrift und ein Bild mit einem Link versehen.</p> <p>Mein Problem dabei ist, die Breite der Überschrift "automatisch" an dem Bild anzupassen und beide direkt untereinander anzuordnen.</p> </blockquote> <p>Dein Problem hat nichts mit der Verlinkung zu tun.</p> <blockquote> <p>Wie würdet ihr vorgehen? Würdet ihr das überhaupt mit CSS machen</p> </blockquote> <p>Nein. Wegen geht nicht.</p> <p>Dazu brauchst du JavaScript:</p> <ol> <li>Breite des Bildes bzw. des Containers sowie Breite des Texts auslesen</li> <li>Verhältnis bilden</li> <li>Text entsprechend skalieren</li> </ol> <p><a href="http://codepen.io/gunnarbittersmann/pen/XNPQZB/left" rel="noopener noreferrer">Wie anno dazumals.</a></p> <p>(Die Elementtypen können bei dir natürlich andere sein: der Container (bei mir <code>figure</code>) bei dir <code>a</code>, die Überschrift (bei mir <code>figcaption</code>) bei dir <code>h#</code>.)</p> <blockquote> <p>oder mit einem anderen Bildbearbeitungsprogramm und dann einfach das Bild hochladen und einen Link hinterlegen?</p> </blockquote> <p>Auch das ist möglich. Dabei unbedingt an den Alternativtext (<code>alt</code>-Attribut) denken!</p> <blockquote> <p>Wenn ja, welches Programm könntet ihr da empfehlen?</p> </blockquote> <p>Photoshop.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“</em> —Johann Wolfgang von Goethe </div> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682512#m1682512 marctrix self@mhis.de http://mhis.de 2016-12-14T06:24:18Z 2016-12-14T06:24:18Z Bild+Text mit Link versehen <p>Hej ManU.K,</p> <blockquote> <p>Hallo,</p> <p>ich möchte eine Überschrift und ein Bild mit einem Link versehen.</p> <p>Mein Problem dabei ist, die Breite der Überschrift "automatisch" an dem Bild anzupassen und beide direkt untereinander anzuordnen.</p> </blockquote> <p>Wenn ich dich recht verstanden habe, muss nicht der Text selber genauso breit sein wie das Bild, es reicht dir, wenn das Elemnt (und dadurch seine Hintergrundfarbe) so breit ist wie das Bild.</p> <p>Dann solltest du <strong>einen</strong> Container für beides nehmen. Das kann eine figure mit figcaption sein, wenn das Bild einen vorhandenen Text illustriert. Es kann aber auch ein Bild mit einem div als Beschriftung sein (hier wäre eine id für die Beschriftung und ein aria-labeldby für das Bild angebracht - dann kann man eventuell auf einen alt-Text verzichten - nicht auf das Attribut selber!</p> <p>Ich sehe schon, ich schreibe mal einen Artikel darüber. ;-)</p> <p>Jedenfalls: wenn du einen Container hast, der Bild und Beschriftung enthält, solltest du ein Blockelement für die Beschriftung wählen oder das verwendete Element auf <code>display: block</code> setzen: dann nimmt es automatisch die Breite des Elternelementes ein - für das Bild kannst du dasselbe realisieren, indem du dem Bild ein <code>width: 100%</code>mitgibst - auf ausreichend große Bilder achten (in Pixel, in kByte sollten diese möglichst klein sein, also sauber komprimieren, bei vielen automatisch per Stapelverarbeitung, bei wenigen also 100 oder so besser per Hand. Dann kann man i.d.R. bei manchen Bildern noch ein bisschen mehr Kompression rauskitzeln, bei anderen etwas mehr Qualität, je nach Bedarf).</p> <p>Das war es. Also Bild und Überschrift so wählen/formatieren, dass sie beide das Elternelement (bei dir wohl ein <code>a</code>) komplett ausfüllen.</p> <p>Wenn du das umgesetzt hast, schick uns doch einen Link und wir werden gemeinsam herausfinden, was man am Markup/CSS noch verbessern kann. ;-)</p> <p>Marc</p> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682484#m1682484 ManU.K 2016-12-13T14:45:42Z 2016-12-13T14:45:42Z Bild+Text mit Link versehen <p>Wow, erstmal vielen Dank euch beiden!</p> <p>Leider bin ich etwas überfordert :) Zumal ich mit Javascript noch nicht viel anfangen kann. Ich halte es für riskant den Code einfach zu kopieren (und die entsprechenden Stellen umzuändern), oder?</p> <p>Das Ganze soll ungefähr so aussehen: <img src="/images/7c37ee5d-33ec-4a2c-bd05-7c62bf4ec517.png" alt="Bild" loading="lazy"></p> <p>Was würdet ihr mir raten?</p> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682494#m1682494 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2016-12-13T15:42:12Z 2016-12-13T15:42:12Z Bild+Text mit Link versehen <p>Hallo ManU.K,</p> <p>Zu figure. <a href="https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Bilder_pr%C3%A4sentieren" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Bilder_präsentieren</a></p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Dieses Forum nutzt Markdown. Im <a href="https://wiki.selfhtml.org" rel="nofollow noopener noreferrer">Wiki</a> erhalten Sie <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Formatierung_der_Beitr%C3%A4ge" rel="nofollow noopener noreferrer">Hilfe bei der Formatierung Ihrer Beiträge</a>. </div> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682515#m1682515 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2016-12-14T07:39:51Z 2016-12-17T15:13:14Z Bild+Text mit Link versehen <p>@@ManU.K</p> <blockquote> <p>Das Ganze soll ungefähr so aussehen: <img src="/images/7c37ee5d-33ec-4a2c-bd05-7c62bf4ec517.png" alt="Bild" loading="lazy"></p> </blockquote> <p>Oh, da hatte ich in <em>„die Breite der Überschrift "automatisch" an dem Bild anzupassen“</em> wohl zu viel reingedeutet. Du willst gar nicht, dass der <em>Text</em> der Überschrift – hier eher Unterschrift – so breit ist wie das Bild, sondern das Element dafür, d.h. in deinem Beispiel die gelbe Fläche?</p> <p>Und was willst du da genau? Die Breite des Containers vorgeben? (Gleich der bekannten Breite des Bildes?) Die Breite des Bildes wird auf die Breite des Containers skaliert – mit CSS kein Problem.</p> <p>Oder soll sich die Breite des Containers nach der (unbekannten) tatsächlichen Breite des Bildes richten? <a href="http://codepen.io/gunnarbittersmann/pen/QGZVmd/left" rel="noopener noreferrer">Mit JavaScript</a> auch kein Problem. Möglicherweise gibt es auch eine Lösung ohne JavaScript; sie ist mir aber noch nicht eingefallen. Gibt es eine?</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“</em> —Johann Wolfgang von Goethe </div> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682526#m1682526 Martl 2016-12-14T08:36:53Z 2016-12-14T08:36:53Z Bild+Text mit Link versehen <p>Hallo ManU.K,</p> <p>nimm dieses <a href="https://wiki.selfhtml.org/wiki/HTML/Textstrukturierung/figure" rel="nofollow noopener noreferrer">Beispiel im Wiki</a> und wende etwas CSS darauf an:</p> <pre><code class="block language-css"><span class="token comment">/*Entweder so: passt sich an die Bildbreite an*/</span> <span class="token selector">figure</span><span class="token punctuation">{</span><span class="token property">display</span><span class="token punctuation">:</span>inline-block<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/*oder so: nimmt einen Teil des Viewports ein...*/</span> <span class="token selector">figure</span><span class="token punctuation">{</span><span class="token property">width</span><span class="token punctuation">:</span>25%<span class="token punctuation">}</span> <span class="token comment">/*...dann: das Bild über die ganze Breite anzeigen, Höhe ergibt sich automatisch*/</span> <span class="token selector">img</span><span class="token punctuation">{</span><span class="token property">display</span><span class="token punctuation">:</span>block<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 punctuation">}</span> <span class="token comment">/*in beiden Fällen: nach Geschmack deklarieren.*/</span> <span class="token selector">figcaption</span><span class="token punctuation">{</span><span class="token punctuation">}</span> </code></pre> <p>Das sollte Deinem Vorhaben gerecht werden.</p> <p>Grüße, Martl</p> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682504#m1682504 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2016-12-13T16:35:05Z 2016-12-13T16:35:05Z Bild+Text mit Link versehen <p>@@Matthias Apsel</p> <blockquote> <p>Zu figure. <a href="https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Bilder_pr%C3%A4sentieren" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Bilder_präsentieren</a></p> </blockquote> <p>Zu figure. <a href="https://forum.selfhtml.org/self/2016/aug/3/webseite-mit-div-container-in-ie-nicht-richtig-dargestellt/1672816#m1672816" rel="noopener noreferrer">https://forum.selfhtml.org/self/2016/aug/3/webseite-mit-div-container-in-ie-nicht-richtig-dargestellt/1672816#m1672816</a></p> <p>Ob <code>figure</code>/<code>figcaption</code> hier in diesem Fall angebracht sind, lässt sich ohne Kontext nicht beurteilen.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“</em> —Johann Wolfgang von Goethe </div> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682516#m1682516 Auge 2016-12-14T07:52:29Z 2016-12-14T07:52:29Z Bild+Text mit Link versehen <p>Hallo</p> <blockquote> <p>Das kann eine figure mit figcaption sein, wenn das Bild einen vorhandenen Text illustriert. Es kann aber auch ein Bild mit einem div als Beschriftung sein (hier wäre eine id für die Beschriftung und ein aria-labeldby für das Bild angebracht …</p> </blockquote> <p>Nur mal der Klarstellung wegen eine Frage.</p> <p>Du schreibst „eine figure mit figcaption … wenn das Bild einen vorhandenen Text illustriert“ sonst ein <code>div</code> für die Beschriftung des Bildes. Mir wurde die figure-figcaption-Kombi immer als Bild mit seiner Bildbeschreibung vorgestellt, also dass der Text (in <code>figcaption</code>) eine Aussage zum Bild (in <code>figure</code>) macht, nicht, dass das Bild eine Ergänzung zum <code>figcaption</code>-Text ist.</p> <p>Habe ich deine Aussage falsch interpretiert? Und wenn ja, was ist denn nun genau die Aufgabe von <code>figure</code> und <code>figcaption</code>?</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.<br> Toller Dampf voraus von Terry Pratchett </div> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682520#m1682520 JürgenB http://www.j-berkemeier.de 2016-12-14T08:09:34Z 2016-12-17T15:14:49Z Bild+Text mit Link versehen <p>Hallo,</p> <blockquote> <p>Oder soll sich die Breite des Containers nach der (unbekannten) tatsächlichen Breite des Bildes richten? <a href="http://codepen.io/gunnarbittersmann/pen/QGZVmd/left" rel="noopener noreferrer">Mit JavaScript</a> auch kein Problem. Möglicherweise gibt es auch eine Lösung ohne JavaScript; sie ist mir aber nich nicht eingefallen. Gibt es eine?</p> </blockquote> <p>passt sich bei</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">…</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figcaption</span><span class="token punctuation">></span></span>…<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figcaption</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span> </code></pre> <p>die Größe von Figure nicht dem Inhalt an?</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682549#m1682549 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2016-12-14T10:42:43Z 2016-12-17T15:13:51Z Bild+Text mit Link versehen <p>@@Gunnar Bittersmann</p> <blockquote> <p>Oder soll sich die Breite des Containers nach der (unbekannten) tatsächlichen Breite des Bildes richten? <a href="http://codepen.io/gunnarbittersmann/pen/QGZVmd/left" rel="noopener noreferrer">Mit JavaScript</a> auch kein Problem. Möglicherweise gibt es auch eine Lösung ohne JavaScript; sie ist mir aber noch nicht eingefallen. Gibt es eine?</p> </blockquote> <p>Ja, <a href="http://codepen.io/gunnarbittersmann/pen/YpJdRm/left" rel="noopener noreferrer">die gibt es</a>: <code>width: min-content</code>. <a href="http://caniuse.com/#feat=intrinsic-width" rel="noopener noreferrer">Außer Edge/IE.</a> Mein geschätzter Kollege hat’s <a href="https://twitter.com/maddesigns/status/808961516959662080" rel="nofollow noopener noreferrer">gewusst</a>.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“</em> —Johann Wolfgang von Goethe </div> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682518#m1682518 JürgenB http://www.j-berkemeier.de 2016-12-14T07:57:26Z 2016-12-14T07:57:26Z Bild+Text mit Link versehen <p>Hallo,</p> <p>ich schließe mich der Frage an. Ich habe <code>figure</code> auch als Rahmen für Bild und Bildunterschrift (<code>figcaption</code>) gesehen.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682525#m1682525 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2016-12-14T08:36:25Z 2016-12-14T08:36:25Z Bild+Text mit Link versehen <p>@@Auge</p> <blockquote> <p>Du schreibst „eine figure mit figcaption … wenn das Bild einen vorhandenen Text illustriert“ sonst ein <code>div</code> für die Beschriftung des Bildes. Mir wurde die figure-figcaption-Kombi immer als Bild mit seiner Bildbeschreibung vorgestellt, also dass der Text (in <code>figcaption</code>) eine Aussage zum Bild (in <code>figure</code>) macht, nicht, dass das Bild eine Ergänzung zum <code>figcaption</code>-Text ist.</p> <p>Habe ich deine Aussage falsch interpretiert?</p> </blockquote> <p>Ich glaube ja. Mit <em>„wenn das Bild einen vorhandenen Text illustriert“</em> war nicht der Text der Bildunterschrift gemeint, sondern Text im Seiteninhalt.</p> <blockquote> <p>Und wenn ja, was ist denn nun genau die Aufgabe von <code>figure</code> und <code>figcaption</code>?</p> </blockquote> <p>Siehe mein in diesem Thread bereits verlinktes <a href="https://forum.selfhtml.org/self/2016/aug/3/webseite-mit-div-container-in-ie-nicht-richtig-dargestellt/1672816#m1672816" rel="noopener noreferrer">Posting</a>.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“</em> —Johann Wolfgang von Goethe </div> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682527#m1682527 MrMurphy1 2016-12-14T08:39:49Z 2016-12-14T08:43:35Z Bild+Text mit Link versehen <p>Hallo</p> <blockquote> <p>als Rahmen</p> </blockquote> <p>Nein, das ist viel zu visuell gedacht. figure ist ein Container, der seinen Inhalt und ein eventuelles figcaption-Element sachlich zusammenhält. Ob und wie das optisch angezeigt wird spielt dabei keine Rolle. Zur Verdeutlichung ist optisch ein Rahmen zwar meist sinnvoll, aber keineswegs vorgeschrieben.</p> <blockquote> <p>für Bild</p> </blockquote> <p>Das ist viel zu einschränkend.</p> <p>Zunächst kann ein figure-Element mehr als nur ein Bild enthalten, sondern auch mehrere.</p> <p>Und, viel entscheidender, bei dem Inhalt muss es sich nicht nur um Bilder handeln. Es können auch Videos, Quelltexte, Gedichte oder Teile davon, oder ... sein.</p> <p>figure-Elemente können auch durchaus in sich verschachtelt sein, falls der Inhalt dies erforderlich macht.</p> <p>figcaption-Elemente wiederum können das erste oder letzte Element innerhalb eines figure-Elements sein. Sie können Über- oder Unterschriften sein oder den Inhalt des figure-Elements beschreiben. Sie können also viel mehr als nur Über- oder Unterschrift sein. (Inhalt, weil wie bereits geschrieben auch andere Inhalte als nur Bilder zulässig sind).</p> <p>Gruss</p> <p>MrMurphy</p> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682523#m1682523 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2016-12-14T08:32:19Z 2016-12-14T08:37:40Z Bild+Text mit Link versehen <p>@@JürgenB</p> <blockquote> <p>passt sich bei</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">…</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figcaption</span><span class="token punctuation">></span></span>…<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figcaption</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span> </code></pre> <p>die Größe von Figure nicht dem Inhalt an?</p> </blockquote> <p>Nein. Blockemente haben per Default eine Breite von 100% (ihres umgebenden Blocks).</p> <p>Es ist auch nicht so schwer, die Breite dem Inhalt anzupassen (<em lang="en">shrink to fit</em>).</p> <p>Das soll hier aber nicht geschehen. Die Bildunterschrift ist auch Inhalt; sie soll aber nicht die Breite des Containers beeinflussen. Die Breite des Containers (und damit auch die der Bildunterschrift) soll sich einzig nach der Breite des Bildes richten.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“</em> —Johann Wolfgang von Goethe </div> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682529#m1682529 JürgenB http://www.j-berkemeier.de 2016-12-14T08:43:15Z 2016-12-14T08:43:15Z Bild+Text mit Link versehen <p>Hallo Gunnar,</p> <blockquote> <blockquote> <p>passt sich bei</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">…</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figcaption</span><span class="token punctuation">></span></span>…<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figcaption</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span> </code></pre> <p>die Größe von Figure nicht dem Inhalt an?</p> </blockquote> <p>Nein. Blockemente haben per Default eine Breite von 100% (ihres umgebenden Blocks).</p> </blockquote> <p>dann hat das bei mir „zufallig“ geklappt, weil die Randbedingungen entsprechend waren.</p> <blockquote> <p>Es ist auch nicht so schwer, die Breite dem Inhalt anzupassen (<em lang="en">shrink to fit</em>).</p> <p>Das soll hier aber nicht geschehen. Die Bildunteschrift ist auch Inhalt; sie soll aber nicht die Breite des Containers beeinflussen. Die Breite des Containers soll sich einzig nach der Breite des Bildes richten.</p> </blockquote> <p>auch hier hat bei mir der Zufall zugeschlagen, da meine Bildunterschriften kurz genug sind. Danke für die Klarstellung.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682539#m1682539 marctrix self@mhis.de http://mhis.de 2016-12-14T09:35:18Z 2016-12-14T09:35:18Z Bild+Text mit Link versehen <p>Hej Gunnar,</p> <blockquote> <p>@@Auge @@MrMurphy</p> </blockquote> <blockquote> <blockquote> <p>Du schreibst „eine figure mit figcaption … wenn das Bild einen vorhandenen Text illustriert“ sonst ein <code>div</code> für die Beschriftung des Bildes. Mir wurde die figure-figcaption-Kombi immer als Bild mit seiner Bildbeschreibung vorgestellt, also dass der Text (in <code>figcaption</code>) eine Aussage zum Bild (in <code>figure</code>) macht, nicht, dass das Bild eine Ergänzung zum <code>figcaption</code>-Text ist.</p> <p>Habe ich deine Aussage falsch interpretiert?</p> </blockquote> </blockquote> <p>So ist es.</p> <blockquote> <p>Ich glaube ja. Mit <em>„wenn das Bild einen vorhandenen Text illustriert“</em> war nicht der Text der Bildunterschrift gemeint, sondern Text im Seiteninhalt.</p> <blockquote> <p>Und wenn ja, was ist denn nun genau die Aufgabe von <code>figure</code> und <code>figcaption</code>?</p> </blockquote> <p>Siehe mein in diesem Thread bereits verlinktes <a href="https://forum.selfhtml.org/self/2016/aug/3/webseite-mit-div-container-in-ie-nicht-richtig-dargestellt/1672816#m1672816" rel="noopener noreferrer">Posting</a>.</p> </blockquote> <p>Sorry, da habe ich wohl unbeabsichtigt eine Rätsel zur Wochenmitte geschaffen.</p> <p>Gunnar hat natürlich recht, MrMurphy war sehr nah dran mich zu verstehen. Werde mich um eine präszisere Ausdrucksweise bemühen!</p> <p>Beiden 10 Punkte :-)</p> <p>Marc</p> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682528#m1682528 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2016-12-14T08:41:55Z 2016-12-14T09:04:48Z Bild+Text mit Link versehen <p>@@Martl</p> <blockquote> <pre><code class="block language-css"><span class="token comment">/*Entweder so: passt sich an die Bildbreite an*/</span> <span class="token selector">figure</span><span class="token punctuation">{</span><span class="token property">display</span><span class="token punctuation">:</span>inline-block<span class="token punctuation">;</span><span class="token punctuation">}</span> </code></pre> </blockquote> <p>Nein, das tut es nicht. Es passt sich <a href="https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682523#m1682523" rel="noopener noreferrer">nicht der Bildbreite</a> an, sondern dem Inhalt.</p> <blockquote> <p>Das sollte Deinem Vorhaben gerecht werden.</p> </blockquote> <p>Hängt vom Vorhaben ab.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“</em> —Johann Wolfgang von Goethe </div> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682532#m1682532 JürgenB http://www.j-berkemeier.de 2016-12-14T08:50:00Z 2016-12-14T08:50:00Z Bild+Text mit Link versehen <p>Hallo,</p> <blockquote> <blockquote> <p>als Rahmen</p> </blockquote> </blockquote> <blockquote> <p>Nein, das ist viel zu visuell gedacht. figure ist ein Container, der seinen Inhalt und ein eventuelles figcaption-Element sachlich zusammenhält.</p> </blockquote> <p>so war das auch gemeint.</p> <blockquote> <blockquote> <p>für Bild</p> </blockquote> <p>Das ist viel zu einschränkend.</p> </blockquote> <p>das war jetzt meine Anwendung.</p> <blockquote> <p>figure-Elemente können auch durchaus in sich verschachtelt sein, falls der Inhalt dies erforderlich macht.</p> </blockquote> <p>Das heist, du würdest mehrere Bild-Unterschrift-Paare in einem weitern Figure-Element zusammenfassen? Auf <a href="http://www.j-berkemeier.de/Spiralen.html" rel="nofollow noopener noreferrer">dieser Seite</a> habe ich die Figure-Elemente mangels besseren Wissens noch in einem Aside-Element zusammengefasst. Hier schlägst du ein Figure vor?</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682619#m1682619 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2016-12-15T14:56:23Z 2016-12-15T14:59:21Z Bild+Text mit Link versehen <p>@@MrMurphy1</p> <blockquote> <p>figure-Elemente können auch durchaus in sich verschachtelt sein</p> </blockquote> <p>Da fiele mir jetzt aber kein Anwendungsbeispiel ein, das nicht sehr konstruiert daherkommen würde. Dir?</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“</em> —Johann Wolfgang von Goethe </div> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682535#m1682535 MrMurphy1 2016-12-14T08:58:16Z 2016-12-14T08:58:16Z Bild+Text mit Link versehen <p>Hallo</p> <blockquote> <p>Das heist, du würdest mehrere Bild-Unterschrift-Paare in einem weitern Figure-Element zusammenfassen?</p> </blockquote> <p>Nein, das habe ich so nie geschrieben. Sondern mit dem Zusatz</p> <blockquote> <p>falls der Inhalt dies erforderlich macht</p> </blockquote> <p>Wenn der Inhalt der Webseite dies sinnvoll erscheinen lassen würde, würde ich selbstverständlich so eine Verschachtelung vornehmen.</p> <p>Aber nur weil mehrere Bilder in eigenen figure-Elementen nebeneinander stehen würde ich sie noch lange nicht in einem übergeordneten figure-Element zusammenfassen.</p> <p>Es kommt also auf den inhaltlichen, sachlichen, semantischen Zusammenhang der figure-Elemente an.</p> <p>Gruss</p> <p>MrMurphy</p> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682543#m1682543 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2016-12-14T09:58:46Z 2016-12-14T09:58:46Z Bild+Text mit Link versehen <p>Hallo MrMurphy1,</p> <blockquote> <blockquote> <p>Das heist, du würdest mehrere Bild-Unterschrift-Paare in einem weitern Figure-Element zusammenfassen?</p> </blockquote> <p>Nein, das habe ich so nie geschrieben. Sondern mit dem Zusatz</p> <blockquote> <p>falls der Inhalt dies erforderlich macht</p> </blockquote> </blockquote> <p>Zum Beispiel um eine Entwicklung zu zeigen</p> <ul> <li>Schmetterlinge</li> <li>Frösche</li> <li><a href="https://commons.wikimedia.org/wiki/Tour_Eiffel?uselang=de#La_construction" rel="nofollow noopener noreferrer">Eiffeltürme</a></li> </ul> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Dieses Forum nutzt Markdown. Im <a href="https://wiki.selfhtml.org" rel="nofollow noopener noreferrer">Wiki</a> erhalten Sie <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Formatierung_der_Beitr%C3%A4ge" rel="nofollow noopener noreferrer">Hilfe bei der Formatierung Ihrer Beiträge</a>. </div> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682546#m1682546 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2016-12-14T10:20:23Z 2016-12-14T10:20:23Z Bild+Text mit Link versehen <p>@@Matthias Apsel</p> <blockquote> <ul> <li><a href="https://commons.wikimedia.org/wiki/Tour_Eiffel?uselang=de#La_construction" rel="nofollow noopener noreferrer">Eiffeltürme</a></li> </ul> </blockquote> <p>Der Plural ist <a href="https://de.wikipedia.org/wiki/Aussichtsturm_Pet%C5%99%C3%ADn" rel="nofollow noopener noreferrer">berechtigt</a>.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“</em> —Johann Wolfgang von Goethe </div> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682559#m1682559 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2016-12-14T17:53:40Z 2016-12-17T15:14:15Z Bild+Text mit Link versehen <p>Hallo Gunnar Bittersmann,</p> <blockquote> <p>Ja, <a href="http://codepen.io/gunnarbittersmann/pen/YpJdRm/left" rel="noopener noreferrer">die gibt es</a>: <code>width: min-content</code>. <a href="http://caniuse.com/#feat=intrinsic-width" rel="noopener noreferrer">Außer Edge/IE.</a> Mein geschätzter Kollege hat’s <a href="https://twitter.com/maddesigns/status/808961516959662080" rel="nofollow noopener noreferrer">gewusst</a>.</p> </blockquote> <p>Da du ja auch <em lang="en">intrinsic</em> schon gewusst hast, wäre es nur ein kleiner Schritt zur google-Suche gewesen. ;-)</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Dieses Forum nutzt Markdown. Im <a href="https://wiki.selfhtml.org" rel="nofollow noopener noreferrer">Wiki</a> erhalten Sie <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Formatierung_der_Beitr%C3%A4ge" rel="nofollow noopener noreferrer">Hilfe bei der Formatierung Ihrer Beiträge</a>. </div> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682561#m1682561 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2016-12-14T18:15:18Z 2016-12-14T18:34:22Z Bild+Text mit Link versehen <p>@@Matthias Apsel</p> <blockquote> <p>Da du ja auch <em lang="en">intrinsic</em> schon gewusst hast, wäre es nur ein kleiner Schritt zur google-Suche gewesen. ;-)</p> </blockquote> <p>Nein. Zu Google mache ich keinen kleinen Schritt, sondern <a href="https://forum.selfhtml.org/self/2016/apr/23/geodaten/1665844#m1665844" rel="noopener noreferrer">einen großen Bogen</a> darum. <a href="https://forum.selfhtml.org/self/2015/jan/6/would-like-to-change-the-recaptcha-width/1628989#m1628989" rel="noopener noreferrer">Aus Gründen.</a></p> <p>Und mir war tatsächlich so, als hätte ich von dem Zeugs schon mal was gehört, und ich hatte sogar <code class="bad">width: content</code> probiert. Dicht daneben ist auch vorbei.</p> <p>Es wäre ein kleiner Schritt gewesen, einen Blick in die Spec zu werfen … aber <a href="https://forum.selfhtml.org/cites/231" rel="noopener noreferrer">was Linda sagte</a>. ;-)</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“</em> —Johann Wolfgang von Goethe </div> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682565#m1682565 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2016-12-14T18:24:23Z 2016-12-14T18:24:23Z Bild+Text mit Link versehen <p>Hallo Gunnar Bittersmann,</p> <blockquote> <blockquote> <p>Da du ja auch <em lang="en">intrinsic</em> schon gewusst hast, wäre es nur ein kleiner Schritt zur google-Suche gewesen. ;-)</p> </blockquote> <p>Nein. Zu Google mache ich keinen kleinen Schritt, sondern <a href="https://forum.selfhtml.org/self/2016/apr/23/geodaten/1665844#m1665844" rel="noopener noreferrer">einen großen Bogen</a> darum. <a href="https://forum.selfhtml.org/self/2015/jan/6/would-like-to-change-the-recaptcha-width/1628989#m1628989" rel="noopener noreferrer">Aus Gründen.</a></p> </blockquote> <p>Ente Ente gehn. <a href="https://duckduckgo.com/?q=css+intrinsic+width&t=ffab&ia=web" rel="nofollow noopener noreferrer">https://duckduckgo.com/?q=css+intrinsic+width&t=ffab&ia=web</a></p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Dieses Forum nutzt Markdown. Im <a href="https://wiki.selfhtml.org" rel="nofollow noopener noreferrer">Wiki</a> erhalten Sie <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Formatierung_der_Beitr%C3%A4ge" rel="nofollow noopener noreferrer">Hilfe bei der Formatierung Ihrer Beiträge</a>. </div> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682630#m1682630 JürgenB http://www.j-berkemeier.de 2016-12-15T16:33:12Z 2016-12-15T16:33:12Z Bild+Text mit Link versehen <p>Hallo @Gunnar Bittersmann</p> <blockquote> <blockquote> <p>figure-Elemente können auch durchaus in sich verschachtelt sein</p> </blockquote> <p>Da fiele mir jetzt aber kein Anwendungsbeispiel ein, das nicht sehr konstruiert daherkommen würde. Dir?</p> </blockquote> <p>eine Bildergruppe, <a href="http://www.j-berkemeier.de/Spiralen.html" rel="nofollow noopener noreferrer">wie hier</a> die 4 Bilder?</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682800#m1682800 marctrix self@mhis.de http://mhis.de 2016-12-19T08:12:46Z 2016-12-19T08:12:46Z Bild+Text mit Link versehen <p>Hej Gunnar,</p> <blockquote> <p>@@MrMurphy1</p> <blockquote> <p>figure-Elemente können auch durchaus in sich verschachtelt sein</p> </blockquote> <p>Da fiele mir jetzt aber kein Anwendungsbeispiel ein, das nicht sehr konstruiert daherkommen würde. Dir?</p> </blockquote> <p>Steve Faulkner hätte da <a href="https://www.paciellogroup.com/blog/2011/11/html5-accessibility-chops-using-nested-figure-elements/" rel="nofollow noopener noreferrer">ein Anwendungsbeispiel für verschachtelte <code>figure</code></a>...</p> <p>Kleine accessibility-Anmerkung: <code>figure</code> sollte mit <code>role="group"</code> verwendet werden...</p> <p>Marc</p> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682805#m1682805 JürgenB http://www.j-berkemeier.de 2016-12-19T08:32:00Z 2016-12-19T08:32:00Z Bild+Text mit Link versehen <p>Hallo,</p> <blockquote> <p>Kleine accessibility-Anmerkung: <code>figure</code> sollte mit <code>role="group"</code> verwendet werden...</p> </blockquote> <p>warum? Kann <code>figure</code> noch mehr als Gruppieren?</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682806#m1682806 marctrix self@mhis.de http://mhis.de 2016-12-19T08:36:00Z 2016-12-19T08:36:26Z Bild+Text mit Link versehen <p>Hej JürgenB,</p> <blockquote> <blockquote> <p>Kleine accessibility-Anmerkung: <code>figure</code> sollte mit <code>role="group"</code> verwendet werden...</p> </blockquote> <p>warum? Kann <code>figure</code> noch mehr als Gruppieren?</p> </blockquote> <p>Klar. Illustrieren. Das ist auch der eigentliche Sinn des <code>figure</code>-Elementes. <code>figure</code> geht schließlich auch ohne optionales <code>figcaption</code>.</p> <p>Die Rolle ist nötig, damit Screenreader es kapieren.</p> <p>Marc</p> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682812#m1682812 JürgenB http://www.j-berkemeier.de 2016-12-19T09:15:41Z 2016-12-19T09:15:41Z Bild+Text mit Link versehen <p>Hallo,</p> <blockquote> <blockquote> <blockquote> <p>Kleine accessibility-Anmerkung: <code>figure</code> sollte mit <code>role="group"</code> verwendet werden...</p> </blockquote> <p>warum? Kann <code>figure</code> noch mehr als Gruppieren?</p> </blockquote> <p>Klar. Illustrieren. Das ist auch der eigentliche Sinn des <code>figure</code>-Elementes. <code>figure</code> geht schließlich auch ohne optionales <code>figcaption</code>.</p> </blockquote> <p>aber dann ist da ein img, canvas, svg, ... drin. Die könnten dann aber auch ohne figure sein.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682825#m1682825 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2016-12-19T10:55:23Z 2016-12-19T10:55:23Z Bild+Text mit Link versehen <p>@@marctrix</p> <blockquote> <blockquote> <blockquote> <p>Kleine accessibility-Anmerkung: <code>figure</code> sollte mit <code>role="group"</code> verwendet werden... Die Rolle ist nötig, damit Screenreader es kapieren.</p> </blockquote> </blockquote> </blockquote> <p>Der Bug sollte in Screenreadern gefixt werden, nicht Webentwicklern auferlegt.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“</em> —Johann Wolfgang von Goethe </div> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682814#m1682814 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2016-12-19T09:25:29Z 2016-12-19T09:25:29Z Bild+Text mit Link versehen <p>Hallo JürgenB,</p> <blockquote> <p>aber dann ist da ein img, canvas, svg, ... drin. Die könnten dann aber auch ohne figure sein.</p> </blockquote> <p>Oder eine Tabelle, ein Zitat, … Die sollten dann unbedingt in einem figure-Element stehen, falls sie zum Hauptinhalt gehören.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Dieses Forum nutzt Markdown. Im <a href="https://wiki.selfhtml.org" rel="nofollow noopener noreferrer">Wiki</a> erhalten Sie <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Formatierung_der_Beitr%C3%A4ge" rel="nofollow noopener noreferrer">Hilfe bei der Formatierung Ihrer Beiträge</a>. </div> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682817#m1682817 JürgenB http://www.j-berkemeier.de 2016-12-19T09:36:53Z 2016-12-19T09:36:53Z Bild+Text mit Link versehen <p>Hallo,</p> <blockquote> <blockquote> <p>aber dann ist da ein img, canvas, svg, ... drin. Die könnten dann aber auch ohne figure sein.</p> </blockquote> <p>Oder eine Tabelle, ein Zitat, … Die sollten dann unbedingt in einem figure-Element stehen, falls sie zum Hauptinhalt gehören.</p> </blockquote> <p>warum soll eine Tabelle in einem figure stehen? Und warum ein Zitat?</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682826#m1682826 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2016-12-19T10:59:06Z 2016-12-19T10:59:06Z Bild+Text mit Link versehen <p>@@Matthias Apsel</p> <blockquote> <blockquote> <p>aber dann ist da ein img, canvas, svg, ... drin. Die könnten dann aber auch ohne figure sein.</p> </blockquote> <p>Oder eine Tabelle, ein Zitat, … Die sollten dann unbedingt in einem figure-Element stehen, falls sie zum Hauptinhalt gehören.</p> </blockquote> <p>Sehe ich nicht so. Nicht „sollten“, schon gar nicht „unbedingt“. Sondern „hängt davon ab“.</p> <p>Wenn Tabellen, Zitate (da eher unwahrscheinlich) Unterschriften wie „Abb. 42“, „Tabelle 42“ o.ä. haben, auf die man sich im Text beziehen kann, dann ist <code>figure</code> angebracht.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“</em> —Johann Wolfgang von Goethe </div> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682818#m1682818 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2016-12-19T10:00:17Z 2016-12-19T10:00:17Z Bild+Text mit Link versehen <p>Hallo JürgenB,</p> <blockquote> <p>warum soll eine Tabelle in einem figure stehen? Und warum ein Zitat?</p> </blockquote> <p>Weil es genau dafür gedacht ist: <em lang="en"><a href="https://www.w3.org/TR/html5/grouping-content.html#the-figure-element" rel="nofollow noopener noreferrer">The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc.</a></em> - Das Element kann genutzt werden, um ... beizufügen. Beifügen kann man auch Zitate oder Tabellen.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Dieses Forum nutzt Markdown. Im <a href="https://wiki.selfhtml.org" rel="nofollow noopener noreferrer">Wiki</a> erhalten Sie <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Formatierung_der_Beitr%C3%A4ge" rel="nofollow noopener noreferrer">Hilfe bei der Formatierung Ihrer Beiträge</a>. </div> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682819#m1682819 JürgenB http://www.j-berkemeier.de 2016-12-19T10:15:25Z 2016-12-19T10:15:25Z Bild+Text mit Link versehen <p>Hallo,</p> <blockquote> <blockquote> <p>warum soll eine Tabelle in einem figure stehen? Und warum ein Zitat?</p> </blockquote> <p>Weil es genau dafür gedacht ist: <em lang="en"><a href="https://www.w3.org/TR/html5/grouping-content.html#the-figure-element" rel="nofollow noopener noreferrer">The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc.</a></em> - Das Element kann genutzt werden, um ... beizufügen. Beifügen kann man auch Zitate oder Tabellen.</p> </blockquote> <p>mmh. Ich habe Bilder (img) und Tabellen bisher immer direkt ins html gelegt und figure nur benutzt, um Bild und Text zu gruppieren, bzw. um mehrere Bild-Text-Gruppen zu gruppieren. Daher war für mich die Eigenschaft „Gruppieren“ bei figure das „normale“.</p> <p>Beim Einsatz von figure als Platzhalter für per JS erstellte Grafiken (img, svg, canvas) bin ich mir immer noch nicht sicher, ob das OK ist, oder ob hier doch das neutrale div ebenso gut geeignet ist.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682897#m1682897 marctrix self@mhis.de http://mhis.de 2016-12-20T10:03:28Z 2016-12-20T10:03:28Z Bild+Text mit Link versehen <p>Hej JürgenB,</p> <blockquote> <p>Beim Einsatz von figure als Platzhalter für per JS erstellte Grafiken (img, svg, canvas) bin ich mir immer noch nicht sicher, ob das OK ist, oder ob hier doch das neutrale div ebenso gut geeignet ist.</p> </blockquote> <p>figure verwendest du immer, wenn der Ihalt eines Elementes den Inhalt des übergeordneten Elementes "illustriert", ihm mitgegeben wird. Nicht als reine Dekoration (Schmukgrafik), sondern als Inhalt von Relevanz (Beispiel, Tabelle und/oder Diagramm von Zahlen, die im Text erläutert werden usw) - ob eine figcaption angegeben wird, ist die nächste Entscheidung, über die man sich keine Gedanken machen muss, wenn figure unangebracht ist.</p> <p>Für zu beschreibende Dinge gibt es Beschreibungslisten (dl).</p> <p>Marc</p> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682830#m1682830 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2016-12-19T12:06:27Z 2016-12-19T12:06:27Z Bild+Text mit Link versehen <p>Hallo Gunnar Bittersmann,</p> <blockquote> <blockquote> <p>Die Rolle ist nötig, damit Screenreader es kapieren.</p> </blockquote> <p>Der Bug sollte in Screenreadern gefixt werden, nicht Webentwicklern auferlegt.</p> </blockquote> <p>Kommt mir <a href="https://forum.selfhtml.org/self/2016/dec/2/scala-soll-meine-mysql-tabelle-connecten/1681602#m1681602" rel="noopener noreferrer">irgendwie bekannt</a> vor.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Dieses Forum nutzt Markdown. Im <a href="https://wiki.selfhtml.org" rel="nofollow noopener noreferrer">Wiki</a> erhalten Sie <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Formatierung_der_Beitr%C3%A4ge" rel="nofollow noopener noreferrer">Hilfe bei der Formatierung Ihrer Beiträge</a>. </div> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682898#m1682898 marctrix self@mhis.de http://mhis.de 2016-12-20T10:06:16Z 2016-12-20T10:06:16Z Bild+Text mit Link versehen <p>Hej Gunnar,</p> <blockquote> <p>@@marctrix</p> <blockquote> <blockquote> <blockquote> <p>Kleine accessibility-Anmerkung: <code>figure</code> sollte mit <code>role="group"</code> verwendet werden... Die Rolle ist nötig, damit Screenreader es kapieren.</p> </blockquote> </blockquote> </blockquote> <p>Der Bug sollte in Screenreadern gefixt werden, nicht Webentwicklern auferlegt.</p> </blockquote> <p>Einen Bug sehe ich da nicht. Es ist ein noch nicht implementiertes Feature (Bugs sind Fehler in vorhandenen Implementationen) und ja - es sollte noch eingebaut werden.</p> <p>Bis dahin gilt obiges. ;-)</p> <p>Marc</p> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682899#m1682899 JürgenB http://www.j-berkemeier.de 2016-12-20T10:13:42Z 2016-12-20T10:13:42Z Bild+Text mit Link versehen <p>Hallo Marc,</p> <blockquote> <p>figure verwendest du immer, wenn der Ihalt eines Elementes den Inhalt des übergeordneten Elementes "illustriert", ihm mitgegeben wird. Nicht als reine Dekoration (Schmukgrafik), sondern als Inhalt von Relevanz (Beispiel, Tabelle und/oder Diagramm von Zahlen, die im Text erläutert werden usw) - ob eine figcaption angegeben wird, ist die nächste Entscheidung, über die man sich keine Gedanken machen muss, wenn figure unangebracht ist.</p> </blockquote> <p>du würdest also ein im Text erwähntes Bild oder eine im Text erwähnte Tabelle (beide Inhalt) in ein <code>figure</code>-Element legen, und nicht direkt in das übergeordnete Element?</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2016/dec/12/bild-plus-text-mit-link-versehen/1682901#m1682901 marctrix self@mhis.de http://mhis.de 2016-12-20T10:26:17Z 2016-12-20T10:33:23Z Bild+Text mit Link versehen <p>Hej JürgenB,</p> <blockquote> <blockquote> <p>figure verwendest du immer, wenn der Ihalt eines Elementes den Inhalt des übergeordneten Elementes "illustriert", ihm mitgegeben wird. Nicht als reine Dekoration (Schmukgrafik), sondern als Inhalt von Relevanz (Beispiel, Tabelle und/oder Diagramm von Zahlen, die im Text erläutert werden usw) - ob eine figcaption angegeben wird, ist die nächste Entscheidung, über die man sich keine Gedanken machen muss, wenn figure unangebracht ist.</p> </blockquote> <p>du würdest also ein im Text erwähntes Bild oder eine im Text erwähnte Tabelle (beide Inhalt) in ein <code>figure</code>-Element legen, und nicht direkt in das übergeordnete Element?</p> </blockquote> <p>Genau. Angenommen das übergeordnete Element ist ein article (könnte auch ein Kapitel also section sein), wäre der Aufbau so:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Überschrift des Artikels<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Ein oder eher mehrere Absätze<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>browser-chart.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE: 50% Marktanteil, Firefox: 30% Marktanteil, Chrome 20% Marktanteil<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>In Mittelerde benutzen 50% aller Internetnutzer den IE, der Marktanteil von Firefox liegt bei 30%, der von Chrome bei 20%.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>article</span><span class="token punctuation">></span></span> </code></pre> <p>Accessibility-Anmerkung: Hier würde ich einen Alternativ-Text mitgeben, <strong>obwohl dieselbe Information</strong> im Text noch einmal folgt, weil die Grafik auf einen Blick (also sehr kurz zusammengefasst) einen Sachverhalt widergibt, der im Text ausführlicher dargestellt wird.</p> <p>Der Alternativ-Text erfüllt genau dasselbe: eine sehr kurze Zusammenfassung dessen, was im Text epischer und langatmiger beschrieben wird.</p> <p>Somit muss ein Screenreader-Nutzer (genau wie ein Sehender) nicht unbedingt weiter lesen, um die Kernaussage zu begreifen.</p> <p>Würde eine figcaption mitgeliefert, die identisch mit dem ist, was man in den alt-Text schreiben würde, wäre der alt-Text leer zu lassen (zweimal hintereinander dasselbe vorgelesen zu bekommen nervt nur).</p> <p>Also entweder die obige Version oder das das Folgende. Auf keinen Fall einen Mix aus beidem:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Überschrift des Artikels<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Ein oder eher mehrere Absätze<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>browser-chart.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figcaption</span><span class="token punctuation">></span></span>IE: 50% Marktanteil, Firefox: 30% Marktanteil, Chrome 20% Marktanteil<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figcaption</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>In Mittelerde benutzen 50% aller Internetnutzer den IE, der Marktanteil von Firefox liegt bei 30%, der von Chrome bei 20%.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>article</span><span class="token punctuation">></span></span> </code></pre> <p>Marc</p>