CSS Div mit fixer Breite, nichts soll darüber hinausragen.

[Potassium]

Ich hab ein Div und darin einige <ul>s die verschachtelt sind.
Jede <ul> wird ein stückerl weiter eingerückt und ich will verhindern, dass die Schrift über die Breite vom Div hinausgeht. Der Text soll zwangsumgebrochen werden dafür.

Vorschläge wie das zu verwirklichen wäre?

BSP Code

<div class="menu">
	<ul id="nav"><li><a href="index.php?lid=4">Was soll das?</a><ul id="level2">

<li class="submenu"><a href="index.php?lid=5">test</a><ul id="level2">

<li class="submenu"><a href="index.php?lid=6">foobar</a><ul id="level2">

<li class="submenu"><a href="index.php?lid=7">raboof</a><ul id="level2">

<li class="submenu"><a href="index.php?lid=8"><span class="activemenu">Downloads &amp; Sammlung</span></a></li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>
<li><a href="index.php?lid=1">Home</a></li>
<li><a href="search.php?lid=2">Suche</a></li>
<li><a href="./admin?lid=3">Login</a></li>
</ul><br />
</div>

[zAPPEL]

Ich nehme an es geht um ein Menü auf der Linken Seite mit einer fixen Breite von sagen wir mal 200px? Wie genau soll man umbrechen wenn die Liste zu breit wird? Dann erkennt man ja u.U. die Hierachie der einzelnen Menüpunkte nicht mehr.

Wie viele Menüebenen hast du maximal?

lg

[Potassium]

Menü wäre auf der rechten Seite.
Die Menüebenen sind leider nicht beschränkt. Theoretisch also unendlich. Das ist mein Problem, sonst könnt ich im CSS ja fixe Breiten vergeben.

[Potassium]

*push*

[zAPPEL]

Hi,

also ich habe schon einige Websites umgesetzt mit diversen Menüs, aber als einzige Möglichkeit eine beliebig tiefe Struktur umzusetzen hätte ich nur die Idee, dass du immer nur die aktuelle Menüebene darstellst also am Anfang:
Mein Menü:
Menüpunkt 1
Menüpunkt 2
Menüpunkt 3

Wenn man auf Menüpunkt 1 geht:
Menüpunkt 1:
Menüpunkt 1.1
Menüpunkt 1.2
Menüpunkt 1.3
<< Zurück

Ansonsten würde ich vorschlagen, die Menüebenen auf 3 Menüebenen zu begrenzen und die Website entsprechend zu strukturieren? Tiefere Navigationen kann man dann z.B. über Menüs/Auswahl im Content Bereich der Website umsetzen.

Also das Menü ist dann z.B.
Menü1
Menü 1.1
Menü 1.1.1
Menü 2
Menü 3

Und im Content Bereich vom Menü 1.1.1 hast du dann z.B. weitere Verzweigungen.

lg

[void]

So wie ich das sehe, gibt es nur die Möglichkeiten, entweder abzuschneiden (wahrscheinlich in diesem Fall nicht sinnvoll), oder zu scrollen...
Wie zAPPEL schon fragte: Wie soll es denn umgebrochen werden?!

[Potassium]

na nach einer fixen anzahl von zeichen (pixel, em, whatever) umbrechen.
was meinst du mit scrollen in dem fall?

[zAPPEL]

Vor allem: Wie soll das aussehen, damit die Hierachie der Menüpunkte noch zu erkennen ist?

[void]

Zitat von Potassium

was meinst du mit scrollen in dem fall?

<div class="menu" style="width:170px;border:thin solid black;overflow:scroll;">
    <ul id="nav"><li><a href="index.php?lid=4">Was soll das?</a><ul 

id="level2">

<li class="submenu"><a href="index.php?lid=5">test</a><ul id="level2">

<li class="submenu"><a href="index.php?lid=6">foobar</a><ul 

id="level2">

<li class="submenu"><a href="index.php?lid=7">raboof</a><ul 

id="level2">

<li class="submenu"><a href="index.php?lid=8"><span 

class="activemenu">Downloads &amp; Sammlung</span></a></li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>
<li><a href="index.php?lid=1">Home</a></li>
<li><a href="search.php?lid=2">Suche</a></li>
<li><a href="./admin?lid=3">Login</a></li>
</ul><br />
</div>

Umbrechen kann in diesem Fall nicht funktionieren, da sich ja die Abstände links über die Breite des DIVs summieren... Wenn man keine Abstände nimmt, funktioniert es ja eh.

[zAPPEL]

Das sieht dann halt wirklich grauslich aus mit vertikalen scrollbalken Ich würde einfach dazu übergehen eine maximale Tiefe für das Menü festlegen und weitere Verzweigungen z.B. über den Content zu lösen oder mein oberer erster Vorschlag bei dem man immer nur die aktuelle Menüebene im Menü sieht..

lg