Liste untereinander bis Höhe X erreicht ist

[jorothke]

Moin zusammen,
ich möchte eine Unternavigation erstellen.

Diese Navigation besteht aus X Menüpunkten, z.B.

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>

Diese Navigationselemente befinden sich in einem DIV Container der angezeigt wird, wenn der Benutzer auf den Menüpunkt klickt.

Nun ist es aber sehr hässlich, wenn diese 12 Menüeinträge untereinander auftauchen. Deshalb würde ich dem äußeren Container gerne eine feste Höhe geben und bei Überfluss einen automatischen Umbruch erzwingen, so dass der Menüeintrag rechts daneben in einer Spalte erzeugt wird.

So könnte die Navigation dann schematisch aussehen:

1 8 15
2 9 16
3 10
4 11
5 12
6 13
7 14

Ist das mit CSS möglich?

Danke schlnmal

[sejuma]

z.B. mit drei ul-Listen, denen du ein

Code: Alles auswählen

float: left;

gibst.

[jorothke]

Danke für die Antwort, aber leider wird die Liste dynamisch generiert. Ich habe also nur eine Liste mit vielen <li> Elementen.

Wenn ich denen ein float:left gebe, stehen sie alle nebeneinander. Ich habe auch keinen Zugriff auf die Generierung des Menüs, sondern muss dies enstsprechend mit CSS anpassen.

Mir stehen zwei Listen zur Verfügung einmal:

Code: Alles auswählen

<ul>[meine ganzen Einträge jeweils in li-Tag]</ul>

und

Code: Alles auswählen

<ul>[meine erste Navigation jeweils in li-Tag]</ul>
<ul>[meine zweite Navigation jeweils in li-Tag]</ul>
<ul>[meine dritte Navigation jeweils in li-Tag]</ul>

Danke

[sejuma]

Mit CSS allein geht das mit einem Spaltenumbruch noch nicht. Bei CSS3 ist sowas m.W. vorgesehen.
http://intensivstation.ch/files/css3/columns.html

[jorothke]

OK Danke,
dann muss ich mal schauen wie ich das machen kann.

Danke