Felix Riesterer: Bilddatei wird nicht gefunden!

Beitrag lesen

Lieber Yadgar,

<p class="c">
  <a href="bikeblog_20130912a.html" target="_blank"><img src="bikeblog_20130912a_small.jpg" alt="Sattel mit gebrochenem Gestänge" width="500" height="375" border="0"></a><br>
        Langzeitbelastungstest nicht bestanden! (Foto vom 15. September)
</p>

Du willst offensichtlich ein Konstrukt, in dem Du zu einer Grafik noch eine Bildunterschrift anzeigst. Das verrät mir die Klasse c, die Du Deinem Textabsatz gegeben hast. Das border-Attribut Deines img-Elements hast Du nicht nötig, wenn Du mit CSS und einer Klasse c hantierst:

.c a img { border: none; }

Du könntest sowieso das nach HTML5 dafür besser geeignete figure-Element benutzen:

<figure>
  <a href="bikeblog_20130912a.html">
    <img src="bikeblog_20130912a_small.jpg" alt="Sattel mit gebrochenem Gestänge" width="500" height="375">
  </a>
  <figcaption>
    Langzeitbelastungstest nicht bestanden! (Foto vom 15. September)
  </figcaption>
</figure>

Damit kannst Du Deine Klasse c entfernen, da ihre Aufgabe nun von einem figure-Element übernommen wird. Ihre Darstellungsregeln kannst Du nun dem figure-Element übertragen:

figure img {
  border: none;
  display: block;
  margin: 0 auto;
}

figcaption {
  text-align: center;
}

Jetzt sieht der Code im Vergleich zu Deiner Lösung zwar aufgeblähter aus, dafür ist er aber wesentlich semantischer. Und eine Klasse mit dem kryptischen Namen c braucht es auch nicht mehr, da ja nun mit echten Elementen erreicht wird, was zu erreichen sein soll.

Liebe Grüße,

Felix Riesterer.