Probleme mit float bei liste

[tim-peters]

Hey Forum,
Ich habe eine liste (<ul> <li> </ul>) ohne Höhenangabe für <ul>. Definiere ich jetzt für <li> per css "float:left;" ist die Höhe von <ul> plötzlich 0 und die <li>-elemente befinden sich ausserhalb des <ul>-elements.
1. Warum ist das so? Habe bei selfhtml nix dazu gefunden.
2. Gibt es eine andere Möglichkeit als "float" um Elemente nebeneinander zu positionieren?

Bin für jede Antwort dankbar

lg
Tim-

Hier mein komplettes Beispiel:

<style type="text/css">
<!--
body {
    background:#000;
    color:#fff;
}

div {
    width:500px;
    margin:40px auto 0 auto;
    background:#ccc;
    border:1px solid red;
}

ul {
    margin: 0;
    padding: 0;
    list-style:none;
}

ul li {
    width:150px;
    height: 150px;
    border:1px dashed #eee;
    background:#fff;
    float:left;
    margin:10px;
    color:#555;
}

-->
</style>

<div>
<ul>
    <li>
        what ever!
    </li>
    <li>
        what ever!
    </li>
</ul>
</div>

 

[neuroleptika]

Gibt mehre Möglichkeiten.

• ul eine Höhe geben
• Ein clearendes Element zwichen </ul> und </div>
• clearfix auf ul anwenden + zoom:1; für IE5.5-7

 

[tim-peters]

Gibt mehre Möglichkeiten.
eine Höhe geben

geht nicht, weil die Seite (im Orginal) dynamisch ist und immer neue <li>-elemente dazu kommen, die Größe sich also dauernd ändern muss.

Ein clearendes Element zwichen </ul> und </div>

Das hab ich nicht ganz verstanden. Aber "clear:left;" auf das <div>, das <ul> oder einen <span>-tag nach dem </ul> angewendet bringt keine Veränderung.

clearfix auf ul anwenden + zoom:1; für IE5.5-7

sollte möglichst für alle Browser funktionieren.

noch mehr Ideen?:|

 

[neuroleptika]

geht nicht, weil die Seite (im Orginal) dynamisch ist und immer neue <li>-elemente dazu kommen, die Größe sich also dauernd ändern muss.

Habe ich vorgeschlagen weil <li> sowiso eine feste Höhe hat.
Wenn die Floats umbrechen geht das natürlich nicht.

Das hab ich nicht ganz verstanden. Aber "clear:left;" auf das <div>, das <ul> oder einen <span>-tag nach dem </ul> angewendet bringt keine Veränderung.

Clear greift nur bei Blockelementen:

...
    <li>
        what ever!
    </li>
</ul>
<div style="clear: left;"><!-- --></div>
</div>

sollte möglichst für alle Browser funktionieren.

Deswegen habe ich auch zoom:1; (IE5.5-IE7) erwähnt.
Für alle anderen:
clearfix

ul:after {
display: block;
content: "clearen";
clear: left;
height: 0;
visibility: hidden;
}

Natürlich gibt es noch andere Möglichkeiten die Floats einzuschließen.

 

[tim-peters]

Erstmal schon vielen Dank!

Habe das clearfix übernommen und meine Probleme sind zumindest auf meinem Firefox gelöst. Ist übrigens das erste mal dass ich :after verwende. Kannte es zwar, wusste aber nie wie ich es einsetzen soll.
Nur das mit dem zoom:1; ist mir noch nicht ganz klar. Kenne zoom nur als css-Funktion für IE um ganze Bereiche größer oder kleiner darzustellen. Hab auch bei selfhtml nur das gefunden.

lg
Tim-

 

[neuroleptika]

zoom ist eine Proprietäre CSS-Erweiterungen für den Internet Explorer.
Ursprünglich war es dazu gedacht einzelne Elemente zu vergrößern.
Hier geht es aber nur um eine Nebenwirkung.

ul {
zoom:1;
}

Wenn du mehr darüber wissen möchtest suche nach haslayout

 

[Efchen]

2. Gibt es eine andere Möglichkeit als "float" um Elemente nebeneinander zu positionieren?

Ja, Du sagst dem Element mit Hilfe der Eigenschaft "display", dass es sich wie ein Inline-Element verhalten soll.

 

[neuroleptika]

Aber in diesem Fall reicht display: inline; nicht.

ul li {
    width:150px;
    height: 150px;
...
}

display: inline-block geht nicht im ff2,
display: table-cell nicht im IE7.

Deswegen habe ich es bei float belassen.

 

[Toastbrot]

@neuroleptika:

Ich kenn mich damit nicht aus, aber wenn ich deine Aussage richtig verstehe,
geht
1. display: table-cell im FF
2. display: inline-block im IE

und
3. würden beide das gleiche erreichen?

Wenn ja, dann:

display: inline-block;
display: table-cell !important;

Da IE auch !important nicht kennt, nimmt der IE die erste Angabe un lässt die zweite außer acht, FF nimmt aufgrund von !important die zweite.

Geht das?

 

[neuroleptika]

Jain.
Der IE kennt !important. Allerdings wird es hier nicht vom IE5-7 berücksichtigt weil er die css-Eigenschaft (table-cell) nicht kennt.
inline-block wenden diese Browser nur an, wenn das Element vorher schon display: inline; hatte.

display: table-cell hat im ff einen Bug (bis ff3 ?).
Er schreibt die Zellen nicht immer in die richtige Zeile (table-row) wenn kein komplettes Tabellengrüst erstellt wurde.

<div style="display: table;">
<div style="display: table-row;">

<div style="display: table-cell;">
Zelle-1
<div>
<div style="display: table-cell">
Zelle-2
</div>

</div>
</div>

display: inline-block; ist nicht das selbe wie display: table-cell; .
Aber beide Eigenschaften ermöglichen height, width und vertical-align.

ff ab Vers.3.x kennt auch display-inline.
IE ab Vers.8 display: inline; und table-cell.