i have a book that starts each chapter with an angled image, containing the initial letter of the chapter (see img01). In order to apply the text to that initial letter, I had to position it absolute.
That renders quite nice: see img02.
Text is not copyrighted!
!When i continue with "normal" text, however, it will overlap the <div> text of the absolute positioned part, due to the absolute positioning (see img03).
The code view looks like this:
Code:
<body>
<div class="container">
<img src="../Images/img01.jpg" alt="img01"/>
<div class="top-left">rüben im Buchenkretscham durchmaß der Wirt die einsame Gaststube.</div><div class="side-left">Er war wohl in schwerer Erregung. An allen Tischen blieb er stehen und trommelte mit den dicken, kurzen Fingern darauf. Immer lockte es ihn ans Fenster, und er hatte doch nicht den Mut, ganz nahe hinzutreten. Die Augen aber richteten sich immer aufs neue nach dem Buchenhofe. So vertieft war er in seine Gedanken und in das Anschauen des stattlichen Gehöftes, dass er nicht einmal bemerkte, wie sich die Tür öffnete und ein Mann erschien, der ihn sekundenlang beobachtete.</div>
<p>»Eine wunderschöne Besitzung, der Buchenhof, was, Schräger?«</p>
<p>»Ah – ah – ja – ja – natürlich – natürlich; ach, du bist’s, Berger, du hast mich ja –«</p>
<p>»So erschreckt, gelt ja? Hähä! Is kaum zu glauben, dass ’n Gastwirt erschrickt, wenn a Gast kommt.«</p>
<p>»Ich – ich dachte gerade nur –«</p>
<p>»Du dachtest gerade nur darüber nach, was doch der Buchenhof für ’ne riesig hübsche Wirtschaft wär’, und da kam ich dummerweise und störte dich in deiner Andacht.«</p>
<p>»Bist doch halt a gespaßiger Mensch, Berger. Immer weißte ’n Witz. Was kann ich dir denn einschenken?«</p>
<p>»Gar nischt! Ich will dich bloß was fragen, Schräger. – – Weiß er’s schon?« Und er zeigte mit dem Daumen nach dem Buchenhofe.</p>
<p>»Was – was soll er denn wissen?«</p></div>
</body>
The css is this:
Code:
.container {
position: relative;
text-align: justify;
color: black;
}
.top-left {
position: absolute;
top: 270px;
left: 230px;
}
.side-left {
position: absolute;
top: 305px;
left: 90px;
}
Is there a way out of the problem?