Formatierungsproblem (Textblock mit Bild)

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

Ich habe eine Website die aus viel Text mit Bildern besteht. Dabei gehört immer ein Textblock zu einem Bild und das Bild kann entweder rechts oder links vom Text stehen.

Die Bilder sind als IMG-Element mit CSS-Attribut float: left oder float: right eingefügt. Die Textblöcke sind in DIV-Elemente eingeschlossen.

Wenn das Bild rechts ist, dann funktioniert alles wie ich es will, wenn das Bild aber links ist, dann gibt es zwei Dinge die ich momentan nicht oder nur mäßig befriedigend realisiert habe.

  1. Der Text ist länger als das Bild hoch ist. In dem Fall möchte ich, dass der Text nach dem Bild nicht unter dem Bild fortgesetzt wird sondern, dass die Zeilenanfänge auch nach dem Bild auf gleicher Ebene wie neben dem Bild sind.

  2. Der Text ist kürzer als das Bild hoch ist. In dem Fall möchte ich, dass der danach folgende Textblock erst nach dem Bild beginnt, sich also nicht neben das Bild schiebt.

Den Fall 1) habe ich momentan so gelöst, dass das Text-DIV ein margin-left: Bildbreite + Abstand hat. Den Fall 2) habe ich so gelöst, dass in den Fällen wo der Text kürzer ist das Text-DIV eine height: Bildhöhe + Abstand hat. Beides wird über PHP gehandhabt.

Die Lösung für 1) funktioniert gut, auch wenn sie mir nicht besonders gut gefällt. Die Lösung für 2) funktioniert bei Desktop-Browsern gut, aber nicht bei Mobilbrowsern. Das liegt daran, dass ich beim Erstellen wissen muss ob der Text kürzer ist und dann die height einfüge. Bei der Darstellung in Mobilbrowsern ändert sich aber das Größenverhältnis von Bild und Text. Dadurch wird die Höhe die am Desktop-Browser eine Ausdehnung des DIV war im Mobilbrowser zu einer Einschränken und Formatierungsfehler des darüber hinaus hängenden Texts sind die Folge.

Deswegen würde ich mich über Tipps freuen wie das mit reinem HTML/CSS lösbar wäre. Javascript wäre wahrscheinlich auch eine Möglichkeit, weil sich damit die wirkliche Höhe des Bildes im Browser abfragen lassen würde, aber mir wäre reines HTML/CSS lieber.

Vielen Dank und schöne Grüße, Robert

#2

Hi,

also könntest du vielleicht einfach mal deinen Code posten?

#3

Moin,

Ich habe eine Website die aus viel Text mit Bildern besteht.
Dabei gehört immer ein Textblock zu einem Bild und das Bild
kann entweder rechts oder links vom Text stehen.

Hört sich an wie eine Definitionsliste. Das Bild ist der Term, der Text die zugehörige Beschreibung.

Die Bilder sind als IMG-Element mit CSS-Attribut float: left
oder float: right eingefügt. Die Textblöcke sind in
DIV-Elemente eingeschlossen.

Autsch. markiert eine Gruppe. Text wird mit ausgezeichnet.
Aber wie schn gesagt, eine Definitionsliste würde sich hier anbieten.

  1. Der Text ist länger als das Bild hoch ist. In dem Fall
    möchte ich, dass der Text nach dem Bild nicht unter dem Bild
    fortgesetzt wird sondern, dass die Zeilenanfänge auch nach dem
    Bild auf gleicher Ebene wie neben dem Bild sind.

Das erreichst Du, indem Du dem Container, in dem der Text steht, einen Astand nach links gibst, der mindestens so groß ist, wie das Bild breit (margin-left:xxxpx).
Denn der Container erstreckt sich natürlich auch unterhalb des floatenden Bildes, das ja aus dem Textfluss genommen ist.

  1. Der Text ist kürzer als das Bild hoch ist. In dem Fall
    möchte ich, dass der danach folgende Textblock erst nach dem
    Bild beginnt, sich also nicht neben das Bild schiebt.

Wer „float“ sagt, muss auch „clear“ sagen. Das gefloatete Bild ist aus dem Textfluss genommen. Der Textfluss geht da weiter, wo der Container mit dem Text endet. Mit clear setzt Du den Textfluss hinter das gefloatete Element.

Den Fall 1) habe ich momentan so gelöst, dass das Text-DIV ein
margin-left: Bildbreite + Abstand hat.

Warum fragst Du dann? :wink:

Den Fall 2) habe ich so
gelöst, dass in den Fällen wo der Text kürzer ist das Text-DIV
eine height: Bildhöhe + Abstand hat.

Und wenn der Nutzer die Schriftgröße ändert, geht das schief?

Beides wird über PHP
gehandhabt.

Nein, beides ist CSS. Mit PHP hat das nichts zu tun, dass der Code durch PHP generiert wird, ist irrelevant, weil der Browser ihn darstellt und der Browser nichts von PHP weiß.

Das liegt
daran, dass ich beim Erstellen wissen muss ob der Text kürzer
ist und dann die height einfüge.

Das kannst Du aber nicht wissen.

Bei der Darstellung in
Mobilbrowsern ändert sich aber das Größenverhältnis von Bild
und Text.

Das hat nichts mit Mobilbrowsern zu tun, sondern nur mit kleinen Viewports, also den ganz normalen und üblichen Einstellungsmöglichkeiten, die jeder Nutzer hat.

Deswegen würde ich mich über Tipps freuen wie das mit reinem
HTML/CSS lösbar wäre.

Bitte sehr :smile:

Javascript wäre wahrscheinlich auch eine
Möglichkeit, weil sich damit die wirkliche Höhe des Bildes im
Browser abfragen lassen würde, aber mir wäre reines HTML/CSS
lieber.

Und wenn JavaScript abgeschaltet ist?
Die Höhe des Bildes musst Du aber nicht abfragen, die weißt Du eigentlich. Aber die Größe des Textes…in Abhängigkeit von der Breite des Containers und der Größe des Fonts? Hmmm…

Liebe Grüße,
-Efchen