[CSS] Listenelemente auf 100% Breite verteilen

[x4th]

Servus,

ich möchte mit Hilfe einer Liste ein Menü machen, bei dem die einzelnen Menüpunkte nebeneinander stehen und über die gesamte Breite verteilt sind.

Wenn ich es mit einer Tabelle machen würde, sähe das so aus:

<table style="width:100%;">
 <tr>
  <td style="text-align:center;">Punkt 1</td>
  <td style="text-align:center;">Punkt 2</td>
  <td style="text-align:center;">Punkt 3</td>
  <td style="text-align:center;">Punkt 4</td>
 </tr>
</table> 

Aber wie verteile ich die Elemente einer Liste genauso?

[ministry]

Das geht afaik nur, wenn du weißt, wieviele Elemente drinstehen. Den <li>s gibst du dann ein float:left und ein width: ((100 / Anzahl) - ein bisschen)%, also z.B. so :

<style type="text/css">

ul {
    margin:0px;
    text-align:center;
}    

ul li {
    float:left;
    width:24.8%;
    border:1px solid blue;
}
</style> 

Das ausrechnen der passenden Breite ist ja mit php kein Problem.

Ich lass mich aber gern belehren, falls es geschicktere Lösungen gibt.

Gruß,
ministry

[TobiaZ]

maybe mit nem float und ner width von 25%?

[x4th]

Ich hab mich jetzt noch mal umgeschaut und bin für FF, NN und Opera auf folgende Lösung gestossen:

<ul style="width:100%;display:table;">
 <li style="display:table-cell;">Punkt 1</li>
 <li style="display:table-cell;">Punkt 2</li>
 <li style="display:table-cell;">Punkt 3</li>
 <li style="display:table-cell;">Punkt 4</li>
</ul> 

Werde, da diese Lösung beim IE nicht greift, wohl doch wieder auf Tabellen gehen, ausser hier hat noch jemand eine Idee???

[ministry]

Wenn du display:table nehmen willst, dann kannst du wirklich gleich Tabellen benutzen. Auch display:table ist für tabellarischen Inhalt gedacht (abgesehen davon, dass der IE es nicht richtig interpretiert).

[wahsaga]

Original geschrieben von ministry
Wenn du display:table nehmen willst, dann kannst du wirklich gleich Tabellen benutzen. Auch display:table ist für tabellarischen Inhalt gedacht

Kann es sein, dass du das Prinzip der Trennung von Inhalt und Layout noch nicht verstanden hast?

[ministry]

Getrennt mag es dadurch ja sein - es sei trotzdem nicht der Zweck von display:table und display:table-cell, eine Navigationsliste zu zwingen, sich gleichmäßig zu verteilen, der Inhalt ist und bleibt nicht tabellarisch imho...

Das entscheidende Argument dagegen ist ja sowieso, dass der IE das nicht mitmacht, schätze ich.

gruß,
ministry

[x4th]

Für mich ist es im Moment wirklich wichtiger, dass auch der IE mitspielt - daher wieder Tabellen!
Ansonsten muss ich wahsaga Recht geben, denn grade wenn mehrere Designs für eine Seite angeboten werden, würde sich die Lösung mit der Liste anbieten ...#

Naja, danke auf jeden Fall für eure Bemühungen!

[wahsaga]

Original geschrieben von ministry
es sei trotzdem nicht der Zweck von display:table und display:table-cell, eine Navigationsliste zu zwingen, sich gleichmäßig zu verteilen, der Inhalt ist und bleibt nicht tabellarisch imho...

Na und? Der Inhalt ist und bleibt ja auch eine Liste - und CSS regelt ausschließlich die Darstellung.

Nach deiner Argumentation könnte man ja auch
a, b { display:block; }
für "verboten" erklären, weil a und b schließlich inline-Elemente sind ...