Bild+Text mit Link versehen

[marctrix]

Hej ManU.K,

Hallo,

ich möchte eine Überschrift und ein Bild mit einem Link versehen.

Mein Problem dabei ist, die Breite der Überschrift "automatisch" an dem Bild anzupassen und beide direkt untereinander anzuordnen.

Wenn ich dich recht verstanden habe, muss nicht der Text selber genauso breit sein wie das Bild, es reicht dir, wenn das Elemnt (und dadurch seine Hintergrundfarbe) so breit ist wie das Bild.

Dann solltest du einen Container für beides nehmen. Das kann eine figure mit figcaption sein, wenn das Bild einen vorhandenen Text illustriert. Es kann aber auch ein Bild mit einem div als Beschriftung sein (hier wäre eine id für die Beschriftung und ein aria-labeldby für das Bild angebracht - dann kann man eventuell auf einen alt-Text verzichten - nicht auf das Attribut selber!

Ich sehe schon, ich schreibe mal einen Artikel darüber. ;-)

Jedenfalls: wenn du einen Container hast, der Bild und Beschriftung enthält, solltest du ein Blockelement für die Beschriftung wählen oder das verwendete Element auf display: block setzen: dann nimmt es automatisch die Breite des Elternelementes ein - für das Bild kannst du dasselbe realisieren, indem du dem Bild ein width: 100%mitgibst - auf ausreichend große Bilder achten (in Pixel, in kByte sollten diese möglichst klein sein, also sauber komprimieren, bei vielen automatisch per Stapelverarbeitung, bei wenigen also 100 oder so besser per Hand. Dann kann man i.d.R. bei manchen Bildern noch ein bisschen mehr Kompression rauskitzeln, bei anderen etwas mehr Qualität, je nach Bedarf).

Das war es. Also Bild und Überschrift so wählen/formatieren, dass sie beide das Elternelement (bei dir wohl ein a) komplett ausfüllen.

Wenn du das umgesetzt hast, schick uns doch einen Link und wir werden gemeinsam herausfinden, was man am Markup/CSS noch verbessern kann. ;-)

Marc