Probleme mit float und liste?

[Holli]

Hallo,
ich habe einen Container mit float:left formatiert. In diesem container habe ich eine Liste mit Einträgen. Das Problem ist, dass er mir die Liste ausserhalb des Container darstellt. Also die Liste liegt nicht direkt im Element sondern beginnt ausserhalb.

Was mach ich da falsch?

Hier der Code:
...CSS
#home_floatright{
width:150px;
float:right;
background-color:#0066FF
}

<p id="home_floatright">
<ul>
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
</ul>
</p>

Gruss
Holli

[Der Martin]

Hi,

ich habe einen Container mit float:left formatiert.

tatsächlich? In deinem unten zitierten Beispiel ist es float:right. ;-)
Aber das Prinzip ist dasselbe.

In diesem container habe ich eine Liste mit Einträgen. Das Problem ist, dass er mir die Liste ausserhalb des Container darstellt. Also die Liste liegt nicht direkt im Element sondern beginnt ausserhalb.

Das ist korrekt, wenn ich deinen HTML-Code betrachte (das CSS muss ich für diese Aussage noch gar nicht sehen).

<p id="home_floatright">
<ul>
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
</ul>
</p>

Eine Liste (ol oder ul) ist innerhalb von p nicht erlaubt. Das p-Element wird daher durch den Anfang der Liste implizit geschlossen und hat demzufolge keinen Inhalt. Das verwaiste schließende Tag </p> stört den Browser im weiteren Verlauf nicht wirklich (der Validator würde es aber ankreiden).

Was mach ich da falsch?

Ich stelle die Frage mal anders: Warum willst du die Liste noch mit einem weiteren Element umschließen? Das wäre eigentlich nicht nötig, du kannst ebensogut auch das ul-Element direkt formatieren. Falls du aber unbedingt noch ein Containerelement brauchst (weil du die Liste mit weiteren Elementen gruppieren willst, die du hier nicht erwähnst), dann wirst du wohl auf das neutrale Blockelement div zurückgreifen müssen.

So long,
 Martin

[Holli]

Hallo,
du hast natürlich völlig recht.

Hier die Korrektur. Aber damit funktioniert es immer noch nicht. Die Listenelemente sind immer noch ausserhalb des Containers.

...CSS
#home_floatright ul{
 display:block;
 text-decoration:none;
 color:#000;
 width:120px;
 height:20px;
 border: 1px solid #fff;
 border-width:1px 1px 0 0;
 line-height:19px;
 font-size:0.7em;
 padding-left:10px;
 list-style-image:url(../images/arrow_menue.gif)
}
#home_floatleft{
width:400px;
float:left;
}
#home_floatright{
width:150px;
float:right;
background-color:#0066FF
}
#home_clear{
clear:both;
}

<p id="home_floatleft">test Text.<br /><br />
             Beispieltext</p>
<div id="home_floatright">
<ul>
<li><a href="null">Test 1</a></li>
<li><a href="null">Test 1</a></li>
</ul>
</div>
<p id="home_clear">Beispieltext</p>