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
-Attributestitle
zu verwenden.
Bildunterschriften mit Definitionslinks (Demo)
Datei herunterladen (Archiv (RAR), 43.04 KiB)
Bisherige Kommentare (3)
Kommentar von Gerrit
Müsste hätte könnte .... LOL, hast Du einen Test gemacht, den Du online stellen kannst? Würde ich mri gerne angucken! :-)
Kommentar von René
ich habe nen Test gemacht — liegt aber zu Hause auf dem PC, also nicht vor heute abend ...
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
Bisherige Trackbacks (0)
Es wurde noch kein Trackback empfangen!