figure a {} klemmt – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self?srt=yes figure a {} klemmt Fri, 12 Jun 20 10:15:26 Z https://forum.selfhtml.org/self/2020/jun/12/figure-a-klemmt/1771939?srt=yes#m1771939 https://forum.selfhtml.org/self/2020/jun/12/figure-a-klemmt/1771939?srt=yes#m1771939 <p>Beim Versuch Zusatzhinweise über das "figure" Element zu realisieren stoße ich bei einem Detail auf Schwierigkeiten. Ich habe mich am Frickl hier im Wiki (pseudoelemente:popupboxen) orientiert und habe das in seinen Details (Was wirkt <em>wann</em> auf was) noch nicht wirklich durchblickt.</p> <p>Grundsätzlich klappt das zwar, aber mit dem schließen Anker habe ich mehrere Probleme:</p> <ol> <li>Warum überhaupt?</li> </ol> <p>Das "X" reicht ja eigentlich zum Schließen. Ist die Verwendung des Schließen Textelements ein Zugeständnis an Blinde/Sehbehinderte. Ok, dann soll es so sein.</p> <ol start="2"> <li> <p>Warum wird das "ß" falsch dargestellt?</p> </li> <li> <p>Warum ist es bei mir (im Gegensatz zum Frickle) nicht transparent?</p> </li> <li> <p>Ich würde gerne etwas mehr Abstand erzeugen, aber mit "margin" klappt das nicht. Ich habe testweise mal "color: red;" gesetzt um zu testen was überhaupt ankommt. Background kann ich beeinflussen, color nicht. ???</p> </li> </ol> <p>Ganz offensichtlich brauche ich hier etwas Nachhilfe. Das Zusammenwirken von "figure", ".details", ".details:target" ".close" und "close::after" ist für mich noch eine recht neblige Angelegenheit.</p> figure a {} klemmt Fri, 12 Jun 20 10:26:11 Z https://forum.selfhtml.org/self/2020/jun/12/figure-a-klemmt/1771940?srt=yes#m1771940 https://forum.selfhtml.org/self/2020/jun/12/figure-a-klemmt/1771940?srt=yes#m1771940 <p>Hallo,</p> <p>deine Konstruktion ist mir etwas zu unübersichtlich, um sie sofort zu erfassen, daher nur ein Tipp zu dem Detail, das für mich sofort erkennbar ist:</p> <blockquote> <ol start="2"> <li>Warum wird das "ß" falsch dargestellt?</li> </ol> </blockquote> <p>Weil dein Quellcode in UTF-8 codiert ist, dein Server aber behauptet, es sei Windows-1252.</p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Ich stamme aus Ironien, einem Land am sarkastischen Ozean. </div> figure a {} klemmt Sat, 13 Jun 20 04:38:29 Z https://forum.selfhtml.org/self/2020/jun/12/figure-a-klemmt/1771970?srt=yes#m1771970 https://forum.selfhtml.org/self/2020/jun/12/figure-a-klemmt/1771970?srt=yes#m1771970 <p>Servus!</p> <blockquote> <p>Beim Versuch Zusatzhinweise über das "figure" Element zu realisieren stoße ich bei einem Detail auf Schwierigkeiten. Ich habe mich am Frickl hier im Wiki (pseudoelemente:popupboxen) orientiert und habe das in seinen Details (Was wirkt <em>wann</em> auf was) noch nicht wirklich durchblickt.</p> <p>Grundsätzlich klappt das zwar, aber mit dem schließen Anker habe ich mehrere Probleme:</p> <ol> <li>Warum überhaupt?</li> </ol> </blockquote> <h3>Warum überhaupt?</h3><p>Ja, Du hattest in <a href="https://forum.selfhtml.org/self/2020/jun/08/link-oder-hover-zwei-bilder-und-erklarungstext-in-neuem-kleinen-fenster-an-bestimmter-stelle-uber-webseite/1771754#m1771754" rel="noopener noreferrer">diesem Thread</a> nach einer Infobox gefragt.</p> <p><a href="/users/2" class="mention registered-user" rel="noopener noreferrer">@Matthias Apsel</a> hatte Dir einen kleinen Tooltip empfohlen. <a href="/users/68" class="mention registered-user" rel="noopener noreferrer">@JürgenB</a> das details-Element.</p> <p>Du wolltest eher eine Dialog-Box, die sich über den Viewport legt. Das wäre das <a href="https://wiki.selfhtml.org/wiki/HTML/Interaktiv/dialog" rel="nofollow noopener noreferrer">dialog-Element</a>, das aber von Firefox und Safari noch nicht unterstützt wird. Neue Fenster (oder Tabs) macht man heute eher nicht mehr auf, da das auf dem Handy unpraktisch ist.</p> <p>Die von dir gefundene Variante mit <code>#target</code> (<strong>Pseudoklasse</strong>, nicht Pseudoelement; hier der Link zum ganzen Artikel: <a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/target" rel="nofollow noopener noreferrer">CSS/Selektoren/Pseudoklasse/target</a>) arbeitet damit, dass du HTML-Elemente mit CSS stylen kannst.</p> <p>Links können beim Überfahren mit der Maus mit <code>:hover</code> selektiert und anders gestylt werden.</p> <p>Mit <code>:target</code> kannst du das <strong>Ziel</strong> eines Links selektieren. Wenn Du jetzt einen internen Link auf eine mit CSS ausgeblendete Infobox hast, kannst du durch Klicken das Element sichtbar machen. Durch einen weiteren Klick auf einen <strong>anderen</strong> Link verliert die Infobox das <code>:target</code> und wird wieder unsichtbar.</p> <blockquote> <p>Das "X" reicht ja eigentlich zum Schließen. Ist die Verwendung des Schließen Textelements ein Zugeständnis an Blinde/Sehbehinderte. Ok, dann soll es so sein.</p> </blockquote> <p>Ja. Das ist kein Textelement, sondern der Linktext, und ja, da geht es um die <strong>Zugänglichkeit</strong> für nicht Sehende, denen vorgelesen wird, dass man die Infobox so wieder schließt.</p> <p>Problem der Infobox mit <code>:target</code> ist, dass du die Browser-Historie vollmüllst. Ein Klick auf die Pfeil-zurück-Taste bringt dich nicht auf die letzte Seite, sondern in den letzten internen Link. Das ist eigentlich unpraktisch.</p> <p>Du hast jetzt mit 2 Links und einem div ein (schlechteres) details-Element nachgebaut. Ziel guten Webdesigns ist es aber auch, die <strong>Inhalte</strong> so gut aufzubereiten, dass man eben keine tausend zusätzlichen Erklärungen benötigt</p> <blockquote> <ol start="2"> <li>Warum wird das "ß" falsch dargestellt?</li> </ol> </blockquote> <p><a href="/users/475" class="mention registered-user" rel="noopener noreferrer">@Der Martin</a> hat's ja schon gesagt, du hast kein utf-8.</p> <pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> ... </code></pre> <p>Verwende unser Grundgerüst (<a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5/Grundger%C3%BCst#Kopiervorlage_f.C3.BCr_ganz_Ungeduldige" rel="nofollow noopener noreferrer">Kopiervorlage für ganz Ungeduldige</a>)</p> <blockquote> <ol start="3"> <li>Warum ist es bei mir (im Gegensatz zum Frickl~<s>e</s>~) nicht transparent?</li> </ol> </blockquote> <pre><code class="block language-css"> <span class="token selector">#fotostrecke</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #cbcbcb<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Schau in Deinen <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML_%26_CSS_mit_dem_Seiteninspektor_untersuchen" rel="nofollow noopener noreferrer">Seiteninspektor (F12)</a></p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Ήταν διασκεδαστικό όσο κράτησε.<br> Χρύσιππος ὁ Σολεύς, 220 π.Χ. </div> figure a {} klemmt Sat, 13 Jun 20 11:21:23 Z https://forum.selfhtml.org/self/2020/jun/12/figure-a-klemmt/1771991?srt=yes#m1771991 https://forum.selfhtml.org/self/2020/jun/12/figure-a-klemmt/1771991?srt=yes#m1771991 <p>Hi, das mit dem transparenten "schließen" Text verstehe ich nicht. Das Auskommentieren von<br> `#fotostrecke {</p> <pre><code>background-color: #cbcbcb; </code></pre> <p>}`</p> <p>ändert an der Sichtbarkeit gar nichts.</p> <blockquote> <p>Servus!</p> <blockquote> <p>Beim Versuch Zusatzhinweise über das "figure" Element zu realisieren stoße ich bei einem Detail auf Schwierigkeiten. Ich habe mich am Frickl hier im Wiki (pseudoelemente:popupboxen) orientiert und habe das in seinen Details (Was wirkt <em>wann</em> auf was) noch nicht wirklich durchblickt.</p> <p>Grundsätzlich klappt das zwar, aber mit dem schließen Anker habe ich mehrere Probleme:</p> <ol> <li>Warum überhaupt?</li> </ol> </blockquote> <h3>Warum überhaupt?</h3><p>Ja, Du hattest in ... nach einer Infobox gefragt.</p> <p>... Das wäre das <a href="https://wiki.selfhtml.org/wiki/HTML/Interaktiv/dialog" rel="nofollow noopener noreferrer">dialog-Element</a>, das aber von Firefox und Safari noch nicht unterstützt wird. Neue Fenster (oder Tabs) macht man heute eher nicht mehr auf, da das auf dem Handy unpraktisch ist.</p> </blockquote> <p>Die Unterstützung durch aktuelle Browser ist für mich derzeit Voraussetzung für alle Lösungen für welches Problem auch immer.</p> <p>Wichtig für die weitere (?) Diskussion: Deinem Hinweis Handys betreffend stimme ich 100% zu! Die Seite wird komplett neu gemacht im responsive design. Das hier in diesem Thread angesprochene Problem betrifft die derzeit aktive Seite (die wegen des neuerding dort vorhanden doubble contents leicht abgestürzt ist) Daher suche ich hierfür eine schnelle Lösung, die ja an sich funktioniert, halt bis auf die Positionierung des "schließen" Textes. Wie gesagt, das ist nur temporär, wobei sich das bei mir eben zieht .....</p> <blockquote> <p>Die von dir gefundene Variante mit <code>#target</code>... verliert die Infobox das <code>:target</code> und wird wieder unsichtbar.</p> </blockquote> <p>Ich durchblicke das tatsächlich noch lange nicht in seinen Details, was aber für die anderen Lösungen ebenso gilt. Ausschlaggebend ist für mich die visuell-gestalterische Wirkung. Und dass es als neues Fenster wahrgenommen wird ist gewünscht und gut. Zu handys ist alles oben gesagt, dort würde ich das in der neunen Seite über das von Jürgen "Akkordeon" genannte Element umsetzen. Für den Desktop werde ich aber auch dann eine Lösung anstreben die <em>erkennbar</em> den normalerweise vorhandenen Inhalt überblendet wie ein Fenster. <em>Deshalb</em> ist für mich die freie Positionierbarkeit so wichtig. Beim Akkordeon hatte ich eher den Eindruck dass ich dem Element Gewalt antuen muss und selbst dann tut es nicht was ich will (den nachträglich eingeblendeten Inhalt konnte ich verschieben, nicht jedoch den aufklappenden Rahmen.</p> <blockquote> <blockquote> <p>Das "X" reicht ja eigentlich zum Schließen. Ist die Verwendung des Schließen Textelements ein Zugeständnis an Blinde/Sehbehinderte. Ok, dann soll es so sein.</p> </blockquote> <p>Ja. Das ist kein Textelement, sondern der Linktext, und ja, da geht es um die <strong>Zugänglichkeit</strong> für nicht Sehende, denen vorgelesen wird, dass man die Infobox so wieder schließt.</p> </blockquote> <p>Ok.</p> <blockquote> <p>Problem der Infobox mit <code>:target</code> ist, dass du die Browser-Historie vollmüllst. Ein Klick auf die Pfeil-zurück-Taste bringt dich nicht auf die letzte Seite, sondern in den letzten internen Link. Das ist eigentlich unpraktisch.</p> </blockquote> <p>Ok. Das ist sicher ein Problem, das beachtet werden sollte. Mir ist jede Lösung recht, die von gängigen Browsern unterstützt wird und tut was ich weiter oben beschrieben habe.</p> <blockquote> <p>Du hast jetzt mit 2 Links und einem div ein (schlechteres) details-Element nachgebaut. Ziel guten Webdesigns ist es aber auch, die <strong>Inhalte</strong> so gut aufzubereiten, dass man eben keine tausend zusätzlichen Erklärungen benötigt</p> </blockquote> <p>Dem stimme ich zu. Ich bitte dich jedoch hier ohne weitere Erklärung meinerseits davon auszugehen, dass <em>ich</em> hier weiß was ich tue. Wären es nur hundert von den angesprochenen tausend wären es 99 zuviel. Und die eine übrig bleibende hat eben ihre Berechtigung. Lass <em>diesen Punkt</em> bitte damit gut sein.</p> <blockquote> <blockquote> <ol start="2"> <li>Warum wird das "ß" falsch dargestellt?</li> </ol> </blockquote> </blockquote> <p>…</p> <p>Danke dass du mich nun mit der Nase darauf gestoßen hast, mein CSS was zwar utf-8, nicht jedoch mein html Dokument ... das ist eben fehlende Routine ;-) ; Jetzt klappt das.</p> <p>Danke auch für die Ausführlichkeit deiner Antwort.</p> figure a {} klemmt Sat, 13 Jun 20 11:40:28 Z https://forum.selfhtml.org/self/2020/jun/12/figure-a-klemmt/1771993?srt=yes#m1771993 https://forum.selfhtml.org/self/2020/jun/12/figure-a-klemmt/1771993?srt=yes#m1771993 <p>Servus!</p> <blockquote> <p>Die Unterstützung durch aktuelle Browser ist für mich derzeit Voraussetzung für alle Lösungen für welches Problem auch immer. Wichtig für die weitere (?) Diskussion: Deinem Hinweis Handys betreffend stimme ich 100% zu! Die Seite wird komplett neu gemacht im responsive design. ...</p> <p>Daher suche ich hierfür einen schnelle Lösung, die ja an sich funktioniert, halt bis auf die positionierung des "schließen" Textes. Wie gesagt, das ist nur temporär, wobei sich das bei mir eben zieht .....</p> </blockquote> <p>Dafür kann ich Dir figure und figcaption vorschlagen. Innerhalb dessen ein details-Element, dass Du mit CSS stylen kannst:</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 attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fotostrecke<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>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>eingang__block2<span class="token punctuation">"</span></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>https://via.placeholder.com/300/0000FF/808080 ?Text=irgendein Bild<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 attr-name">title</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> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>summary</span><span class="token punctuation">></span></span>Wegbeschreibung<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>summary</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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>description<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> anderer Hinweis- <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> text und \-test <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>eingang__block2<span class="token punctuation">"</span></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>https://via.placeholder.com/100/ff0000/808080 ?Text=noch ein Bild<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 attr-name">title</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>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</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> <blockquote> <p>Ausschlaggebend ist für mich die visuell-gestalterische Wirkung. Und dass es als neues Fenster wahrgenommen wird ist gewünscht und gut. Für den Desktop werde ich aber auch dann eine Lösung anstreben die <em>erkennbar</em> den normalerweise vorhandenen Inhalt überblendet wie ein Fenster.</p> </blockquote> <p>Das nennt sich Gestaltung mit CSS. Ich habe jetzt nicht ewig lange Zeit; deshalb eine Roadmap:</p> <p>details einfach so lassen, wie die Browser-Hersteller das eingestellt haben.</p> <p>Bei details[open] wird das (absolut positionierte) Element so groß, dass es über den gesamten Bildschirm geht:</p> <pre><code class="block language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">details[open]</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> 10<span class="token punctuation">;</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0.5<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">height</span><span class="token punctuation">:</span> 100vh<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Durch opacity: 0.5; kannst du die Webseite drunter noch sehen.</p> <p>Jetzt kannst Du summary entsprechend stylen. Durch einen Klick auf summary verschwindet dein "Popup" wieder, du kannst das Dreieck und die Überschrift wie im :target-Beispiel durch ein "X" oben rechts ersetzen.</p> <p>Dann machst du Dich an den Inhalt der Erklärung (class="description"). Ich würde sie eben mittig zentrieren.</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Ausrichtung/Inhalte_zentrieren" rel="nofollow noopener noreferrer">CSS/Tutorials/Ausrichtung/Inhalte_zentrieren</a></li> </ul> <p><em>Deshalb</em> ist für mich die freie Positionierbarkeit so wichtig. Beim Akkordeon hatte ich eher den Eindruck dass ich dem Element Gewalt antuen muss selbst dann tut es nicht was ich will (den nachträglich eingeblendeten Inhalt konnte ich verschieben, nicht jedoch den aufklappenden Rahmen.</p> <p>Probier noch ein bisschen rum. Evtl auch mit</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/HTML/Interaktiv/details#CSS-Formatierung_des_details-markers" rel="nofollow noopener noreferrer">HTML/Interaktiv/details#CSS-Formatierung_des_details-markers</a></li> </ul> <p>Nur Mut!</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Ήταν διασκεδαστικό όσο κράτησε.<br> Χρύσιππος ὁ Σολεύς, 220 π.Χ. </div> figure a {} klemmt Sat, 13 Jun 20 14:11:04 Z https://forum.selfhtml.org/self/2020/jun/12/figure-a-klemmt/1772013?srt=yes#m1772013 https://forum.selfhtml.org/self/2020/jun/12/figure-a-klemmt/1772013?srt=yes#m1772013 <p>ok, dann muss ich das eben mal nachbauen um es zu verstehen. Zwar wäre mir immer noch lieber jemand könnte mir sagen warum das mit dem "schließen" Text nicht funktioniert. Einzig das Argument des Vollmüllens der History motiviert mich andere Wege auszukundschaften, aber wenn ich obiges Textdetail lösen könnte würde ich dies temporär so umsetzten.</p> <p>Deinem Vorschlag stehe ich eher skeptisch gegenüber weil mir die Struktur der Schachtelung merkwürdig suppig und auch inkonsistent vorkommt. Das mag auch daher rühren dass mir diese Elemente alle wie spezial-div_s vorkommen mit jeweils eigenem Verhalten. Ich werde es mal ausprobieren ...</p> <p>Natürlich will ich nicht 100% der Seite überdecken sondern nur einen Teil (ein Detail das vielleicht missverständlich rüberkam). Aber es soll (von der späteren Umsetzung für eine handy abgesehn) eben nicht wie ein Menü/Akkordeon ausklappen sondern eine frei positionierbare Box öffnen die darunterliegendes verdecken darf.</p> <p>Mal schauen wie weit ich mit deinem Beispiel komme ...</p> figure a {} klemmt Sat, 13 Jun 20 16:11:43 Z https://forum.selfhtml.org/self/2020/jun/12/figure-a-klemmt/1772031?srt=yes#m1772031 https://forum.selfhtml.org/self/2020/jun/12/figure-a-klemmt/1772031?srt=yes#m1772031 <p><a href="https://ac52.de/beispiel1.html" rel="nofollow noopener noreferrer">Das habe ich nun mal nachgebaut.</a></p> <p>Im Prinzip funktioniert das. Danke für das Codebeispiel.</p> <p>Im Detail treibt es mich jedoch in den Wahnsinn:</p> <p>Es ist fast nicht nachvollziehbar welches Element wie anzusprechen ist.</p> <p>Das summary Element möchte ich <em>nicht</em> so lassen wie es ist. Besonders der schwarze, scheingerundete Trauerrand hat für meine Gestaltungsansprüche erheblichen Um-css-ierungs-Bedarf. Das scheitert aber für mich sofort daran, dass dieser Fiffi nicht auf "border" hört ;-) . Oder es ist nur durch ein Pseudo-<bitte-hier-das-richtige-Element-Attributs-Dingens-einfügen> erreichbar und ich blicke nicht wie? Infos dazu welcome!</p> <p>Dass sich der Inhalt der Ursprungsseite verschiebt (weil das Summary-Element umpositioniert wird ist unschön. Im gegenwärtigen Beispiel kann ich damit leben, muss es aber mangels Alternative auch. Eine (frei positionierbare) Lösung ohne Auswirkungen auf die Ursprungsseite (so ist das eben mit popupboxen) wäre wünschenswert.</p> <p>Dass ein umgestalteter details-marker nicht von allen gebräuchlichen Browsern richtig angezeigt wird ist ... bedauerlich, und dass die ganze Konstruktion für IE 9-11 JS bedarf ist ... für mich ein derartig großer Aufwand, dass ich schaue ob ich bei meiner popupbox nicht durch CSS auf ein pseudo-attribut (ist es das?) den "schließen" Text wunschgemäß gestalten und positionieren kann (und die Historyvermüllung für diese temporäre Lösung in Kauf nehme). Das scheint mir derzeit die naheliegenste Lösung ... mal schaun ...</p> <p>Nitpicks: Das figure Element ist für die Funktion bedeutungslos, habe ich deshalb durch ein div ersetzt. Auch braucht mal wohl das figcaption Element nicht (?), das habe ich aber noch nicht ganz geblickt. Allerdings scheint die benötigte Funktion allein auf dem Zusammenwirken von "details" und "summary" zu beruhen.</p> figure a {} klemmt Sat, 13 Jun 20 16:22:09 Z https://forum.selfhtml.org/self/2020/jun/12/figure-a-klemmt/1772034?srt=yes#m1772034 https://forum.selfhtml.org/self/2020/jun/12/figure-a-klemmt/1772034?srt=yes#m1772034 <p>Hallo michaah,</p> <p>schade, dass du nicht in <a href="https://forum.selfhtml.org/self/2020/jun/08/link-oder-hover-zwei-bilder-und-erklarungstext-in-neuem-kleinen-fenster-an-bestimmter-stelle-uber-webseite/1771899#m1771899" rel="noopener noreferrer">deinem ursprünglichen Thread</a> geblieben bist.</p> <p>Ich wiederhole meine Empfehlung von <a href="https://atomiks.github.io/tippyjs/" rel="nofollow noopener noreferrer">tippy.js</a>.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> figure a {} klemmt Sat, 13 Jun 20 17:25:36 Z https://forum.selfhtml.org/self/2020/jun/12/figure-a-klemmt/1772051?srt=yes#m1772051 https://forum.selfhtml.org/self/2020/jun/12/figure-a-klemmt/1772051?srt=yes#m1772051 <p>Für mich war das ein anderes Problem. Sorry, ich wollte da nichts zerreissen. Wenn möglich und du dies für sinnvoll hälst kannst du das gerne zusammenfrickeln.</p> <p>Zum Tipp, nee, JS tue ich mir nicht auch noch an solange ich das irgendwie vermeiden kann.</p> <p>Zum Gestaltungsproblem: Der Rahmenfiffi von "summary" hört auf den namen "outline".</p> figure a {} klemmt Sun, 14 Jun 20 13:41:10 Z https://forum.selfhtml.org/self/2020/jun/12/figure-a-klemmt/1772114?srt=yes#m1772114 https://forum.selfhtml.org/self/2020/jun/12/figure-a-klemmt/1772114?srt=yes#m1772114 <p>Hallo michaah,</p> <blockquote> <p>Zum Gestaltungsproblem: Der Rahmenfiffi von "summary" hört auf den namen "outline".</p> </blockquote> <p>Nein, ein Rahmen hört auf den Namen <code>border</code>. Eine outline gibt es zusätzlich auch. Informiere dich im Wiki über die Unterschiede.</p> <p>Wenn du mal wirklich <strong>konkret</strong><sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> zeigen würdest, was du vorhast, ließe sich dir bestimmt effizienter helfen.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>und nicht nur durch bunte Kästchen <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> figure a {} klemmt Mon, 15 Jun 20 13:14:53 Z https://forum.selfhtml.org/self/2020/jun/12/figure-a-klemmt/1772158?srt=yes#m1772158 https://forum.selfhtml.org/self/2020/jun/12/figure-a-klemmt/1772158?srt=yes#m1772158 <p>Nee, die umschließende schwarze Linie ist kein Rahmen, deswegen hört der fiffi, der, da hast du Recht, kein Rahmen ist auf den namen "outline".</p> <p>Ich spreche das abstrakt an (bunte Kästchen), um meine Hilfsanfrage und eure Antworten auf die <em>technischen</em> Schwierigkeiten mit der von mir gewünschten Darstellung zu beschränken (deren inhaltliche Besprechung ich hier ausdrücklich nicht wünsche). Ich möchte das wirklich auseinander halten.</p>