XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Bild linksbündig von Liste mit Listenpunkt umfliesen lassen (http://xhtmlforum.de/showthread.php?t=68043)

Overtone 31.08.2012 00:14

Bild linksbündig von Liste mit Listenpunkt umfliesen lassen
 
Wir haben eine Webseite mit einer dynamischen Inhaltspalte. Dort sitzt in einem DIV (hier im zweiten Block ab "Warum nutzen uns Kleinfirmen, ...") ein Bild linksbündig und wird von rechts mit einer unsortierten Liste umflossen. Im Firefox sieht das noch einigermaßen ordentlich aus. Im Chrome hingegen sitzt bei schmalem Browser (ca. 680 Pixel Browserbreite) der Haken der ersten Aufzählung mitten im Text. Im Internet Explorer hingegen fliest die Liste erst gar nicht unter das Bild und läuft somit bei schmalem Browser teilweise aus der Box. Gibt es hier überhaupt eine Lösung oder ist generell das Umfliesen mittels einer Liste nicht gestattet (W3C?)?

hubspe 31.08.2012 09:09

Moin,

das bei Chrome die Listengrafik mitten im Text sitzt kannst du vielleicht verhindern, indem du eine HG-Grafik als Listenzeichen nutzt.
Das ist sowieso der bessere Weg, da list-style-image dieselben Nachteile wie die autom. Listenzeichen hat. ;)

Overtone 31.08.2012 11:58

Das hatte ich auch schon getestet. Führt zu noch größeren Fehlern bei der Darstellung. Dann war (soweit ich noch weiß) bei normaler Breite jeder Listenpunkt statt rechts vom Bild (wie jetzt und wie es auch sein soll) ganz links in der Box (also sogar noch links von dem Bild)! Nur aus diesem Grund setzen wir hier nämlich auf list-style-image!

hubspe 31.08.2012 12:20

Zitat:

Zitat von Overtone (Beitrag 520040)
Dann war (soweit ich noch weiß) bei normaler Breite jeder Listenpunkt statt rechts vom Bild (wie jetzt und wie es auch sein soll) ganz links in der Box (also sogar noch links von dem Bild)!

ja klar, ist ja auch logisch! Nur der Text weicht dem Float aus, die Box erstreckt sich auch unter dem Float. Die Box bräuchte halt ein geeignetes margin-left, damit man die HG-Grafik sieht. ;)

Overtone 31.08.2012 12:44

Dann bricht die Aufzählung bei schmalem Browserfenster aber wieder nicht nach links unter das Bild um!

hubspe 31.08.2012 12:45

Zitat:

Zitat von Overtone (Beitrag 520044)
Dann bricht die Aufzählung bei schmalem Browserfenster aber wieder nicht nach links unter das Bild um!

ja, das ist richtig. Vielleicht solltest du überlegen ob das nicht die bessere Alternative ist. :)

Overtone 31.08.2012 12:55

Nicht wirklich. Wenn Du Zeit und Lust hast kannst Du dir die Katastrophe mal im IE ansehen. Da bricht eben nichts links unter das Bild und der Text schiebt sich (unsichtbar) rechts aus der Box! So ähnlich wäre es dann ja ohne Float wie von dir vorgeschlagen, oder habe ich dich falsch verstanden?

fricca 31.08.2012 12:58

Wenn ein Element einen Block Formatting Context generiert, dann weicht die gesamte Box einem Float aus, nicht nur der Inhalt. Das wäre ein Ansatz für dein Vorhaben.

list-style-... ist nach wie vor schwierig, wenn man die Kontrolle über die Position des Markers haben will.
Zitat:

Zitat von CSS 2.1|12.5.1
The position of the list-item marker adjacent to floats is undefined in CSS 2.1.


hubspe 31.08.2012 13:09

Zitat:

Zitat von Overtone (Beitrag 520046)
So ähnlich wäre es dann ja ohne Float wie von dir vorgeschlagen, oder habe ich dich falsch verstanden?

jepp, ohne Float meinte ich eigentlich nicht. ;)

fricca 31.08.2012 13:29

Zitat:

Zitat von hubspe (Beitrag 520048)
jepp, ohne Float meinte ich eigentlich nicht. ;)

Auch ohne Float wäre denkbar, mit Meda-Queries unterhalb einer bestimmten Viewportbreite.
Möglicherweise der sinnvollste Ansatz; der Fluss ums Float ist auch jetzt nicht immer hübsch.


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:30 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023