Matthias Scharwies: figure a {} klemmt

Beitrag lesen

SELF-Forum

figure a {} klemmt

Matthias Scharwies (Versionen)
– Informationen zu den Bewertungsregeln

problematische Seite

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 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

  1. Warum wird das "ß" falsch dargestellt?

@Der Martin hat's ja schon gesagt, du hast kein utf-8.

<!DOCTYPE html>
<head>

	<style 	type="text/css">
...

Verwende unser Grundgerüst (Kopiervorlage für ganz Ungeduldige)

  1. 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

--
Ήταν διασκεδαστικό όσο κράτησε.
Χρύσιππος ὁ Σολεύς, 220 π.Χ.
Beitrag melden
–
Informationen zu den Bewertungsregeln