Darstellen von Attributen


Das Tutorial befaßt sich mit der Darstellung von Attributen mit Hilfe von CSS - und den Möglichkeiten mit :before und :after.

Angenommen, ihr habt ein Foto, und wollt dazu eine Bildunterschrift machen. Nun könnte man da jede Menge Verschachtelungen verwenden - oder man macht nur das sichtbar, was eigentlich schon da ist: Das "alt"-Attribut:

Code:
img:after {
content:attr(alt);
}


Damit erscheint zuerst das Bild - und dahinter wird automatisch der Inhalt des alt-Attributes angezeigt. Ihr könnt dies auch mit jedem anderen Tag bzw. Attribut verwenden. Soll erst das Attribut und danach das Bild angezeigt werden, so verwendet man anstelle des :after ein :before.

Code:
img:before {
content:"Bild "attr(title)" "url(bild.gif);
}


Neben attr könnt ihr auch Bilder verwenden (werden mit url gekennzeichnet) oder statischen Text (mit Anführungszeichen).

Wichtig ist dabei zu wissen, daß der Inhalt stets davor oder danach angezeigt wird. Wenn man z.B. in einer Tabelle nur eine Währeungseinheit anfügen möchte, reicht das aus. Bei Bildern soll die Beschreibung in der Regel unter dem Bild erscheinen. Da hilft am Ende nur ein etwas aufwändiger Trick: Wir machen sowohl aus dem Bild, als auch aus der Beschreibung ein Blockelement - und diese werden dann automatisch untereinander angeordnet.

Code:

img {
display:block;
}

img:after {
content:attr(alt);
display:block;
}


Soll nun neben dem Bild aber noch Text angezeigt werden, müssen wir mit float arbeiten. Damit dies ordentlich funktioniert, müssen wir um das Bild ein <span>-Tag bauen, dem wir ein float (Textumfluss) zuordnen. Wir haben damit ein Bild mit Beschreibung - und daneben kann beliebiger Text angezeigt werden.

Code:

.h {
float:left;
}


Soll ein folgender Absatz wieder unter das Bild positioniert werden, so sollte man dem folgenden Tag ein clear:both; zuordnen.
Der HTML-Code dazu sieht so aus:

Code:
<span class="h"><img src="bildhoch.jpg" alt="Das ist ein Bild" /></span><p>Das ist Text, der neben dem Bild erscheint - wenn ich Platz habe.</p>
<p style="clear:both">Und ich bin ein Text, der in jedem Fall unter dem Bild angezeigt wird.</p>


Zum Abschluß sei gesagt, daß alle gängigen Browser :before und :after unterstützen - nur unser Sorgenkind Internet Explorer interpretiert die beiden noch nicht. Das sollte aber nicht vom Einsatz zurückschrecken.

Weiterführende Links:
de.selfhtml.org (http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#before_after)
renephoenix.de (http://renephoenix.de/index.php?bid=624)
www.praegnanz.de (http://www.praegnanz.de/weblog/315/)

Geschrieben von René am 05.10.2004 (4692x gelesen)
Diese News stammt von der Seite http://www.yubb.de
Sie ist unter http://www.yubb.de/artikel500.html direkt aufrufbar.

Jegliche Reproduktion dieser Seite oder ihrer Inhalte ist strengstens untersagt.