figure a {} klemmt

[Matthias Scharwies]

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.

• CSS/Tutorials/Ausrichtung/Inhalte_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

• HTML/Interaktiv/details#CSS-Formatierung_des_details-markers

Nur Mut!

Herzliche Grüße

Matthias Scharwies