CSS Liste mit Bildern

[Gerdi]

Hallo,

Wie löse ich das, wenn sowohl die Grafik als auch der Textlink anklickbar sein sollen? Geht das als Liste? Oder bin ich da auf der falschen Spur? Für einen Tipp wäre ich dankbar (Link, Google-Suchbegriffe).

Danke!

[Der Martin]

n'Abend,

ich weiß nicht, warum du das jetzt ausschließlich mit dem Tag css versehen hast. Für mich ist das in erster Linie eine Frage des Markups.

Wie löse ich das, wenn sowohl die Grafik als auch der Textlink anklickbar sein sollen?

Was heißt anklickbar? Ein Link? Ein Button? Okay, an der grundlegenden Struktur würde es nicht viel ändern. Mit der dürftigen Information würde ich das Markup etwa so annehmen:

<ol id="shapes">
 <li><a ...><img ...>Dreieck</a></li>
 <li><a ...><img ...>Viereck</a></li>
 <li><a ...><img ...>Kreis</a></li>
</ol>

Geht das als Liste?

Na klar. Ist auch wahrscheinlich ein guter Ansatz, handelt es sich doch um eine Aufzählung von geometrischen Formen.

Das Ganze jetzt mit CSS etwas in Form gebracht:

#shapes
 { list-style-type: none;   /* Numerierung von ol ausblenden */
 }
#shapes li
 { display: inline-block;   /* li-Elemente als Blöcke nebeneinander anordnen */
   width:   33%;            /* bei mehr Elementen entsprechend anpassen */
 }
#shapes img
 { display: block;          /* das Bild bildet einen eigenen Block, der Text drunter */
 }

Nur mal so als Basis, von der man ausgehen könnte ...

Live long and pros healthy,
 Martin

[Matthias Apsel]

Hallo Der Martin,

Das Ganze jetzt mit CSS etwas in Form gebracht:

#shapes
 { list-style-type: none;   /* Numerierung von ol ausblenden */
 }
#shapes li
 { display: inline-block;   /* li-Elemente als Blöcke nebeneinander anordnen */

Nur mal so als Basis, von der man ausgehen könnte ...

Oder mit modernen Möglichkeiten wie grid oder flex.

Auch die Verwendung von figure-Elementen (zweites Beispiel) wäre möglich.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Auch die Verwendung von figure-Elementen (zweites Beispiel) wäre möglich.

Aber nicht unbedingt sinnvoll.

Nicht alles, was Bild und Text hat, ist ein figure-Element.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[JürgenB]

Hallo Gunnar,

Auch die Verwendung von figure-Elementen (zweites Beispiel) wäre möglich.

Aber nicht unbedingt sinnvoll.

Nicht alles, was Bild und Text hat, ist ein figure-Element.

da ich auch auf einigen Seiten Bilder mit Bildunterschriften habe, was nehme ich dann? Bisher dachte ich

<figure>
  <img ...>
 <figcaption>...</figcaption>
</figure>

wäre das Mittel der Wahl.

Gruß
Jürgen

[Tabellenkalk]

Hallo,

das Mittel der Wahl.

Zumal die gezeigten Beispiele im geometrischen Sinne wirklich klassische Figuren sind…

Gruß
Kalk

[JürgenB]

Hallo Kalk,

wenn ich also ein Bild von den Figuren auf dem Schachbrett habe, nehem ich <figure>, und bei einem Familienbild dann <people>^[1] 😎

Gruß
Jürgen

---

1. Auf einer validen Seite würde ich natürlich <x-people> nehmen. ↩︎

[Tabellenkalk]

Hallo,

wenn ich also ein Bild von den Figuren auf dem Schachbrett habe, nehem ich <figure>, und bei einem Familienbild dann <people>[^1] 😎

Überhaupt bei allen figürlichen Darstellungen das Figure-Element. Bei abstrakten Bildern natürlich <abstract>, bei Bildern vom Main das Main-Element, usw.

scnr

Gruß
Kalk

[Gunnar Bittersmann]

@@JürgenB

Nicht alles, was Bild und Text hat, ist ein figure-Element.

da ich auch auf einigen Seiten Bilder mit Bildunterschriften habe, was nehme ich dann? Bisher dachte ich

<figure>
  <img ...>
 <figcaption>...</figcaption>
</figure>

wäre das Mittel der Wahl.

Wenn es sich bei den Bildern um etwas Eigenstänständiges handelt, woraus womöglich aus dem Text referenziert wird („wie in Abbildung 42 gezeigt“), dann ist figure das Mittel der Wahl. [Spec]

Im beim OP vorliegenden Fall würde ich das verneinen.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[JürgenB]

Hallo Gunnar,

im Blog und auch auf meinen Seiten lege ich die Landkarte in ein figure-Element. Ich war mir da nie so sicher, ob das passt, oder ob doch ein div besser wäre. Was meinst du?

Die Landkarte kann (unter einer Überschrift) das einzige Element auf einer Seite sein, es kann aber auch Text auf der Seite sein, der sich auf die Karte bezieht.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

im Blog und auch auf meinen Seiten lege ich die Landkarte in ein figure-Element. Ich war mir da nie so sicher, ob das passt, oder ob doch ein div besser wäre. Was meinst du?

Ich würd sagen, figure passt. Schon wegen

es kann aber auch Text auf der Seite sein, der sich auf die Karte bezieht.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Gunnar Bittersmann]

@@Der Martin

#shapes li
 { display: inline-block;   /* li-Elemente als Blöcke nebeneinander anordnen */
   width:   33%;            /* bei mehr Elementen entsprechend anpassen */
 }

Nein. Bei Hinzukommen oder Wegfallen möchte man nichts im Stylesheet anpassen.

Die Rechnerei mit der Breite kann man getrost dem Rechner überlassen. (No pun intended.)

Mit Flexbox oder mit Grid.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Gerdi]

Vielen Dank!

Wie kann ich denn verhindern, dass die Schrift in der Darstellung auf dem Smartphone gekappt wird? Bzw. dass die Elemente dann nicht mehr neben-, sondern untereinander dargestellt werden?

[Gunnar Bittersmann]

@@Gerdi

Wie kann ich denn verhindern, dass die Schrift in der Darstellung auf dem Smartphone gekappt wird? Bzw. dass die Elemente dann nicht mehr neben-, sondern untereinander dargestellt werden?

Genau so, wie ich es gezeigt habe.

<meta name="viewport" content="width=device-width, initial-scale=1.0"/> hast du im head zu stehen, oder? ☞ Grundgerüst

🖖 Stay hard! Stay hungry! Stay alive! Stay home!