17.05.2009

Fließtext um alle Grafikseiten
(Cross-Column Pull-Out)

Mitunter besteht der Wunsch, auf einer Website eine Grafik komplett mit Fließtext zu umgeben. Dafür gibt es zwar kein probates Mittel, aber mit einigen CSS-Tricks kann selbst dieser Wunsch in Erfüllung gehen.
Im folgenden Beispiel soll eine Grafik mit einem zweispaltigen Blocksatz-Text umgeben werden. Da dies nicht automatisiert erreichbar ist, müssen wir uns mit einer "Sonderkonstruktion" behelfen.

1. Einige Standardeinstellungen

Definieren wir zunächst einige Standardeinstellungen, um eine browsereinheitliche Darstellung zu gewährleisten. Ferner noch einen Bereich (Div), der unser Konstrukt beinhaltet und der zentriert sein soll.

* {
margin: 0;
padding: 0;
}

p {
padding: 10px 0;
}

#wrapper {
width: 760px;
margin: 0 auto;
font-family: Verdana;
text-align:justify;
font-size: 0.9em; line-height: 1.3em;
background: #F1EDC2;
}

2. Textspalten

In unsere "Hülle", den #wrapper, werden nun zwei Textspalten eingefügt.
Um sie nebeneinander anzuordnen erhalten sie ein float: left. Da beide Spalten identisch sind, kommen wir mit einer CSS-Klasse aus, die mehrmals verwendet werden kann. Als Spaltenbreite nehmen wir zunächst die hälftige #wrapper-Breite und ziehen davon noch je 10px für den linken und rechten Innenabstand (padding) ab, somit 360px.
Daraus ergeben sich folgende Spalteneigenschaften:

.spalte {
width: 360px;
float: left;
padding: 0 10px;
}

In beide Spalten fügen wir nun den gewünschten Text ein; im Beispiel wird beliebiger "Blindtext" verwendet.
Teilt den Text unter Berücksichtigung der gewünschten Absätze manuell so auf, dass er möglichst gleichmäßig auf beide Spalten verteilt wird.

Unser HTML-Quelltext sieht bis zu dieser Stelle nun so aus:

<div id="wrapper">

<div class="spalte"><!--Beginn linke Spalte-->
<p>
Text linke Spalte ...
</p>
</div><!--Ende linke Spalte-->

<div class="spalte"><!--Beginn rechte Spalte-->
<p>
Text rechte Spalte ...
</p>
</div><!--Ende rechte Spalte-->

</div><!--Ende #wrapper-->

Unser erstes Zwischenergebnis zeigt die Demo 1.

3. Platzhalter in der linken Spalte

In der linken Spalte fügen wir nun einen Platzhalter für die spätere Grafik ein. Die Platzhalterbreite entspricht der hälftigen Breite unserer verwendeten Grafik. Die hier verwendete Beispielgrafik ist 280px breit, so dass sich für den Platzhalter ein width-Wert von 140px ergibt.
Die Platzhalter-Höhe entspricht grundsätzlich unserer Graffikhöhe, also 280px. Soll die Grafik noch einen Untertext erhalten, so wird die Höhe entsprechend erweitert, hier z.B. auf 290px.
Um den Platzhalter im linken Spaltenteil rechts zu platzieren wird er rechts gefloatet.
Damit der Text der Grafik nicht zu nahe kommt, berücksichtigen wir einen oberen und unteren Innenabstand (padding) von je 10px.
Somit bekommt unser Platzhalter für die linke Spalte folgende Eigenschaften zugewiesen:

.platzhalterlinks {
width: 140px;
height: 290px;
float: right;
padding: 10px 0;
}

Weil der Platzhalter mitten in den Text eingefügt wird und sich somit innerhalb eines Absatzes befindet, darf er "von Haus aus" kein Blockelement sein. Folglich rufen wir ihn als Inline-Element mit einem "span" auf. Dass er sich dennoch als Blockelement darstellt, liegt an seiner Float-Eigenschaft.
Da es sich lediglich um einen Platzhalter handelt, benötigt er bis auf ein Leerzeichen auch keinen Inhalt.

Sucht euch innerhalb der linken Spalte eine passende Stelle aus, wo die Grafik platziert werden soll.
Der HTML-Teil wird an dieser entsprechenden Stelle wir folgt ergänzt.

<div id="wrapper">

<div class="spalte"><!--Beginn linke Spalte-->
<p>
Text linke Spalte ...
<span class="platzhalterlinks"> &nbsp; </span>
Text linke Spalte ...
</p>
</div><!--Ende linke Spalte-->

<div class="spalte"><!--Beginn rechte Spalte-->
<p>
Text rechte Spalte ...
</p>
</div><!--Ende rechte Spalte-->

</div><!--Ende #wrapper-->

Unser Vorhaben nimmt nun schon etwas konkretere Formen an, wie Demo 2 zeigt.

Webhosting preiswert! - Alfahosting.de

4. Platzhalter für die Grafik

Nun benötigen wir in der rechten Spalte noch einen Platzhalter, damit die Grafik eingefügt werden kann.
Wir können nahezu die gleichen Angaben wie für den Leerraum in der linken Spalte verwenden, jedoch mit folgenden Unterschieden:
Es wird links statt rechts gefloatet.
Die Breite entspricht der vollen Grafikbreite, hier also 280px.
Wenn nun die Grafik in den rechten Platzhalter platziert wird, ist ihre linke Seite zunächst immer noch innerhalb der rechten Spalte. Folglich muss die Grafik nach links verschoben werden. Wir verwenden einen negativen margin-Wert entsprechend der hälftigen Bildbreite sowie einem von der rechten Spalte zu berücksichtigenden Padding-Wert von 10px, insgesamt also -150px.
Wollen wir noch einen Bilduntertext verwenden, so kann er an dieser Stelle gleich mitformatiert werden.
Damit ergben sich folgende Angaben:

.platzhaltergrafik {
width: 280px;
height: 290px;
float: left;
padding: 10px 10px 10px 0;
margin-left: -150px;
display: inline; /*--gegen IE6-Doubled-Float-Margin-Bug--*/
text-align: center;
font-weight: bold;
}

Auch dieser Platzhalter wird wieder per "span" eingebunden. Wir platzieren ihn innerhalb der rechten Spalte an der Textstelle, die vom oberen Abstand her mit dem Platzhalter der linken Spalte übereinstimmt.
Schließlich verwenden wir -mit Ausnahme der linken Seite - 10px padding, damit sich die Grafik etwas vom Text abhebt.
Das Zwischenergebnis zeigt unsere Demo 3. Nun fügen wir innerhalb dieses Grafik-Platzhalters noch unsere Grafik und ggf. einen Grafikuntertext ein.
Zu berücksichtigen ist ferner, dass wir, nachdem die Spalten gefloatet sind, auch im Anschluss daran wieder clearen.
Ergänzen wir also unseren HTML-Teil wie folgt:

<div id="wrapper">

<div class="spalte"><!--Beginn linke Spalte-->
<p>
Text linke Spalte ...
<span class="platzhalterlinks"> &nbsp; </span>
Text linke Spalte ...
</p>
</div><!--Ende linke Spalte-->

<div class="spalte"><!--Beginn rechte Spalte-->
<p>
Text rechte Spalte ...
<span class="platzhaltergrafik">
<img src="img/0062/werner.jpg" width="280" height="280" border="0" alt="werner">
</span>
Text rechte Spalte...
</p>
</div><!--Ende rechte Spalte-->

<br style="clear: both">
</div><!--Ende #wrapper-->

Das war's dann auch schon. Das Ergebnis zeigt unsere Demo 4.

Zugegeben: Es ist einmal wieder eine CSS-Spielerei, weil es für Fließtext um eine Grafik kein Standardmittel gibt.
Gleichwohl zeigt dieses Beispiel einmal mehr, dass sich mit einigen "Tricks und Krücken" auch CSS-Lösungen finden lassen, für die es sonst keine Standardlösungen gibt.
In diesem Zusammenhang sei auch auf diese Anleitung verwiesen.

Ich bedanke mich an dieser Stelle bei Garnet, die mich auf dieses Thema aufmerksam gemacht hat. Der Ursprung zu dieser Anleitung stammt von A List Apart.

Bleibt noch die Frage, weshalb das Ganze von seinen Konstrukteuren als "Cross-Column Pull-Out" bezeichnet wurde. 'Cross-Column' kann man auf deutsch als 'spaltenübergreifend' übersetzen. In diesem Fall kann man also sagen, dass die Grafik "spaltenübergreifend" über die beiden Spalten gezogen wurde, wie mir ein aufmerksamer Leser mitteilte.

nach oben