nicht angemeldet
marctrixHej einsiedler,
dann denke ich gerade über eine andere neuen Aufbau / Stuktur nach: wäre es dann nicht besser das Ganze so zu lösen?
Also mit <figure> und <figcaption>! Wäre das nicht besser?
Wie gesagt: das figure-Element setzt man dann ein, wenn das, was im figure-Element drin ist, etwas anderem mitgegeben werden soll: du hast aber ncihts "anderes". Insofern ist figure hier eigentlich falsch.
Um eine Beschriftung mit einem beliebigen Element zu verknüpfen gibt es aria-labelledby. Das lesen derzeit meines Wissens zwar nur Screenreader aus, aber theoretisch können Suchmaschinen und jede beliebige Software wie UAs, Parser usw auch.
Noch mehr könnte man mit schema.org herausholen, wenn du das noch in dein Lernprojekt mit aufnehmen wolltest. Es ist aber vermutlich hie rmal gut sein zu lassen und sich auf das vorhandene zu beschränken.
Für Sehende ist der Bezug ohnehin klar (durch die Gestaltung und Positionierung - achte darauf, dass das so bleibt!)
Nur ist die Frage ob ich im <figure> noch ein <div> setzen darf, warscheinlich nicht!
Probiere es doch einfach aus. ;-)
Immer alles validieren!
Ich benötige (dieses orange gekennzeichnete) div das es kein springen des Bildes gibt, denn alle Bilder sind unterschiedlich / sowohl hoch als auch waagrecht breit)
Vielleicht suchst du so etwas wie clip?
Ich möchte mit diesem Lernprojekt endlich mal zum Ende kommen.
Da es viele Aspekte von HTML, CSS und PHP betrifft - alles drei lebendige Sprache, die sich ständig weiterentwickeln und an deren Oberfläche du gerade mal gekratzt hast - solltest du dich mit der Tatsache anfreunden, dass du damit als Lernprojekt niemals fertig sein wirst.
Dennoch weiß ich was du meinst und du kannst nicht jeden Tipp aus dem Forum hier umsetzen. Mein Vorsachlag wäre übrigens in etwa folgendes HTML:
<body>
<main>
<h1>Titel des Bildes</h1>
<a href="#">zurück</a>
<article>
<img src="#"
alt="Informationen die über die Beschreibung hinaus gehen (z.B. 'Stimmung', Eigenschaften wie s/w oder ähnliches - sonst leer lassen!)" aria-describedby="ID-desc">
<div id="ID-desc">
<p>Beschreibung des Bildes</p>
<p>Beschreibung des Bildes</p>
</div>
</article>
</main>
<footer>Copyright by Superhero</footer>
</body>
Das sollte wahrscheinlich reichen...
Anmerkung
Das main ist eigentlich nicht nötig. Es ist nur üblicherweise vorhanden und ich verwende es, damit ein Screenreader-Nutzer, der es per Tastenkürzel versucht anzuspringen, auch irgendwo landet. Wenn er ausgegeben bekommt, dass es kein main gibt, denkt er womöglich fälschlicherweise, dass die Seite Barrieren enthält...
Gruss der einsiedelnde (der endlich mal fertig werden will!)
Der Weg ist das Ziel - siehe auch CSS-Timeline - alles ist im Fluss und ein Ziel oder gar Ende gibt es übrhaupt nicht...
Marc
Gunnar Bittersmann
Matthias Apsel