Der rote Kreis ist rund stehend oval und liegend oval je nach Betriebssystem

[Rolf B]

Hallo Günter,

die Buttons bekommst Du rund, so wie Matthias es schrieb.

Problem ist die Ausrichtung des eingekreisten i im Button. Du kannst zwar mit der font-size spielen, bis es auf deinem Gerät gut aussieht, aber Du hast keine Garantie, dass es auf einem anderen Gerät passt.

Eine horizontale Zentrierung im Button bekämest Du mit text-align:center hin. Ist aber eigentlich nicht nötig, ein Verzicht auf width und etwas padding führt automatisch zu einer horizontalen Zentrierung. Durch aspect-ratio:1/1; wird Dir ein quadratischer Button garantiert.

Eine vertikale Zentrierung ist hingegen nicht so einfach. Das Zeichen &#x24D8 liefert Dir zwar das ⓘ, aber dieses Zeichen scheint mir nicht in den Grenzen des Schriftrahmens zentriert. Deshalb ist das ⓘ zu tief. Ich würde Dir eher raten, eine SVG Grafik zu erzeugen und diese im Button darzustellen.

Aber selbst wenn das ⓘ taugen würde - die vertical-align Eigenschaft dient nicht dazu, Text in einem Button vertikal zu zentrieren. Das ist etwas, was nur in td und th Elementen funktioniert und ist eigentlich eine Altlast. vertical-align richtet die Textbasislinie des Elements in Bezug auf die Textbasislinie seines Umfeldes aus.

Wenn das Zeichen taugen täte, dann könnte man den Button zur Flexbox machen und mit align-items:center den Text vertikal zentrieren. Aber es taugt nicht.

Speichere Dir dieses Snippet als "info.svg":

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' width='50' height='50'>
  <circle cx='100' cy='100' r='60' fill='none' stroke='black' stroke-width='8' />
  <rect x='94' y='65' width='12' height='12' fill='black' stroke='none' />
  <line x1='100' y1='90' x2='100' y2='140' stroke='black' stroke-width='12' />
</svg>

Das ist ein schwarzes i in einem schwarzen Kreis, das im SVG zentriert ist. Eine Hintergrundfarbe gibt's nicht. Die intrinsische Größe ist auf 50x50 gesetzt, die ist aber eigentlich wurscht. Dieses SVG kannst Du dem Button zusammen mit einer roten Grundlage als Hintergrundgrafik geben:

.info-button {
button {
   width: 3em;
   aspect-ratio: 1/1;
   border: none;
   border-radius:50%;
   margin: 0;
   padding: 0;
   background: url("images/info.svg"), red;   /* Oder wo auch immer Du Icons ablegen willst */
   background-size: 100%;
}

Dadurch hast Du einen rot hinterlegten Button und vor dem roten Hintergrund das eingekreiste i. Es gibt auch andere Möglichkeiten für SVG Icons, dazu gibts einen Artikel über SVG-Icons im Selfwiki.

Dem Button sind alle visuellen Standardfeatures entzogen, außer einem: Ein Fokusrahmen, wenn man mit der Tab-Taste dorthin navigiert. Und so soll's sein. Du könntest jetzt noch per :hover eine Reaktion auf's Mäuslein herbeiführen.

Die Gruppe aus Bild mit Jahresangabe und Button sollte, wie Felix schrub, eine Figure-Gruppe sein.

<figure>
  <img src="./Reeperbahn/Schwalbe13.jpg" alt="Reeperbahn, Bordsteinschwalbe">
  <figcaption>
    <span><b>Jahr:</b> 2017</span>
    <button class="info-button"><snap class="visually-hidden">Info</span></button>
  </figcaption>
</figure>

Dass der Alt-Text nicht nur sagt "Bild zur Reeperbahn", sondern den Inhalt aussagekräftig beschreibt, ist für die Zugänglichkeit wichtig. Das gleiche gilt für den visuell versteckten Text im Button. Wie eine Klasse zum visuellen Verstecken aussehen kann, findest Du im Selfhtml Wiki im Bereich Navigation.

Eine figure hat per Default noch störenden margin, den musst Du wegschmeißen. Die Card-Breite setzt Du in Form der figure-Breite. In der h2-Überschrift nimmst Du die Unterstriche weg, die skalieren ganz schlecht und dafür gibt's die bessere Alternative text-decoration:underline oder ein border-bottom.

Die figcaption machst Du zur Flexbox:

.card figcaption {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

Wenn Jahr und Jahreszahl in einem span stehen, hast Du damit automatisch Jahresangabe und Button am linken und rechten Rand.

Auf die Klasse "info-button" kannst Du auch verzichten, du musst den Button im CSS dann geeignet selektieren. Z.B so:

.card figcaption button {
   ...
}

Nächster Punkt: Frei erfundene HTML Elemente. Die Elemente main, section und article haben spezielle Semantik, die für die Dokumentgliederung wichtig ist (das ist wieder mal was für die Zugänglichkeit). Wenn Du die durchnummerierst (main1, main2, ...), hast Du unbekannt Elemente, die keinerlei Semantik haben. Das solltest Du nicht tun.

• Es gibt genau ein main-Element
• Einen Dokumentenbereich wie main, section, article, header oder footer kann man in sections einteilen, muss aber nicht. Man kann einen Bereich auch in arcticles einteilen, muss aber nicht. In deinem Fall würde ich empfehlen, die Scrollcontainer als <section> darzustellen und die Cards als <article>. Aber immer diese Elemente, nicht die Tags durchnummerieren. Wenn Du eine Möglichkeit brauchst, gezieht einzelne Elemente anzusprechen, gib ihnen eine eindeutige ID.

Dein Grid: Du hast im scrolling-wrapper grid-template-areas definiert. Aber Du verwendest diese Namen nicht. Dann kannst Du diese Eigenschaft auch weglassen. Verwendet werden diese Namen in der grid-area Eigenschaft eines Grid-Items (bei dir also: einer card). Ich sehe dafür allerdings keine Notwendigkeit. Die IDs, die Du den cards gegeben hast, interagieren mit den Area-Namen in grid-template-areas nicht. Vermutlich ist dieses horiontale Scroll-Dings auch viel einfacher lösbar, wenn man die figures mit display:inline-block versieht und den Scroll-Container mit white-space:pre vor Umbrüchen schützt.

So, genug Dreck geschmissen. Du hast schöne Fotos im Portfolio!

Rolf