Problem bei list Elementen im DIV

emmy

Aktives Mitglied
Thread Starter
Dabei seit
08.12.2007
Beiträge
298
Reaktionspunkte
5
Wenn ich in meinem DIV folgendes mache :
Code:
<div class='container'>
 <ul>
  <li>blabla</li>
  <li>blabla</li>
  <li>blabla</li>
</ul>
</div>
wird die Liste korrekt angezeigt.

Wenn ich aber folgendes mache:
Code:
<div class='container'>
 <ul>
  <li class='liste'>blabla</li>
  <li class='liste'>blabla</li>
  <li class='liste'>blabla</li>
</ul>
</div>
und 'liste' so definiere:
Code:
.liste {
	float: left;
	list-style-type: none;
}

passiert folgendes:
Die Elemente ignorieren die Abgrenzung des DIVs und gehen darüber hinaus sowohl nach rechts, als auch nach unten...

Hoffe, diese Beschreibung und der Code sind hilfreich. Falls noch etwas unklar sein sollte, bitte posten.
Hoffe auf Hilfe - wie immer Danke vorab :)
 
.container {
display: inline-block;
}
 
  • Gefällt mir
Reaktionen: emmy
.container {
display: inline-block;
}
Hm – habe mal gegoogelt, komme aber nicht dahinter, was das bezwecken soll. Mit dieser Eigenschaft wird das Elternelement der <ul> gezwungen, sich wie Fliesstext zu verhalten, aber Block-Eigenschaften zu bewahren. Inwiefern betrifft dies die Enkel-<li>s?

emmy, das Problem ist, dass die Floats aus dem Textfluss genommen werden und das Elternelement sie bei der Berechnung seiner Dimensionen ignoriert – in diesem Beispiel optisch auch das <div>, denn vermutlich hat die <ul> keinen weiteren Inhalt ausser den <li>s, erscheint daher quasi dimensionslos. Das <div> enthaelt eine dimensionslose <ul> und verhaelt sich entsprechend – keine Breite und Hoehe, von Padding abgesehen.
Die links ausgerichteten Floats orientieren sich am oberen linken Rand des Elternelements und setzen sich dann soweit nach rechts fort, bis ihnen von einem umfassenden Element mit fester Breite Einhalt geboten wird – im Extremfall erst <body>. In der Hoehe verhaelt es sich aehnlich, nur dass man hier ggf. mit Overflow rechnen muss.
Eine beliebte Methode ist, nach den gefloateten Elementen (aber innerhalb des Elternelements, dem du Dimensionen geben moechtest) ein weiteres, unsichtbares Element mit der Eigenschaft „clear:both“ zu platzieren, beispielsweise ein <div>.
Floats werden z. B. hier ausfuehrlich erklaert:
http://www.andreas-kalt.de/webdesign/tutorials/float-theorie

Moeglicherweise ist die Loesung von Rhapsody wesentlich einfacher, ist mir aber noch nie untergekommen.
 
  • Gefällt mir
Reaktionen: emmy
.container {
display: inline-block;
}

Scheint schon geholfen zu haben - Danke soweit.

Danke aber auch auch Galanos für die umfangreichen Erläuterungen. Ich habe mir den Artikel durchgelesen und er war sehr aufschlussreich.
 
Zurück
Oben Unten