Homepagebau
Dateiversion:
diesen Beitrag diskutieren,
ergänzen, eine Frage stellen

Grafiken mit CSS formatieren

 

Bildunterschriften


Dieser Artikel erklärt, wie sie eine "Blankbox" anlegen und so z.Bsp. Bildunterschriften bei Grafiken umsetzen können.

Das ist ein Beispiel:

Abb. 1: "Bildunterschrift"

Kein Schulwissen:

Sicher - Grafiken in HTML einbinden ist nicht schwer und gehört zum kleinen 1x1.
Anders wenn es um die Formatierung geht.

Fakt ist: Grafiken in HTML haben das Problem, dass sie zwar mit dem Attribut "ALIGN" (über align="right", bzw. align="left") an den Rand der Seite geschoben werden können, aber so lassen sich keine Bildunterschriften mehr einfügen oder andere nützliche Infos.

Wie geht das?

Dafür gibt es eine einfache Lösung: hier die CSS-Syntax.
Bitte kopieren sie diesen Abschnitt und fügen sie ihn in ihre HTML-Datei ein.

<style>

.GRAFIKrechts {
float: right;
}

.GRAFIKlinks {
float: left;
}

</style>

Soweit ist das noch nicht sehr beeindruckend...
aber: im HTML-Quellcode können nun Bildunter- oder Überschriften, sowie andere Elemente zusammen mit dem Bild in einem unsichtbaren Rahmen am rechten oder linken Rand der Seite positioniert werden, so dass der normale Text diesen gesamten Abschnitt so umfließt, wie sie das auch von Abbildungen z.Bsp. in Büchern kennen.

<P CLASS="GRAFIKrechts"><IMG ...><BR>Das ist eine Bildunterschrift</P>

Erläuterung:

.GRAFIKrechts {
float: right;   
Box rechts (= "right") anordnen - Alternative: "left" um Box am linken Seitenrand anzuordnen
text-align: center;    "left" angeben um Bildunterschrift links, "center" für zentriert und "right" um sie rechts unter dem Bild anzuzeigen.
}

Der Trick daran ist simpel - "float" zwingt den Browser eine leere Box anzulegen.
Weil nicht nur das Bild sondern der gesamte Absatz als freistehende Box formatiert wird, wird alles, was vor oder nach dem IMG-Tag folgt, somit auch innerhalb der Box angezeigt.