Mastodon

renephoenix.de

Bildunterschriften

Gerrit schlägt vor, für Bildunterschriften eine Definitionsliste anzulegen, damit die Sache semantisch sauber ist. Diese Idee könnte ggf. etwas einfacher sein, da hier im HTML-Code nichts zusätzlich eingefügt werden muß, das alt-Tag aber ohnehin vorhanden sein sollte. Der folgende Code setzt eine Reihe von Bildern nebeneinander, während die Bildbeschreibung darunter erscheint.

img:after { content:attr(alt); 
display:block}
img {display:block;}
.h
{float:left; padding:10px;}

Um das Bild müßte ein <span>-Tag platziert werden. Ebenso müßte man sich bei der Variante Gedanken über width (damit ein Zeilenumbruch erfolgt) und height (damit float sauber auf die nächste Bilderreihe umbrechen kann) machen.

Ich habe dazu ein kleines Tutorial geschrieben, daß beide Varianten einmal gegenüberstellt. Es ist nicht perfekt – und kann gerne noch ergänzt und verbessert werden. Ich habe hier bewußt einen besonders komplizierten Fall verwendet, bei dem Hoch- und Querformat zum Einsatz kommt.

Update:

  • Auf Yubb kann man in diesem Tutorial diese Darstellungsweise schon betrachten.
  • Semantisch intelligenter ist anstelle des alt-Attributes title zu verwenden.

Bisherige Kommentare (3)

Kommentar von ex-venom

Hi Rene! Ich bins der Typ vom Yubb Forum. Ich schau mir öfters deine neuesten Blogtexte an vor allem deine PHP u. HTML Sachen sind ziemlich interessant. Warum ich hier bin? Das musste mal posten:

Es gibt ne page die heißt meinestadt.de und wenn man seinen Ort eingibt wird oben aus dem Ortsschild der Name des gültigen Ortes eben.
das quellbild ist das hier
http://www.meinestadt.de/oschild.php/1/
Aus spass dran hab ich das mal rausgezogen und hinter das Verzeichnis 1/ gelegt. Was dabei rauskommt kannste ja mal testen ;)
http://www.meinestadt.de/oschild.php/1/RenesBlog

Kommentar verfassen

Freiwillige Angabe
Freiwillige Angabe
Der Text kann mit Textile formatiert werden, z.B. *fett* _kursiv_ "link":url. Wie das geht?
Wieviel ist 40 plus 2?

Bisherige Trackbacks (0)

Es wurde noch kein Trackback empfangen!