Liebe AutorInnen, liebe SelfpublisherInnen,
heute möchte ich euch eine weitere Möglichkeit zeigen, Bilder zu platzieren. Ich muss zugeben, dass ich sie selbst noch nicht so häufig angewendet habe, da sie einen dazu verführt zu glauben, man könne doch so etwas wie ein Print Layout auf einen Reader oder Smartphone übertragen. Das ist dann auf jeden Fall mit Frust verbunden. Man hat einfach nicht die gleiche Kontrolle über die Art, wie eine Seite dargestellt wird. Die gute Nachricht ist aber, und das wissen wir alle, weil wir gewohnt sind auf Bildschirmen zu lesen, dass auch die Erwartung als Leser an einen digital dargestellten Text anders ist. Kurz es geht darum, Bilder nicht einfach, wie Stopper zwischen den Text zu platzieren, sondern sie floaten zu lassen. Um Floating Images.
Wann kann das gewünscht sein? In den unteren Beispielen ist eine Autorenseite dargestellt, wie sie oft am Ende eines Buches erscheint.
Das Autorenfoto steht frei über dem relativ kurzen Text. Auf allen drei Devices – Phone, Tablet und Kindle – erscheint Bild und Text auf der gleichen Seite. Jedenfalls, wenn der Leser nicht eine überdimensioniert große Schrift wählt.
Img_Float left
Hat man aber sehr viel mehr Text, finde ich es eleganter, wenn der Text auch neben dem Foto erscheint. (Wie man das mit einfachen Tabellen erreicht, habe ich in einem früheren Beitrag erläutert.) Auf den untenstehenden Beispielen umfließt der Text das Foto.
Das Foto kommt in einen eigenen div-Container der auf der linke Bildschirmseite dargestellt werden soll.
Die CSS Anweisung dafür lautet:
div.floatleft {float:left; width: 40%; margin-right: 1.5em;}
Die Klasse nenne ich .floatleft. Je einfacher, desto besser. In den geschweiften Klammern stehen die Anweisungen.
- die Entscheidende hier: float:left; sie gibt an, dass der Container auf die linke Bildschirmseite »fließen« soll.
- width: 40%; gibt an, wieviel Platz der Container am linken Rand einnehmen soll. In diesem Fall 40%.
- margin-right: 1.5em; sorgt dafür, dass zwischen dem rechten Bildrand und dem Text ein Abstand von 1.5em stehen bleibt.
Die Anweisung für das Bild selbst lautet:
div.floatleft img {width:100%; margin-top: 0em;}
Das heißt: falls in dem div_Container mit der Klasse .floatleft ein Bild img enthalten ist, soll es 100% des Containers füllen. Mit der Begrenzung nach oben margin-top kann man etwas herumfiddeln und von Fall zu Fall entscheiden, wie oberer Bildrand und oberer Textrand am besten zueinander passen. Ich habe hier alles auf Null gesetzt und Bild und Text schließen oben bündig ab.
Der dazugehörige html-Code für das floatende Bild lautet ganz einfach:
<div class=„floatleft“><img src=„../Images/KatrinBongard.jpg“ /></div>
Caption
Soll noch eine Caption unter dem Bild erscheinen, wie in diesem Fall der Name des Fotografen, fügt man seiner CSS noch folgende Zeile an:
div.floatleft p {font-size: 0.7em; letter-spacing:0.2em; text-align:right; margin: 0em 0.5em 0em 0em; }
Damit ist dann festgelegt, wie groß die Bildunterschrift sein soll, dass sie rechts unter dem Bild stehen soll und zwar um 0.5em eingerückt. Der html-Code lautet:
<div class=„floatleft“><img src=„../Images/KatrinBongard.jpg“ /><p>©Uwe Carow</p></div>
Img_Float right
Natürlich kann man Bilder auch auf die rechte Seite oder auf beide Seiten des Bildschirms »fließen« lassen.
In diesem Fall habe ich die Breite der Bilder jeweils auf 33% der Seite gesetzt. (Das abschließende Segelboot natürlich einfach als Container unter den Text.)
div.floatleft {width: 33%; float:left; margin-right: 1em;}
div.float_right {width: 33%; float:right; margin-left: 1em;}
div.floatleft img, div.floatright img {width:100%;}
Und so sieht das ganze dann auf einem Smartphone aus:
Liebe Grüße
Uwe
