Text soll meherer unterschiedlich breite Bilder umfließen

    Hallo,


    ich hab mal wieder eine Frage für ein digitalisiertes Buch. Die OCR-Software hat die Bilder leider absolut grausam platziert und ich muss das manuell anpassen. Ich habe Bilder von unterschiedlicher Breite. Normal mach ich das so:

    Code
    <table width="50%" align=right><tr><td>
<img src="main-44.jpg" alt=""/>
<p class="caption">Bilduntertitel</p>
</td></tr></table>


    Bei gleich breiten Bildern mach ich auch mehrere untereinander und seltener nebeneinander. Daher die Tabelle, für nur ein Bild brauche ich kleien Tabelle.


    Wenn ich jetzt aber ein Bild habe, das ich nur auf 25% Breite haben will und dich das wie oben einfüge, wird es wie der Fließtext behandelt und die 2. Tabellee wird neben der 1. platziert.


    Mit "float: none" kann ich zwar verhindern, dass die 2. Tabelle neben der 1. Platziert wird, aber das verhindert auch den kompletten Fließtext danach.


    Am Ende soll das 1. Bild mit einer Breite von 50% rechts stehen und das 2. Bild mit 25%. Der Text neben dem 1. Bild soll 50% der Breite einnehmen und auf 75% wechseln wenn er neben dem 2. Bild steht.

    Kannst du mal ein Link zu deiner Seite posten?

    Dann erklärt sich vielleicht auch warum du Bilde in einer Tabelle machst?

    Tabellen sind eigentlich nicht dafür gedacht.


    Falls du kein Link posten kannst, dann erstellt ein Codepen, dann kann das besser nachvollziehen.

    Mit dem jetzigen Code kann man nicht viel anfangen

    Es gibt keine Seite, das ist Code aus einem eBook im epub-Format - was letztlich nichts anderes als HTML ist. Das eBook wurde aus einer gescannten PDF erstellt mit Abby Finereader.


    Der urspüngliche Code vom Finereader sah so aus:


    <p>langer text</p>

    <img>bild</img>


    Das Bidl wird hier unterhalb des Textes platziert. Will ich das neben dem Text haben geht das mit 'align=right' im img-Tag oder im table-Tag. Ich nutze den Table-Tag um Bilder in gleicher Größe neben- oder untereinander zu platzieren. Geht vielleicht auch anders.


    Ich hab aber mal auf die Schnelle in Impress ein Schema erstellt wie ich mir das vorstelle. Rot soll das Textfeld sein, blau die Bilder (oder die Bilder innerhalb der Tabellen).

    Wenn es nur ein Bild wäre oder zwei Bilder mit gleicher Breite wäre es eine Kleinigkeit, auch ohne Tabelle den Text und das/die Bild(er) nebeneinander anzuordnen. Mit dieser treppenförmigen Anordnung kenne ich jedoch keine Lösung nur mit CSS. Mal sehen ob da noch jemand anders eine Idee hat.

    Das epub Format unterstützt auch CSS.


    Gibt es nicht eine Möglichkeit ein element relativ zu einem anderen elemtent zu platzieren, also das obere Bild wäre bild1, dass wird das untere immer unter bild1 platziert, nur mit einer anderen breite.

    Die Anordnung der Bilder ist auch kein Problem, aber Du willst ja, dass der Text links davon beide Bilder umfließt, d. h. der Text links vom unteren Bild geht weiter nach rechts, so dass er ebenfalls an das Bild anschließt. Und das ohne dass Du manuell Zeilenumbrüche einfügen musst oder den Text auf zwei Container verteilen.


    Und hiermit:

    Zitat

    Mit dieser treppenförmigen Anordnung kenne ich jedoch keine Lösung nur mit CSS.

    meinte ich, ich kenne keine Lösung, die nur CSS benutzt.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden