Ich bastele eine kleine Seite mit alten Kameraprospekten. Ich möchte jeweils ein Bild (von dem Prospekt) mit einem kurzen Begleittext versehen, und zwar so, dass der Text rechts obenbündig neben dem Bild steht. Dazu - so dachte ich mir - packe ich ein Bild mit Text in einen DIV-Container, und lasse die einzelnen Container links floaten. Somit wird also eine Zeile mit Containern gefüllt, und am rechten Fensterrand wird umgebrochen, und der nächste Container rutscht in die nächste Zeile. Etwa so:
Jetzt habe ich natürlich das Problem, dass am rechten Fensterrand, bevor der ganze Container umgebrochen wird, erstmal der Inhalt umgebrochen wird. Das bedeutet, dass der Text unter das Bild rutscht - und das soll auf keinen Fall passieren.
Als Ausweg habe ich das erst mal mit einer 2-spaltigen Tabelle als Container geschrieben:
Das klappt auch wunderbar, aber kann ich das nicht irgendwie mit DIVs lösen?
Das klappt leider nicht, da der Text auch Umbrüche <br> enthält, und daher nur die erste Zeile neben dem Bild erscheint, der Rest darunter. Außerdem passiert so genau das gleiche, wenn dem Container der Platz ausgeht: Der gesamte Text wird unter das Bild gebrochen. Der Container bräuchte eine fixe Breite, aber die kann ich ihm nicht geben, da die Bilder unterschiedlich breit sind. Außerdem sollen ja alle Eigenschaften in der entsprechenden CSS-Klasse definiert sein, weswegen ich ja auch die Klassen .bild und .text definiert habe. Ich bräuchte etwas ähnliches wie "white-space: nobreak" auf "Objektebene".
Trotzdem Danke, Gruß, Dennis.
Umbruch von Objekten innerhalb DIV-Container verhindern
Der Fehler lag woanders: Ich habe den IMG-Tag mit der Klasse "bild" verdingst, und die befiehlt u.a.:
vertical-align: top;
was dann dazu führt, dass der Text nach dem ersten <br> komplett unters Bild gebrochen wird. Bei der Notation mit DIV ist das ja allerdings nicht notwendig, daher kann ich das rausschmeißen und *dieses* Problem wäre gelöst. Dafür habe ich jetzt ein anderes: Da ja der IE großzügigerweise MIN-WIDTH ignoriert, lässt er den DIV-Container zusammenschnurren, und dabei kann es passieren, dass der Text dann unters Bild gebrochen wird. Bei FF passiert das nicht, da wird der Container ordnungsgemäß komplett umgebrochen - aber wenn der Text zu lange ist, wird er auch dort unters Bild gebrochen. Das ist wohl nicht zu verhindern?
Vielen Dank und Gruß, Dennis.
Umbruch von Objekten innerhalb DIV-Container verhindern
Wenn ich Deinen Code komplett übernehme, dann tritt der geschilderte Fehler nicht auf.
Wenn ich aber oben explizit die HTML-Variante STRICT bestimme, oder den DTD-Url angebe, dann tritt dieser Fehler auf.
Also:
Ohne DOCTYPE und mit <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> tritt der Fehler nicht auf.
Aber mit <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"> oder <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> oder <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> tritt der Fehler auf.
Was nun? Ich dachte, man sollte möglichst STRICT verwenden? Den DOCTYPE komplett weglassen "geht doch nicht", oder?
Dennis.
Umbruch von Objekten innerhalb DIV-Container verhindern