nicht angemeldet
Positionierung des details Button!
JürgenB
Rolf B
MudGuard
Gunnar Bittersmann
Der MartinHi :)
Ich bin jetzt schon seit zwei Tagen dabei herauszufinden wie ich das Dreieck des <details>-Tag am Ende eines Zeilentextes positionieren kann (aus optischen Gründen). Normal ist ja das der <details>-Tag einen neuen Absatz beginnt und dies möchte ich vermeiden, solange man nicht auf das Dreieck geklickt hat, nach dem anklicken soll wie üblich alles in einem neuen Absatz dargestellt werden. Ich bin der Meinung, dass ich dies sogar schon auf Webseiten so gesehen habe, ja ich auch schon mal eine Beschreibung diesbezüglich gelesen habe, diese aber natürlich nicht mehr wieder finde. Für eine Lösung wäre ich dankbar! :)
-
Hallo,
das Symbol vor dem Details- bzw. dem Summary-Element kann mit folgendem CSS angepasst werden:
details:not(open) summary::after { content: ' ►'; } details[open] summary::after { content: ' ◄'; } summary::before { content: ""; width: 0; }Weitere Anpassungen wie z.B. display:inline sind ebenfalls über
details[open]/details:not(open)möglich.Gruß
Jürgen-
Hallo Jürgen
details:not(open) summary::after { content: ' ►'; } details[open] summary::after { content: ' ◄'; } summary::before { content: ""; width: 0; }Ich denke, dass obere steuert das Aussehen des "Dreiecks", oder? Aber das meine ich nicht.
Weitere Anpassungen wie z.B. display:inline sind ebenfalls über >
details[open]/details:not(open)möglich.Mit display:inline war ich auch schon am herumexperimentieren, ohne Erfolg.
Quelltext hier<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test-klapptext</title> <style> </style> </head> <body> <p>Textkörper-1</p> <details><summary>Klapptext</summary> <p>Test für Klapptext.</p> <p>Und eine weitere Zeile.</p></details> <p>Textkörper-2</p> </body> </html>Bei dieser Situation erscheint das Dreieck und der Text "Klapptext" zwischen Textkörper 1 und 2. Ich möchte aber das das Dreieck am Textkörper-1 angehängt wird und zwar am Ende der Zeile von Textkörper-1.
-
Hallo,
probier mal
details, p { display: inline-block } details[open] { display: block}Die Blöcke davor und dahinter benötigen auch ein display: inline oder display: inline-block, je nach Inhalt.
Gruß
Jürgen -
Hallo anko,
da gibt's ein Grundsatzproblem. <p> ist ein Element mit Inhaltskategorie "phrasing content" (schwer zu übersetzen, "Stil-Elemente". Im Prinzip Inline-Text mit Gestaltungs-Markup).
Aber <details> hat diesen Inhaltstyp nicht. Es ist allgemein vom Inhaltstyp "flow content" und gehört demnach in ein <p> Element nicht hinein. Der Browser weiß das. Wenn Du sowas formuliertst:
<p>Textkörper 1. <details>...</details> </p>dann beendet der Browser das <p> vor dem <details>.
Man muss die Darstellung schon ziemlich vergewaltigen.
<style> p.pre-details { display: inline-block; } details:not([open]) { display: inline-block; margin-left: 1em; } </style> ... <p class="pre-details">Absatz vor Details.</p> <details> <summary>Klapptext</summary> <p>Detailstext 1.</p> <p>Detailstext 2.</p> <details> <p>Absatz nach Details.</p>Wichtig: die eckigen Klammern in :not([open]). Es geht darum, die Nichtexistenz des open-Attributs zu prüfen. Das margin-left: 1em lässt es etwas besser aussehen. Ist vielleicht schon zu viel.
Allerdings stimmt da der Abstand zwischen den Absätzen vor und nach Details nicht, weil bei zwei aufeinander folgenden <p> die Margins zusammenfallen. Diese <p> hier haben aber unterschiedliches display und darum passiert das nicht. Du brauchst noch einen Style mehr:
details + p { margin-top: 0; }aber da musst Du je nach Anwendungsfall aufpassen, das wird nicht unbedingt immer das Richtige sein.
Rolf
--
sumpsi - posui - clusi-
Hallo Rolf,
Wichtig: die eckigen Klammern in :not([open]).
müssen die [] da zwingend hin? Bisher hat das bei mir im Chrome, Edge, IE, FF, und Safari auch ohne funktioniert.
Gruß
Jürgen-
Hallo Jürgen,
oh. Ich bin überrascht. Nein, müssen sie offenbar nicht. Wäre aber besser, wenn sie das müssten, weil [foo] CSS-Speak ist für "gibt's das Attribut foo" und ein drumherumgelegtes :not() sollte die [] mbMn nicht obsolet machen.
Das Folgende sieht für mich merkwürdig inkonsistent aus:
details[open] { color: green; } details:not(open) { color: red; }details:not(open) und details:not([open]) funktioniert beides. Ob es Spec ist, dass Browser auch die Kurzform verstehen, müsste man nachlesen, aber da bin ich gerade zu faul zu...
Rolf
--
sumpsi - posui - clusi-
Hallo Rolf,
details:not(open) und details:not([open]) funktioniert beides. Ob es Spec ist, dass Browser auch die Kurzform verstehen, müsste man nachlesen, aber da bin ich gerade zu faul zu...
ich habe auf die Schnelle auch nichts dazu gefunden. In den Beispielen wird wohl immer ([...]) genommen.
Ich werde die Wiki-Seite zum Details/Summary-Menü mal ändern. Im Tutorial sollte es schon ordentlich sein.
Gruß
Jürgen -
Hi,
details:not(open) und details:not([open]) funktioniert beides.
Aber m.E. aus unterschiedlichen Gründen.
details:not(open)heißt: ein details-Element, das kein open-Element ist.
Das trifft auf jedes details-Element zu.
details:not([open])heißt: ein details-Element, das kein open-Attribut hat.
Solange es nur die beiden Regeln
details:not(open) {...} details[open] {...}in dieser Reihenfolge gibt, sieht es so aus, als ob es dasselbe wäre wie
details:not([open]) {...} details[open] {...}cu,
Andreas a/k/a MudGuard-
Hi,
Solange es nur die beiden Regeln
details:not(open) {...} details[open] {...}in dieser Reihenfolge gibt, sieht es so aus, als ob es dasselbe wäre wie
details:not([open]) {...} details[open] {...}und letztere nur die Eigenschaften der ersteren "überschreibt".
details:not(open) { background-color:yellow; } details:not([open]) { border: thick solid green; } details:[open] { font-size:2em; }Der Hintergrund sollte auch bei geöffnetem Zustand gelb sein.
cu,
Andreas a/k/a MudGuard-
Hallo Andreas,
Solange es nur die beiden Regeln
details:not(open) {...} details[open] {...}in dieser Reihenfolge gibt, sieht es so aus, als ob es dasselbe wäre wie
details:not([open]) {...} details[open] {...}und letztere nur die Eigenschaften der ersteren "überschreibt".
details:not(open) { background-color:yellow; } details:not([open]) { border: thick solid green; } details:[open] { font-size:2em; }Der Hintergrund sollte auch bei geöffnetem Zustand gelb sein.
kann ich bestätigen. Da war es bei meinem CSS nur dem Zufall geschuldet, das es „funktioniert“ hat. Danke für die Analyse.
Gruß
Jürgen
-
-
Hallo Andreas,
details:not(open) und details:not([open]) funktioniert beides.
Aber m.E. aus unterschiedlichen Gründen.
details:not(open)heißt: ein details-Element, das kein open-Element ist.
Das trifft auf jedes details-Element zu.
details:not([open])heißt: ein details-Element, das kein open-Attribut hat.
Solange es nur die beiden Regeln
details:not(open) {...} details[open] {...}in dieser Reihenfolge gibt, sieht es so aus, als ob es dasselbe wäre wie
details:not([open]) {...} details[open] {...}ich habe die beiden Anweisungen mal vertauscht und im FF und im Chrome keinen Unterschied bemerkt.
Gruß
Jürgen -
Hallo MudGuard,
details:not(open)heißt: ein details-Element, das kein open-Element ist.
Ich bin ja ganz bei Dir - und darum habe ich zuerst auch geschrieben, dass man die Klammern braucht. Ein details-Element, das kein open-Element ist, das wäre eine Tautologie und es wäre Blödsinn, das abzufragen.
Ich habe mich dann von Jürgen ins Bockshorn jagen lassen. Ich habe jetzt nochmal hingeguckt, mit Chrome 79 und Firefox 73 sowie mit Edge 18. Hmpf. Edge kennt selbst in Version 18 das <details> Element nicht.
Die Version ohne eckige Klammern funktioniert nicht.
details:not(open) { color: green; }lässt das Details grün, egal ob offen oder zu.
Laut CSS4 ist das ein „useless selector“, der aber die Spezifizität erhöht. Das wäre was für @Gunnar Bittersmann, der ja nach einem Ersatz-!nuke suchte.
Rolf
--
sumpsi - posui - clusi-
Hallo Rolf,
Ich habe mich dann von Jürgen ins Bockshorn jagen lassen.
ich mich auch 😀. Es hat bei mir nur zufällig funktioniert und im Wiki habe ich es schon korigiert.
Edge kennt selbst in Version 18 das <details> Element nicht.
Das kommt erst im blauen Chrome.
Gruß
Jürgen -
@@Rolf B
Laut CSS4 ist das ein „useless selector“, der aber die Spezifizität erhöht. Das wäre was für @Gunnar Bittersmann, der ja nach einem Ersatz-!nuke suchte.
Plankton hilft da aber auch nicht weiter.
Dann müsste es schon
.foo:not(#none#none#none)sein.LLAP 🖖
--
Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.-
Hallo Gunnar,
Plankton
Ups. Stimmt.
Dann müsste es schon .foo:not(#none#none#none) sein.
Korrekt ist
.foo:not(#none):not(#none):not(#none).Rolf
--
sumpsi - posui - clusi-
@@Rolf B
Dann müsste es schon .foo:not(#none#none#none) sein.
Korrekt ist
.foo:not(#none):not(#none):not(#none).Korrekt ist beides – nur auf unterschiedlichem Level.
- Level 3:
- “The negation pseudo-class,
:not(X), is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument.” - Level 4:
- “The negation pseudo-class,
:not(), is a functional pseudo-class taking a selector list as an argument.”
Implementiert ist bislang nur Level 3.
Aber danke fur die Anregung.
LLAP 🖖
--
Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.
-
-
-
-
-
-
-
-
-
Hallo
das Symbol vor dem Details- bzw. dem Summary-Element kann mit folgendem CSS angepasst werden:
details:not(open) summary::after { content: ' ►'; } details[open] summary::after { content: ' ◄'; } summary::before { content: ""; width: 0; }hier habe ich noch ein
summary::-webkit-details-marker { display: none; } summary { list-style-type: none; }vergessen, und das
summary::before { content: ""; width: 0; }kann weg.Gruß
Jürgen-
Hallo Jürgen, habe dein letzten Post nochmal ausprobiert, es ist aber nicht das worauf ich hinaus wollte. Auch das
details, p { display: inline-block } details[open] { display: block}
bringt nicht das gewünschte Ergebnis, deshalb mal noch eine Erklärung dazu die das vielleicht etwas genauer beschreibt, an mein Versuch es zu lösen. Mein Versuche war es mit <span>-Element zu lösen, in der Form von:
<p>MEHRZEILIGER TEXTKÖRPER <span><details><summary>Klapptext</summary> <p>Test für Klapptext.</p> <p>Und eine weitere Zeile.</p></details></span></p>Zu erwähnen ist, das davor und danach sich weiterer Absatztext befindet. Also anders dargestellt:
Absatztext
Absatztext Klapptext (am Ende der letzten Zeile des Absatztextes)
Absatztext
Dieser Versuch hat auch nicht funktioniert. 😕
-
Hallo anko,
meinen Vorschlag hast Du gesehen? Ich meine, dass der so aussieht wie Du das hier beschreibst.
Ein details in eine p hineinzusetzen geht nicht. Der Browser schließt das p Element, wenn er auf details stößt. Habe ich im verlinkten Posting erklärt.
Rolf
--
sumpsi - posui - clusi-
Hallo Rolf :)
Habe deinen Vorschlag glatt übersehen, muss mich an dieses Forum erst gewöhnen. Ich habe es ausprobiert und leider hat dies auch nicht geklappt. Ich muss auch sagen, das ich mit meinen HTML Kenntnissen jetzt auch an meine Grenzen stoße und mir das zu kompliziert wird. Ich nehme davon erstmal Abstand das detail-Element zu benutzen. :(
Trotzdem vielen Dank für deine Mühe! Gruß anko :)
-
-
Hallo,
<p>MEHRZEILIGER TEXTKÖRPER <span><details><summary>Klapptext</summary> <p>Test für Klapptext.</p> <p>Und eine weitere Zeile.</p></details></span></p>das wird erst recht nichts, weil p in p geschachtelt nicht erlaubt ist, und p in span (Blockelement in Inline-Element) erst recht nicht. Über details in p hat sich Rolf ja schon geäußert.
Ciao,
Martin--
Ich stamme aus Ironien, einem Land am sarkastischen Ozean.
-
-
Hallo Jürgen, auch dir vielen Dank für deine Mühe! Aber leider haben alle Vorschläge von euch nicht das gewünschte Ergebnis gebracht, also nehme ich erstmal davon Abstand das detail-Element zu benutzen. :(
Gruß anko :)
-
-