Grafikumlaufender Text und Bulletzeichen

[Mark-Oliver]

Hi,

wenn ich ein Bild rechts mit Text umlaufen lasse, werden bei <ul> Aufzählungen die Bullets irgendwie "hinter" das Bild geschoben. Der Inhalt eines <li> beginnt somit an der selben Stelle wie ein normaler Text anstatt etwas nach rechts eingerückt zu sein.

Folgendes habe ich versucht:

ul {list-style-position:outside;}
img {float:left; margin-right:10px; margin-bottom: 5px;}

Dann im HTML-Dokument:

<img src="foo.jpg" height="100" alt="bar" /><ul><li>Zeile 1</li><li>Zeile 2</li></ul>Resttext

Wenn ich die list-style-position auf inside setze, bekomme ich zwar die Bullets zu sehen, aber das hilft nicht, wenn der <li> Inhalt mehrzeilig ist. Denn dann geht die Einrückung des Textes verloren.
Auch die Ergänzung um ein text-indent bringt keine Lösung.

Ich habe anschließend mal "old-school-html" rausgekramt und per
<img align="left" ...> mein Glück ohne CSS versucht, doch das Problem gab's anscheinend auch "damals" schon.

Irgendjemand irgendeine Idee?

Dankeschön!
Mark-Oliver.

[Tom Collins]

Hi Mark-Oliver,

hatte das gleiche Problem und bin letztendlich wieder beim unsauberen Tabellenlayout gelandet:

<table>
  <tr>
    <td><img src="foo.jpg" /></td>
    <td>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </td>
  </tr>
</table>

Das ist zwar nicht schön, bringt aber unter allen Browsern ein gutes Ergebnis.

Gruß von Tom, dem halt nichts besseres eingefallen ist

[Mark-Oliver]

Hi Tom,

vom Tabellenlayout wollte ich ja gerade weg, wg. der fehlenden "Umlaufmöglichkeit" des Textes um das Bild.

Aber danke trotzdem...

[Jürgen Berkemeier]

Hallo Mark-Oliver,

suchst Du vieleicht das hier:

<ul style="list-style-image:urlxxx.gif);padding:0px;margin:0px;margin-left:10px">
 <li>Punkt 1<br>Punkt 1b</li>
 <li>Punkt 2</li>
</ul>

Gruß, Jürgen