[SURE612]

hallo!

ich habe ein bild, das links floatet. daneben und kommt dann text.
nun habe ich im text auch eine liste ul, die auch neben dem bild angezeigt werden soll.
tut sie auch, da ignorieren die bullets das margin vom gefloateten bild und hängen irgendwo
gleich neben dem bild ab...




was kann man da machen?

[benusa]

Hoi

versuche mal den Text neben dem Bild in ein Div zu packen,
somit werden die Aufzählungszeichen und der Fliesstext bis an den Rand von dem Div gesetzt und anschliessend der Div an den Rand (mit Abstand) von dem Bild.

*cheers
BENUSA

[sahnemuh]

list-style-position: inside;

[SURE612]

[sahnemuh]

de rien

[haggis]

[heiko_rs]

Der Punkt bei Floats ist: Die inline-Inhalte nachfolgender Blockelemente weichen aus, aber die Blockelemente selber nicht. Im konkreten Fall heißt das: Sowohl ul als auch li laufen unter dem Bild (d.h. auf der z-Achse) weiter bis an den linken Rand, so dass seitliche margin-/padding-Werte für ul & li flachfallen.

Ausschließlich der Text weicht hier dem Float aus (und zieht seine list-items mit), jedoch nicht die eigentlichen li, und deshalb fallen auch Möglichkeiten wie list-item per bg-image aus. list-style: inside; ist tatsächlich die beste Lösung, und dem im Vorpost beschriebenen Effekt kann man zwar per neg. text-indent entgegenwirken, aber nicht browserübergreifend mit pixelgenauer Linksbündigkeit.

Wenn man diesen Effekt verhindern will, bleibt im Prinzip als einzige Möglichkeit, list-style: inside; wegzulassen und die ul komplett neben den Float zu stellen - entweder per margin-left, oder (bei unbekannter img-Breite) durch einen neuen Block Formatting Context für die ul, und zwar ohne shrink-to-width, so dass im Prinzip nur overflow: auto; für ul übrigbleibt (denn hidden ist hier wirklich tabu). Aber das hat dann wiederum den Effekt, dass die list-items unterhalb des Bildes (diesmal auf der y-Achse) nach rechts eingerückt bleiben und nicht sofort an den linken Rand zurückkehren. Aber so oder so: Schön ist eine solche Maßnahme eh nicht!