Bild neben Text und <ul> wird falsch dargestellt

[Kadir_]

Hallo!

Ich habe bisher immer Tables ohne Rand erstellt, um Bild links von Texten auszurichten. Das ist technisch nicht optimal, hat aber mein Problem gelöst. Jetzt habe ich bei Dr. Web nen Trick gesehen und zwar folgender:

...
<img src="xploit.jpg" alt="joke" align="left" hspace="4" vspace="4">
Dieser Text ist super
<br>
Test
<ul>
<li>eins</li>
<li>zwei</li>
</ul>
...

Nur leider funktioniert der Trick von Dr. Web nicht mit <ul> und <li>. Es werden die Aufzählungspunkte nicht angezeigt. Es gibt sicher einen Weg, das per <div> zu lösen. Kennt jemand ne Lösung?

Danke im Voraus
mfg Kadir

[D.R.]

Hi,

Ich habe bisher immer Tables ohne Rand erstellt, um Bild links von Texten auszurichten. Das ist technisch nicht optimal, hat aber mein Problem gelöst. Jetzt habe ich bei Dr. Web nen Trick gesehen und zwar folgender:

...
<img src="xploit.jpg" alt="joke" align="left" hspace="4" vspace="4">

Seit wann wird im Jahr 2006 noch align="left" verwendet? Dachte immer, das macht man mit float:left in einer CSS-Datei. hspace und vspace sollten ebenfalls verschwinden.

Dieser Text ist super
<br>
Test
<ul>
<li>eins</li>
<li>zwei</li>
</ul>
...
Nur leider funktioniert der Trick von Dr. Web nicht mit <ul> und <li>. Es werden die Aufzählungspunkte nicht angezeigt. Es gibt sicher einen Weg, das per <div> zu lösen. Kennt jemand ne Lösung?

Das liegt daran, dass die Aufzählungspunkte unter das Bild rutschen. Du hast jetzt 2 Möglichkeiten (CSS setze ich dazu voraus):

du wendest list-style-position:inside an, oder du erzeugst für die Liste einen richtigen Block.
Das funktionier in vernünftigen Browsern mit overflow:auto. In unvernünftigen Browsern, wie dem IE erreichst du den Effekt mit einer höhen- oder einer breitenangaben.
Da sich eine fixe breitenangabe bei flexiblen Layouts aber nicht macht, würde ich hier ein wenig tricksen. Gib dem IE ein height:1em, das wird vom IE sowieso gestreckt, erzeugt aber den gewünschten Effekt.

Jetzt musst du nur noch beide Angaben kombinieren, das machst du am besten mit folgenden CSS-Hacks:

  
* html ul {height:1em;padding-left:2em;}  
html>body ul {overflow:auto;}  

Einen schönen Donnerstag noch!