Zur Navigation

Listenformatierung bei bildumfließendem Text

1 AndiN

Hallo zusammen,
ich habe ein Bild welches von Text mit einem Abstand von 15px umflossen wird. Wenn das Bild von normalem Text umflossen wird, ist alles prima. Sobald jedoch eine ul/li-Liste im Text erscheint ist es so, dass der Abstand zwischen Bild und Text zwar immernoch 15px beträgt, jedoch der Listen-Aufzählungspunkt vor dem Text steht. Eigentlich sollte dieser jedoch bündig mit dem Text über und unter der Liste sein. Dieses Problem habe ich mit "list-style-position:inside;" erstmal gelöst dachte ich. Wenn jedoch nun ein Listenaufzählungstext so lange ist, dass er umbricht, schiebt sich der umgebrochene Text bündig unter den Listenaufzählungspunkt. Eigentlich sollte er aber bündig mit dem restlichen Listentext sein. "loist-style-psotion:inside;" ist also keine Lösung. Wie könnte ich das hinbekommen?

Um das Problem zu veranschaulichen anbei der Quellcode:

<style>
.linksbuending ul, .linksbuending ul ul { list-style-position: inside; }
</style>
<div class="linksbuending" style="margin-right:15px;width:550px;">
	<div style="float: left; margin-right: 15px;"><img src="grafiken/img/beispiel.png" width="250" height="250" border="0"></div>
	<h3 class="text12fettlila">Das ist eine Überschrift</h3>
	<p>Das ist ein Fliestext one Sinn und Zweck.</p>
	<ul>
		<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
		<li>Aenean commodo ligula eget dolor. Aenean massa.</li>
		<li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
		<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</li>
		<li>Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	</ul>
	<p>Das ist ein weiterer Text ohne Sinn und Zweck.</p>
</div>

14.10.2013 11:52

3 AndiN

Ich musste die Lösung etwas modifizieren, aber sie hat weitergeholfen. Danke!

Allerdings besteht das Problem weiterhin wenn ich Listen per <ol> erzeuge.
Da kann ich das Aufzählungszeichen ja nicht durch eine eigene Grafik ersetzen.

28.10.2013 12:26 | geändert: 28.10.2013 12:26

4 Jörg Kruse

Was passiert, wenn du nur das "overflow:hidden" für <ol> verwendest?

28.10.2013 17:46

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]