Bildler-Boxen gestalten

[Felix Riesterer]

Lieber Bernd,

<section>
 <div>
  <header>
...
  </header>
 </div>
</section>

Wozu diese Verschachtelung? Was soll dieser Unsinn?

Du hast eine große Box: <section>
In der Box gibt es einen Überschriftenbereich <header> und eine Liste von sechs Bildboxen/Links <ul>. Daraus leitet sich folgendes Markup ab:

<section>
  <header>
  </header>
  <ul>
  </ul>
</section>

Jetzt kannst Du den Überschriftenbereich mit der Überschrift (<h1>) befüllen, sowie die Datumsangabe und den Weiter-Button eintragen (siehe Markup-Vorschlag von @Matthias Apsel). Die Liste bekommt Listenelemente (<li>), die einen Hyperlink (<a>) zu einem Linkziel enthalten.

Die Bilder werden dann unter dem </header> eingebunden? Die Frage ist was mache ich mit dem letzten, sprich dieses sollte zwar auch ein Bild sein, aber verblasst mit der Anzahl wie viele Bilder noch in der Galerie sind, das heißt ich benötige dafür ein DIV?

Nein. Die Bilder sind <img>-Elemente innerhalb der <a>. Das letzte Bild ist kein Bild, sondern Text, der aus einer Zahl und dem Plus-Zeichen besteht.

Und warum ein button und nicht einfach ein Link?

Ich fände einen Link auch besser. Also machst Du einen Link daraus.

Damit gelangt man einfach in die Galerie also in die Detailansicht. Wäre da nicht besser einfach eine Grafik als link?

Warum? Du kannst den Text-Link mit CSS-Mitteln (Hintergrundgrafik) zu einer scheinbaren Grafik umgestalten. Das bleibt Dir überlassen. Hier also das volräufige Endergebnis:

<section>
  <header>
    <h1>Ich bin ein Titel</h1>
    <p>
       Created <time datetime="2019-03-25 10:19:25">March 25</time>
      <a href="#more">more</a>
  </p>
  </header>
  <ul>
    <li><a href="#bild1"><img src="placeholder.png" alt="graue Fläche"></a></li>
    <li><a href="#bild2"><img src="placeholder.png" alt="graue Fläche"></a></li>
    <li><a href="#bild3"><img src="placeholder.png" alt="graue Fläche"></a></li>
    <li><a href="#bild4"><img src="placeholder.png" alt="graue Fläche"></a></li>
    <li><a href="#bild5"><img src="placeholder.png" alt="graue Fläche"></a></li>
    <li><a href="#+96">+96</a></li>
  </ul>
</section>

Der Rest ist CSS.

Liebe Grüße,

Felix Riesterer.