Textelement Bild links floaten lassen, Liste floatet nicht richtig

**Bitjongleur** · 16.12.2013, 11:39

Moin,

mir ist etwas aufgefallen, das wenn man in einem Textelement ein Bild hinzufügt und dieses unter Bildausrichtung links floaten lässt, eine Liste im Text nicht korrekt dargestellt wird. Der Text umfliesst das Bild korrekt mit den im Textelement angegebenen Abständen. Die List hingegen 'klebt' direkt am Bild und auch über CSS definierte Paddings oder Margins greifen dort nicht.
Ich habe dieses Verhalten auch in der Online-Demo nachstellen können.
Handelt es sich hier um einen Bug oder ein Verständnisproblem meinerseits?

Gruß
Bitjongleur

**magicsepp** · 16.12.2013, 17:35

läßt sich das mit der demo.contao.org nachstellen? Wenn ja wie genau?

**tab** · 16.12.2013, 18:05

Margin und padding per CSS greifen schon, aber erst, wenn sie auch größer sind als die Breite des Bilds links der Liste. Und dann habe ich schon aus eigener Erfahrung festgestellt, dass das Quadrat - oder was auch immer vor dem Listenelement steht - ein Margin des Bilds links davon wohl nicht einhält. Müsste einfach nachzustellen sein. Einfach einen Artikel machen, Textelement mit Bild hinzufügen (links oben) und dann eine unsortierte Liste im Textelement, die dann rechts vom Bild steht. Habs jetzt aber (noch) nicht in der Demo getestet, ist aber in meiner 3.2.2 Installation so.

**melzebub** · 16.12.2013, 21:10

Floate die Liste auch. Dann greifen auch die Margins wieder "normal".

**tab** · 16.12.2013, 21:48

Ja, hatte mich schon mit der etwas unschönen Liste abgefunden. Aber stimmt, dem <ul> ein "float:left;" verpasst und es funktioniert wie ursprünglich von mir geplant. Man erwartet irgendwie unwillkürlich, dass die Einrückungen von selbst so aussehen wie im TinyMCE, aber so ist es eben nicht

**Manski** · 13.10.2015, 09:28

Hallo allerseits, ich muss das hier noch mal aufkochen, da es bei mir nicht genügt, der ul einfach nur ein float:left zu verpassen. Bei mir schaut das so aus:

Der Text hat den richtigen Abstand zum Bild, die Liste nicht
Screenshot_2015-10-13-10-08-02.jpg

Gebe ich der ul ein float:left rutscht sie unter das Bild
Screenshot_2015-10-13-10-19-35.jpg

Hat jemand eine Idee, wie ich das in den Griff bekomme?

**Spooky** · 13.10.2015, 09:33

Probier mal http://www.w3schools.com/cssref/pr_l...e-position.asp

**Manski** · 13.10.2015, 09:38

Danke für die schnelle Antwort - leider funktioniert das nur neben dem Bild, darunter aber nicht
Screenshot_2015-10-13-10-35-52.jpg

**mlweb** · 13.10.2015, 13:46

Da ist für ol sicher noch ein Abstand vorhanden. Meist mit padding realisiert. Der muss dann für diese Listen links auf 0 gesetzt werden.

**tab** · 13.10.2015, 14:22

Naja, zumindest teilweise wird ja (neben dem Bild) ein Margin gebraucht, das ist dann eben unter dem Bild auch noch vorhanden, wo man sie vermutlich eher nicht haben will. Da kommt wahrscheinlich noch ein Padding vom Elternelement dazu, so dass es eben einen großen Abstand insgesamt auf der linken Seite ergibt. Aber meine Glaskugel gibt mir leider auch keine exakte Auskunft, ohne Link nicht so einfach die Sache. Kannst ja mal versuchen, lieber dem gefloateten image_container (<figure>) den gewünschten Abstand als margin-right zu geben anstatt der ol als margin-left. Damit kommst du (hoffentlich

) dann unterhalb des Bild weiter nach links.

**mlweb** · 13.10.2015, 15:33

Ich mag die Glaskugel auch nicht, aber in diesem Fall, sehe ich als relativ sicher an, dass <figure> einen rechten Abstand hat, den sonst würde es auch Probleme mit dem p-tag geben.

**Manski** · 13.10.2015, 20:05

N'abend allerseits,
hier die CSS der betreffenden Elemente.

figure: margin-right: 1em;
ol: margin-left: 0; padding-left: 0;
li: margin-left: 1em; (hat nebenbei keine Rolle gespielt, ob ol oder li die margin nach links bekommt)

Dann schaut's so aus:
2015-10-13_204905.jpg

Gebe ich der ol jetzt margin-left: 1em; wirkt sich das nur da aus, wo ich's nicht möchte - aber neben dem Bild ändert das auch nichts:
2015-10-13_205921.jpg

**mlweb** · 13.10.2015, 20:53

Stell doch bitte mal einen Link rein. In Deinem jetzt geposteten Code fehlt doch das von spooky empfohlene list-style-position: inside; für ol
Ich hatte das vorhin mal kurz in der Contao-Demo getestet und es hat funktioniert.

**tab** · 13.10.2015, 21:49

Ja, dann sollte es eigentlich passen von den linken Abständen her. Wundert mich nur ein wenig, dass zwischen Punkt 1 und 2 der vertikale Abstand anders ist als zwischen 2 und 3.

**Andreas** · 14.10.2015, 06:09

Schwieriges Thema, scheint ein Bug von den Browsern zu sein, dass man Listen nicht korrekt rechts um Elemente fließen lassen kann. Hatte das Problem auch mal, weiß aber nicht mehr, wie ich das gelöst hatte.

Ich kenne 2 Lösungen:
1.

HTML-Code:

ul, 
ol {
  overflow: hidden;
}

Dann hat die Liste den korrekten Abstand rechts zum Bild, aber sie fließt nicht unter dem Bild am linken Rand weiter sondern behält diese Einrückung.

2.

HTML-Code:

ul, 
ol {
  padding-left: 0;
}
li {
  position: relative;
  left: 1.125em;
}

Diese Werte sind für Listen mit Aufzählungszeichen linksbündig mit normalem Text. Willst du Listen allgemein nochmal einrücken, kannst du das über die Eigenschaft left von LI regeln. left:2.25em.

Ich meine die Lösung, die ich damals hatte war mit dem Pseudo :before oder mit list-style-image, aber die ist zu aufwändig, wenn man eine OL benutzt.

Die Lösung mit list-style-position:inside ist nur schön, solange man einzeilige Listenpunkte hat. Bei mehrzeiligen beginnt der Text ja dann unter dem Aufzählungszeichen.

**Manski** · 14.10.2015, 09:32

Hallo allerseits,

@mlweb
ol padding-left:0; list-style-position: inside; - funktioniert sehr gut
2015-10-14_101826.jpg

@tab
Da hatte sich in den 2.Listenpunkt eine p-Zeile eingeschmummelt

@Andreas
Lösung1 hatte ich auch schon versucht, kam aber aus den von dir genannten Gründen nicht infrage.

Lösung2 funktioniert bestens und im Fall einer 2.Zeile sieht die Einrückung auch super aus.
2015-10-14_100123.jpg

Vielen Dank an alle!

Beste Grüße, Manski

**mlweb** · 14.10.2015, 09:38

Zitat von Andreas

Schwieriges Thema, scheint ein Bug von den Browsern zu sein, dass man Listen nicht korrekt rechts um Elemente fließen lassen kann.

Ich weiss nicht ob ich das unbedingt als Bug bezeichnen will. Der Text und die Listen machen halt Platz für die Bilder, aber das Tag selbst nimmt noch die gesamte Breite ein.
Ich werde mal in mich gehen. Ich glaube ich hatte da außer den von Dir beschriebenen Lösungen noch mal etwas anderes gesehen/getestet.

Zitat von Andreas

Die Lösung mit list-style-position:inside ist nur schön, solange man einzeilige Listenpunkte hat. Bei mehrzeiligen beginnt der Text ja dann unter dem Aufzählungszeichen.

Das stimmt, finde ich bei mehrzeiligen Punkten auch unschön. Hatte aber gedacht den TO stört das weniger. Er hatte hier ein Bild gepostet und bemerkt, dass die Lösung neben den Bildern funktioniert, aber unter den Bildern eine Einrückung vorhanden ist und nur darauf bezog sich meine Antwort.
Abgesehen davon finde ich persönlich in den allermeisten Fällen eine auf diese Weise optisch geteilte Liste ohnehin unschön. Meist kommt noch hinzu, dass die Bildhöhe ja nicht mit Zeilenabstand bzw. Zeilenhöhe koresspondiert. Durch den Abstand unter dem Bild, der ja auch notwendig ist, kommt es dann zu unangenehm unregelmäßigen Zeilenabständen.

**mlweb** · 14.10.2015, 13:19

Zitat von mlweb

Ich werde mal in mich gehen. Ich glaube ich hatte da außer den von Dir beschriebenen Lösungen noch mal etwas anderes gesehen/getestet.

So habe mal gekramt. Die Lösung war zwar eine andere, aber auch die Voraussetzungen waren andere.

Die Liste hatte eine geringere Höhe als das Bild -war damals ein festes Layout, auch kein cms. Der vorhergehende Text sollte oberhalb des Bildes stehen und der nachfolgende Text sollte grundsätzlich unter das Bild. Damit konnte man für die Liste ein margin-left in der Größe des Bildes zzgl. Abstand wählen, sauber clearen und fertig. Hätte also bei einer längeren Liste die gleichen Nachteile wie die Lösung mit overflow.

**Andreas** · 14.10.2015, 17:47

Zitat von Manski

@mlweb
ol padding-left:0; list-style-position: inside; - funktioniert sehr gut

Zitat von mlweb

Das stimmt, finde ich bei mehrzeiligen Punkten auch unschön. Hatte aber gedacht den TO stört das weniger.

Wenn einen das Einrückverhalten der 1+nten Zeilen nicht stört, würde ich auch diese Lösung nehmen.

ol padding-left:0 ist für diese Lösung übrigens nicht mandatory, nur, wenn man die Standardeinrückung von Listen nicht möchte.

Zitat von mlweb

Ich weiss nicht ob ich das unbedingt als Bug bezeichnen will.

Schau mal dieses einfache Beispiel:
https://jsfiddle.net/Andreas/ubvsn4s5/
https://jsfiddle.net/Andreas/ubvsn4s5/embedded/result/
Ich denke, das dürfte nicht sein; kein CSS, ein einfaches Bild inline und eine Liste. Mit CSS nur das Bild left gefloatet.

**Andreas** · 14.10.2015, 18:17

Ach, ich seh gerade noch einen Nachteil (Browser-Bug) bei list-style-position:inside.
listfloat_-_2015-10-14_19.14.45.png
Man beachte die Einrückung der Zahlen bei Punkt 8 bis 11.

**Spooky** · 14.10.2015, 20:29

Wenn es reicht, dass die ganze Liste rechts vom Bild floated: dann

PHP-Code:


ul, ol {

    overflow:hidden;

}

( http://stackoverflow.com/a/710264 ).

Wenn man dies nicht möchte, dann so: http://jsfiddle.net/mblase75/TJELt/ ( http://stackoverflow.com/a/11904121 )

**Andreas** · 14.10.2015, 20:54

Sorry, aber das hatten wir oben alles schon.

**mlweb** · 14.10.2015, 22:17

Zitat von Andreas

Ich denke, das dürfte nicht sein; kein CSS, ein einfaches Bild inline und eine Liste. Mit CSS nur das Bild left gefloatet.

Ich gebe Dir Recht, dass es schön wäre, wenn die Liste genauso schön eingerückt wäre wie in einem Text ohne Bild. Aber ich sehe es nicht als klassischen Browser-Bug.
Aber egal wie man es betrachtet, wir versuchen immer das Beste aus all den gelegentlich vorhandenen Unzulänglichkeiten oder Bugs herauszuholen