Sicherheit & Internet:Internet:Web-Entwicklung

Teil 5: CSS Tricks: Bilder mit Pep

28.4.2009 von Redaktion pcmagazin

ca. 1:25 Min
Ratgeber
  1. CSS Tricks: Bilder mit Pep
  2. Teil 2: CSS Tricks: Bilder mit Pep
  3. Teil 3: CSS Tricks: Bilder mit Pep
  4. Teil 4: CSS Tricks: Bilder mit Pep
  5. Teil 5: CSS Tricks: Bilder mit Pep

Bild und Beschriftung stehen innerhalb eines umfassenden Elements, die Bildbeschriftung selbst in einem span-Element:

<div class="beschriftung"><img src="blumen.jpg" alt=
"Blumen" /><span>rote Blumen</span></div>

Der Container muss dieselbe Größe wie das Bild haben. Rasch realisieren lässt sich das wiederum durch Floaten des Containers. Damit er als Bezugspunkt für die Positionierung der Bildbeschriftung dient, erhält er außerdem position: relative.

.beschriftung {
position: relative;
float: left;
}

Das Bild selbst muss zum Blockelement werden:

.beschriftung img {
display: block;
}

Nun zu den Formatierungen der Bildbeschriftung. Diese wird absolut positioniert - Bezugspunkt ist die umgebende Box, bei der ja position: relative definiert ist und die so groß ist wie das Bild. Die Beschriftung wird 0px von unten und von links positioniert. Da absolut positionierte Elemente nur so groß werden, wie sie wirklich Platz benötigen, brauchen sie außerdem eine explizite Breite.

.beschriftung span {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}

Damit ist die Bildunterschrift an Ort und Stelle, es fehlt aber noch das optische Feintuning. Der Bildbeschriftung wird eine Hintergrundfarbe und die Transparenz zugewiesen.

Zusätzlich ist im Beispiel eine Rahmenlinie oben und unten zur Begrenzung der Bildbeschriftung eingefügt. Außerdem wird eine explizite Höhe festgelegt und die Bildunterschrift in diesem Bereich über line-height vertikal zentriert:

.beschriftung span {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #222;
-ms-filter: "progid:
DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: progid:DXImageTransform.
Microsoft.Alpha(Opacity=60);
opacity: 0.6;
color: #fff;
text-align: center;
height: 2em;
line-height: 2em;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
}

Das Beispiel lässt sich problemlos variieren. Sie können Farben und Transparenzen nach Belieben anpassen oder die Beschriftung auch etwas weiter nach oben setzen.

Am Beispiel der Transparenz zeigt sich deutlich, wie sich auch fortgeschrittene CSS3-Eigenschaften heute schon einsetzen lassen - wenn auch mit einigem Aufwand für die Extrawürste des Microsoft Internet Explorers.

Mehr lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.