Kein <div> und kein <p> im <summary> erlaubt - was tun?

[Rolf B]

Hallo Gunnar,

an der Stelle - find ich - führt sich das Inhaltsmodell ad absurdum. Die phrasing content Elemente sind ja typischerweise Inline-Elemente, und ihr Zweck ist normalerweise, im Fließtext für eine Formatierung zu sorgen. Oder, wie es die Spec schreibt:

Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs.

Durch das Umstylen auf display:block wird dieser Zweck ad absurdum geführt.

Deswegen halte ich das von fietur angestrebte Layout für keine gute Idee. Der ganze Teaser als Aufklappschaltfläche? Damit rechnet man doch eigentlich nicht. Das kleine schwarze Dreieck des details-Elements geht da vollkommen unter.

<summary>
<img ...>
<p>ein paar Zeilen</p>
</summary>

Das summary-Element ist die eingeklappte "Kurzfassung" des details-Elements. Es durch "ein Bild und ein paar Zeilen" zu füllen, kann es doch eigentlich nicht sein. Das klingt irgendwie nach den Cards, die wir im Wiki gerade anstreben. Eine Card als Trigger für den Rest? Wenn sie einen Link darstellt und als Card klar erkennbar ist, wie im Wiki, dann okay, aber Fließtext als riesige Schaltfläche (was summary ja letztlich ist), das finde ich fragwürdig.

Vor allem schießt das ::marker-Element dann quer, das hängt nämlich bestenfalls an der Unterkante des Bildes, aber nicht tiefer, das sieht komisch aus, find ich. Ich hab's jedenfalls nicht an die Unterkante des summary bekommen, es wollte entweder ganz nach oben (dann war rechts davon frei) oder an die Unterkante des Bildes und das Bild wurde um Markerbreite eingerückt. Die Marker-Gestaltung im summary-Element ist nicht so frei, wie man meint. Ich hab dann versucht, den ganzen Summary-Inhalt als span mit display:inline-block zu erzeugen und die Paragraphen durch <br> herbeizubrummen, aber er hat's immer noch gemerkt.

Deshalb meine ich, dass statt

<details>
   <summary>Ein Bild und ein paar Absätze</summary>
   <p>Langtext mit Bildern</p>
</details>

doch eigentlich sowas angezeigt wäre:

<article>
   <header>
   Bild, Überschrift und Teaserabsätze
   </header>
   <details>
      <summary>Mehr dazu...</summary>
      <p>Langtext mit Bildern</p>
   </details>
<article>

Den "Mehr dazu" Text könnte man per CSS und details[open] Selektor auch in ein "(Einklappen)" umschalten, wenn die details aufgeklappt sind.

Rolf