figure a {} klemmt bearbeitet von Matthias Scharwies 13.06.2020 06:38 Servus! > 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 *wann* auf was) noch nicht wirklich durchblickt. > > Grundsätzlich klappt das zwar, aber mit dem schließen Anker habe ich mehrere Probleme: > > 1) Warum überhaupt? > # Warum überhaupt? Ja, Du hattest in [diesem Thread](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) nach einer Infobox gefragt. @Matthias Apsel hatte Dir einen kleinen Tooltip empfohlen. @JürgenB das details-Element. Du wolltest eher eine Dialog-Box, die sich über den Viewport legt. Das wäre das [dialog-Element](https://wiki.selfhtml.org/wiki/HTML/Interaktiv/dialog), 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. Die von dir gefundene Variante mit `#target` (**Pseudoklasse**, nicht Pseudoelement; hier der Link zum ganzen Artikel: [CSS/Selektoren/Pseudoklasse/target](https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/target)) arbeitet damit, dass du HTML-Elemente mit CSS stylen kannst. Links können beim Überfahren mit der Maus mit `:hover` selektiert und anders gestylt werden. Mit `:target` kannst du das **Ziel** 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 **anderen** Link verliert die Infobox das `:target` und wird wieder unsichtbar. > 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. Ja. Das ist kein Textelement, sondern der Linktext, und ja, da geht es um die **Zugänglichkeit** für nicht Sehende, denen vorgelesen wird, dass man die Infobox so wieder schließt. Problem der Infobox mit `:target` 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. Du hast jetzt mit 2 Links und einem div ein (schlechteres) details-Element nachgebaut. Ziel guten Webdesigns ist es aber auch, die **Inhalte** so gut aufzubereiten, dass man eben keine tausend zusätzlichen Erklärungen benötigt > > 2) Warum wird das "ß" falsch dargestellt? @Der Martin hat's ja schon gesagt, du hast kein utf-8. ~~~ HTML <!DOCTYPE html> <head> <style type="text/css"> ... ~~~ Verwende unser Grundgerüst ([Kopiervorlage für ganz Ungeduldige](https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5/Grundgerüst#Kopiervorlage_f.C3.BCr_ganz_Ungeduldige)) > > 3) Warum ist es bei mir (im Gegensatz zum Frickl~~~e~~~) nicht transparent? ~~~ CSS #fotostrecke { background-color: #cbcbcb; } ~~~ Schau in Deinen [Seiteninspektor (F12)](https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML_%26_CSS_mit_dem_Seiteninspektor_untersuchen) Herzliche Grüße Matthias Scharwies -- Ήταν διασκεδαστικό όσο κράτησε. Χρύσιππος ὁ Σολεύς, 220 π.Χ.
figure a {} klemmt bearbeitet von Matthias Scharwies 13.06.2020 07:10 Servus! > 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 *wann* auf was) noch nicht wirklich durchblickt. > > Grundsätzlich klappt das zwar, aber mit dem schließen Anker habe ich mehrere Probleme: > > 1) Warum überhaupt? > # Warum überhaupt? Ja, Du hattest in [diesen Thread](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) nach einer Infobox gefragt. @Matthias Apsel hatte Dir einen kleinen Tooltip empfohlen. @JürgenB das details-Element. Du wolltest eher eine Dialog-Box, die sich über den Viewport legt. Das wäre das [dialog-Element](https://wiki.selfhtml.org/wiki/HTML/Interaktiv/dialog), 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. Die von dir gefundene Variante mit `#target` (**Pseudoklasse**, nicht Pseudoelement; hier der Link zum ganzen Artikel: [CSS/Selektoren/Pseudoklasse/target](https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/target)) arbeitet damit, dass du HTML-Elemente mit CSS stylen kannst. Links können beim Überfahren mit der Maus mit `:hover` selektiert und anders gestylt werden. Mit `:target` kannst du das **Ziel** 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 **anderen** Link verliert die Infobox das `:target` und wird wieder unsichtbar. > 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. Ja. Das ist kein Textelement, sondern der Linktext, und ja, da geht es um die **Zugänglichkeit** für nicht Sehende, denen vorgelesen wird, dass man die Infobox so wieder schließt. Problem der Infobox mit `:target` 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. Du hast jetzt mit 2 Links und einem div ein (schlechteres) details-Element nachgebaut. Ziel guten Webdesigns ist es aber auch, die **Inhalte** so gut aufzubereiten, dass man eben keine tausend zusätzlichen Erklärungen benötigt > > 2) Warum wird das "ß" falsch dargestellt? @Der Martin hat's ja schon gesagt, du hast kein utf-8. ~~~ HTML <!DOCTYPE html> <head> <style type="text/css"> ... ~~~ Verwende unser Grundgerüst ([Kopiervorlage für ganz Ungeduldige](https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5/Grundgerüst#Kopiervorlage_f.C3.BCr_ganz_Ungeduldige)) > > 3) Warum ist es bei mir (im Gegensatz zum Frickl~~~e~~~) nicht transparent? ~~~ CSS #fotostrecke { background-color: #cbcbcb; } ~~~ Schau in Deinen [Seiteninspektor (F12)](https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML_%26_CSS_mit_dem_Seiteninspektor_untersuchen) Herzliche Grüße Matthias Scharwies -- Ήταν διασκεδαστικό όσο κράτησε. Χρύσιππος ὁ Σολεύς, 220 π.Χ.
figure a {} klemmt bearbeitet von Matthias Scharwies 13.06.2020 06:42 Servus! > 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 *wann* auf was) noch nicht wirklich durchblickt. > > Grundsätzlich klappt das zwar, aber mit dem schließen Anker habe ich mehrere Probleme: > > 1) Warum überhaupt? > # Warum überhaupt? Ja, Du hattest in [diesen Thread](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) nach einer Infobox gefragt. @Matthias Apsel hatte Dir einen kleinen Tooltip empfohlen. @JürgenB das details-Element. Du wolltest eher eine Dialog-Box, die sich über den Viewport legt. Das wäre das [dialog-Element](https://wiki.selfhtml.org/wiki/HTML/Interaktiv/dialog), 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. Die von dir gefundene Variante mit `#target` (**Pseudoklasse**, nicht Pseudoelement; hier der Link zum ganzen Artikel: [CSS/Selektoren/Pseudoklasse/target](https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/target)) arbeitet damit, dass du HTML-Element mit CSS stylen kannst. Links können beim Überfahren mit der Maus mit `:hover` selektiert und anders gestylt werden. Mit `:target` kannst du das **Ziel** 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 **anderen** Link verliert die Infobox das :target und wird wieder unsichtbar. > 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. Ja. Das ist kein Textelement, sondern der Linktext, und ja, da geht es um die **Zugänglichkeit** für nicht Sehende, denen vorgelesen wird, dass man die Infobox so wieder schließt. Problem der Infobox mit :target 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. Du hast jetzt mit 2 Links und einem div ein (schlechteres) details-Element nachgebaut. Ziel guten Webdesigns ist es aber auch, die **Inhalte** so gut aufzubereiten, dass man eben keine tausend zusätzlichen Erklärungen benötigt > > 2) Warum wird das "ß" falsch dargestellt? @Der Martin hat's ja schon gesagt, du hast kein utf-8. ~~~ HTML <!DOCTYPE html> <head> <style type="text/css"> ... ~~~ Verwende unser Grundgerüst ([Kopiervorlage für ganz Ungeduldige](https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5/Grundgerüst#Kopiervorlage_f.C3.BCr_ganz_Ungeduldige)) > > 3) Warum ist es bei mir (im Gegensatz zum Frickl~~~e~~~) nicht transparent? ~~~ CSS #fotostrecke { background-color: #cbcbcb; } ~~~ Schau in Deinen [Seiteninspektor (F12)](https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML_%26_CSS_mit_dem_Seiteninspektor_untersuchen) Herzliche Grüße Matthias Scharwies -- Ήταν διασκεδαστικό όσο κράτησε. Χρύσιππος ὁ Σολεύς, 220 π.Χ.
nicht angemeldet nicht angemeldet
