CSS Liste mit Bildern

[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