26.01.2008

Text zu Bildern anordnen

Für die Kombination von Text und Bildern gibt es je nach Vorstellung unterschiedliche Lösungen. Nachfolgend einige Beispiele, wie man Bilder mit Text kombinieren und positionieren kann.
Beachte: In den Beispielen 1 bis 5 befindet sich der Inhalt (Text und Bild) in einem 420px breiten (blau umrandeten) Div.

1. Grunddarstellung von Bild und Text

Bilder und Grafiken - "<img>" - sind Inline-Elemente und erscheinen deshalb im normalen Textfluss. Das sieht ohne spezielle Style-Angaben so aus:

BannerText neben dem Banner Text neben dem Banner Text neben dem Banner

Quelltext:
<div style="width: 420px; padding: 10px; border: 1px solid #27408B;"> <img src="banner.png" width="234" height="60" border="0" alt="Banner">
Text neben dem Banner Text neben dem Banner Text neben dem Banner
</div>

Das Ergebnis spricht sicher nicht jeden an. Deshalb soll im nächsten Beispiel der Text so angeordnet werden, dass er an der oberen Bildkante beginnt.

2. Text rechts neben dem Bild

Um den Text rechts neben dem Bild und beginnend an der oberen Bildkante anzuordnen, lassen wir die Grafik links floaten, so dass der Text rechts von ihr steht.

Banner

Text neben dem Banner Text neben dem Banner Text neben dem Banner noch mehr Text noch mehr Text noch mehr Text noch mehr Text

HTML:

<img class="links" src="banner.png" width="234" height="60" border="0" alt="Banner">
<p> Text neben dem Banner Text neben dem Banner Text neben dem Banner noch mehr Text noch mehr Text noch mehr Text noch mehr Text
</p>

CSS:

.links {
float: left;
margin-right: 10px;
}

Gegenüber dem Ausgangscode wurde dem img ein float: left; zugewiesen. Außerdem noch ein margin-right: 10px;, was bewirkt, dass zwischen Bild und Text etwas Abstand hergestellt wird.
Der Text wurde in einen Absatz gesetzt. Normalerweise hat dieser einen oberen Abstand. Damit er dennoch bündig zur Bildoberkante beginnt, weisen wir ihm ein margin: 0; zu.

3. Text links neben dem Bild

Um den Text links neben dem Bild darzustellen, muss es lediglich rechts gefloatet und der Seitenabstand links gesetzt werden:

Banner

Text neben dem Banner Text neben dem Banner Text neben dem Banner noch mehr Text noch mehr Text noch mehr Text noch mehr Text

HTML:

<img class="rechts" src="banner.png" width="234" height="60" border="0" alt="Banner">
<p> Text neben dem Banner Text neben dem Banner Text neben dem Banner noch mehr Text noch mehr Text noch mehr Text noch mehr Text
</p>

CSS:

.rechts {
float: right;
margin-left: 10px;
}

4. Text soll Grafik nicht "unterlaufen"

In den Beispielen 2 und 3 setzt sich der neben dem Bild angeordnete Text unterhalb des Bildes fort, sobald der die Bildhöhe erreicht hat.
Soll dies verhindert werden, muss dem Text ein entsprechender Abstand in Größe der Bildbreite zugewiesen werden. Am Ende des Textes ist zu clearen, damit das nächste Element wieder außerhalb der Float-Angabe angeordnet wird.

Banner

Text neben dem Banner Text neben dem Banner Text neben dem Banner noch mehr Text noch mehr Text

Normaler Text, der die geamte Breite einnimmt und sich durch das Clearing auch unterhalb des Bildes forsetzt.

Quelltext:
<div style="width: 420px; padding: 10px; border: 1px solid #27408B;">
<img class="rechts" src="banner.png" width="234" height="60" border="0" alt="Banner">
<p style="margin: 0 244px 0 0;">
Text neben dem Banner Text neben dem Banner Text neben dem Banner noch mehr Text noch mehr Text noch mehr Text noch mehr Text
</p>
<br style="clear: both;">
<p>
Normaler Text, der ....
</p>
</div>

Hier hat der Text einen rechten Abstand von 244px. Er setzt sich zusammen aus 234 px Bildbreite und 10px Abstand zwischen Text und Bild.

5. Vertikal zentrierter Text neben einem Bild

Sofern ein einzeiliger Text neben einem Bild vertikal zentriert werden soll, ist dies durch Angabe einer line-height im p-Element entsprechend der Bildhöhe möglich:

Banner

Vertikal zentrierter Text

<div style="width: 420px; padding: 10px; border: 1px solid #27408B;">
<img class="rechts" src="banner.png" width="234" height="60" border="0" alt="Banner">
<p style="margin: 0; line-height: 60px;">
Vertikal zentrierter Text
</p>
</div>

Bei mehrzeiligem Text funktioniert das jedoch nicht so einfach, weil dann entsprechend Zeilenanzahl, Zeilenhöhe und Bildhöhe gerechnet werden müsste.
Für diesen Fall empfehle ich, für Bild und Text eine ganz normale Tabelle mit zwei nebeneinanderliegenden Zellen zu verwenden.
Es gibt für mehrzeilig vertikal zentrierten Text zwar auch eine reine CSS-Lösung; der Code-Aufwand dafür ist jedoch recht umfangreich und steht m.E. nicht in Relation zum Ergebnis. Wer Interesse hat, kann sich hierzu den Quelltext dieser Seite zu Gemüte führen.

6. Text unterhalb eines Bildes

Für eine "Bild-Unterschrift" kommt es darauf an, dass der Text nicht breiter wird als das Bild. Deshalb ist es sinnvoll, Bild und Text in einen Div zu setzen, dessen Breite der des Bildes entspricht:

Banner
Text unterhalb einer Grafik, dessen Breite auf die der Grafik begrenzt ist.
Hier mit Zeilenumbruch zwischen Grafik und Text.
Banner

Text unterhalb einer Grafik, dessen Breite auf die der Grafik begrenzt ist.
Hier ist der Text in einem Absatz, was zu geinem größeren Abstand zum Bild führt. Der Abstand kann durch Zuweisung eines margin-top-Wertes korrigiert werden.

Quelltext:
<div style="width: 234px;">
<img src="banner.png" width="234" height="60" border="0" alt="Banner"><br>
Text unterhalb einer Grafik, dessen Breite auf die der Grafik begrenzt ist.<br> Hier mit Zeilenumbruch zwischen Grafik und Text.
</div>

Weitere Banner zu dieser Seite findet ihr übrigens hier.

Quelltext:
<div style="width: 234px;">
<img src="banner.png" width="234" height="60" border="0" alt="Banner">
<p>
Text unterhalb einer Grafik, dessen Breite auf die der Grafik begrenzt ist.<br> Hier ist der Text in einem Absatz, was zu geinem größeren Abstand zum Bild führt. Der Abstand kann durch Zuweisung eines margin-top-Wertes korrigiert werden.
</p>
</div>

nach oben