nicht angemeldet michaah
Der Martin
Matthias Scharwies
michaah
Matthias Scharwies
michaah
michaah
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:
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.
Warum wird das "ß" falsch dargestellt?
Warum ist es bei mir (im Gegensatz zum Frickle) nicht transparent?
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. ???
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.
Hallo,
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:
- Warum wird das "ß" falsch dargestellt?
Weil dein Quellcode in UTF-8 codiert ist, dein Server aber behauptet, es sei Windows-1252.
Live long and pros healthy,
Martin
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:
- Warum überhaupt?
Ja, Du hattest in diesem Thread 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, 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)
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
- Warum wird das "ß" falsch dargestellt?
@Der Martin hat's ja schon gesagt, du hast kein utf-8.
Matthias Apsel<!DOCTYPE html>
<head>
<style type="text/css">
...
Verwende unser Grundgerüst (Kopiervorlage für ganz Ungeduldige)
- Warum ist es bei mir (im Gegensatz zum Frickl~
e~) nicht transparent?
#fotostrecke {
background-color: #cbcbcb;
}
Schau in Deinen Seiteninspektor (F12)
Herzliche Grüße
Matthias Scharwies
Hi, das mit dem transparenten "schließen" Text verstehe ich nicht. Das Auskommentieren von
`#fotostrecke {
background-color: #cbcbcb;
}`
ändert an der Sichtbarkeit gar nichts.
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:
- Warum überhaupt?
Warum überhaupt?
Ja, Du hattest in ... nach einer Infobox gefragt.
... Das wäre das dialog-Element, 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 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. 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 .....
Die von dir gefundene Variante mit
#target... verliert die Infobox das:targetund wird wieder unsichtbar.
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 erkennbar den normalerweise vorhandenen Inhalt überblendet wie ein Fenster. Deshalb 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.
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.
Ok.
Problem der Infobox mit
:targetist, 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.
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.
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
Dem stimme ich zu. Ich bitte dich jedoch hier ohne weitere Erklärung meinerseits davon auszugehen, dass ich 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 diesen Punkt bitte damit gut sein.
- Warum wird das "ß" falsch dargestellt?
…
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.
Danke auch für die Ausführlichkeit deiner Antwort.
Servus!
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. ...
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 .....
Dafür kann ich Dir figure und figcaption vorschlagen. Innerhalb dessen ein details-Element, dass Du mit CSS stylen kannst:
<figure id="fotostrecke">
<img class="eingang__block2" src="https://via.placeholder.com/300/0000FF/808080 ?Text=irgendein Bild" alt="..." title="...">
<figcaption>
<details>
<summary>Wegbeschreibung</summary>
<p class="description">
anderer Hinweis- <br>
text und \-test
<img class="eingang__block2" src="https://via.placeholder.com/100/ff0000/808080 ?Text=noch ein Bild" alt="..." title="...">
</p>
</details>
</figcaption>
</figure>
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 erkennbar den normalerweise vorhandenen Inhalt überblendet wie ein Fenster.
Das nennt sich Gestaltung mit CSS. Ich habe jetzt nicht ewig lange Zeit; deshalb eine Roadmap:
details einfach so lassen, wie die Browser-Hersteller das eingestellt haben.
Bei details[open] wird das (absolut positionierte) Element so groß, dass es über den gesamten Bildschirm geht:
body {
position: relative;
}
details[open] {
position: absolute;
background-color: pink;
top: 1em;
z-index: 10;
opacity: 0.5;
width: 100%;
height: 100vh;
}
Durch opacity: 0.5; kannst du die Webseite drunter noch sehen.
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.
Dann machst du Dich an den Inhalt der Erklärung (class="description"). Ich würde sie eben mittig zentrieren.
Deshalb 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.
Probier noch ein bisschen rum. Evtl auch mit
Nur Mut!
Herzliche Grüße
Matthias Scharwies
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.
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 ...
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.
Mal schauen wie weit ich mit deinem Beispiel komme ...
Das habe ich nun mal nachgebaut.
Im Prinzip funktioniert das. Danke für das Codebeispiel.
Im Detail treibt es mich jedoch in den Wahnsinn:
Es ist fast nicht nachvollziehbar welches Element wie anzusprechen ist.
Das summary Element möchte ich nicht 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!
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.
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 ...
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.
Hallo michaah,
schade, dass du nicht in deinem ursprünglichen Thread geblieben bist.
Ich wiederhole meine Empfehlung von tippy.js.
Bis demnächst
Matthias
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.
Zum Tipp, nee, JS tue ich mir nicht auch noch an solange ich das irgendwie vermeiden kann.
Zum Gestaltungsproblem: Der Rahmenfiffi von "summary" hört auf den namen "outline".
Hallo michaah,
Zum Gestaltungsproblem: Der Rahmenfiffi von "summary" hört auf den namen "outline".
Nein, ein Rahmen hört auf den Namen border. Eine outline gibt es zusätzlich auch. Informiere dich im Wiki über die Unterschiede.
Wenn du mal wirklich konkret[1] zeigen würdest, was du vorhast, ließe sich dir bestimmt effizienter helfen.
Bis demnächst
Matthias
und nicht nur durch bunte Kästchen ↩︎
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".
Ich spreche das abstrakt an (bunte Kästchen), um meine Hilfsanfrage und eure Antworten auf die technischen 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.