Detailmenü - Zweispalitg fortlaufend

[MBetke]

Ich würde gerne eine Art Spaltenumbruch bei meinen Projekten einbauen.
Hier könnt ihr schauen: http://pure3d.de/Projekte.html
Ich habe in der linken Spalte die Menüpunkte. Die Spalte rechts ist der Block mit dem Detailmenü, meinen Projekten.
Wenn nun neue hinzu kommen wird die Spalte immer länger.

Ich würde gerne das es eine dritte Spalte gibt wo die Projekte weiterlaufen. Leider ist mir nicht klar wie ich das realisieren kann und ob es überhaupt geht.
Evtl. macht es sogar mehr Sinn die Projekte als Kategorien zu nutzen. Also die Arten der Projekte (3D, Echtzeit, Webdesign, Games..) und dort Kurzbeschreibungen und Links zu versteckten Inhaltsseiten mit den "langen" Projektbeschreibungen setzen...

Momentan würde ich aber lieber die mehrspaltige Version bevorzugen.

[freakiger]

mir fällt da keine einfache Lösung ein

Ideenansatz (NIE GETESTET):

• MenuCSSCount 1.0 Plugin -falls das auch für "detailmenu" geht. (wenn nicht hilft vllt ein CSS counter)
• im CSS mit "content" + ":after & :before" arbeiten um die Liste zu schließen und neu, inklusive class, wieder zu öffnen
• kann aber der IE (wie so oft) nicht!
• dann sollte man die Listen blocken uns floaten können.

wie gesagt: das ist die Theorie, getestet hab ich's nicht und IE tauglich ist es auch nicht!!!

[freakiger]

...hab das heute mal versucht in die Praxis umzusetzen... ...bitte obere Idee verwerfen!
Grund: content:" "; gibt nur Text aus, keinen Code

Also bei einem detailmenu mit folgender Struktur, kann ich nicht helfen:
1|5
2|6
3|7
4|
ABER wenn man das Menü so anordnet:
1|2
3|4
5|6
7|
hilft dies:
vereinfachte Beispielliste

Code Auswählen Erweitern

<div class="menu">
<ul>
<li><a href="#">link 01</a></li>
<li><a href="#">link 02</a></li>
<li><a href="#">link 03</a></li>
<li><a href="#">link 04</a></li>
<li><a href="#">link 05</a></li>
<li><a href="#">link 06</a></li>
<li><a href="#">link 07</a></li>
</ul>
</div>vereinfachtes CSS

Code Auswählen Erweitern

.menu {
height: 100px;
width: 420px;
border: 1px solid green;
}

li  a{
display: block;
width: 200px;
float: left;
border: 1px solid yellow;
}