nicht angemeldet
Hi,
ich glaube Du hast recht und ich habe Dein Eingangsposting falsch verstanden und wohl auch nicht ganz rübergebracht, wie ich es genau interpretiert habe. Das lag daran, daß ich meist erst die logische Struktur sehe und dann das Layout. Gehe ich nun Recht in der Annahme, daß Dein Beispiel ein Hauptmenü mit den Items 1-9 und ein Submenü mit den Items A-L darstellt?
Hierfür wäre die logische Umsetzung mMn _eine_ verschachtelte Liste, in der das Submenü in dem jeweiligem Listenpunkt integriert ist. Wenn das Submenü aber stets oben angezeigt werden soll, wäre absolute Positionierung erforderlich, was aber wegen der evtl. vorhandenen Umbrüche beim Submenü keine Festlegung des oben erforderlichen Abstandes für die Überschrift ermöglicht. Somit sehe ich leider (wie Du auch) keine andere Möglichkeit, als z.B. zwei Listen zu verwenden.
Die einfachste Lösung für das Problem mit clear, nämlich die Subnavigationspunkte display:inline zu formatieren, schließt Du wegen der nötigen Breitenangaben aus. Die zweiteinfachste Möglichkeit, sie mit float:right zu formatieren auch - wegen der dann nötigen umgekehrten Reihenfolge im Quelltxt und rechtsbündigen Anzeige - verständlich. Dann fallen mir noch zwei Alternativen und ein unsauberer Hack ein.
1. position:absolute für das Hauptmenü. Der Code wäe z.B.:
#links { position:absolute; top:0; left:0; width:10em; margin:1em; }
#rechts { margin-left:11em; }
#rechts ul li { float:left; width:10em; }
#rechts h1 { clear:left; }
<ul id="links">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</ul>
<div id="rechts">
<ul>
<li>ItemA</li> <li>ItemB</li> <li>ItemC</li> <li>ItemD</li> <li>ItemE</li>
<li>ItemF</li> <li>ItemG</li> <li>ItemH</li> <li>ItemI</li> <li>ItemJ</li>
<li>ItemK</li> <li>ItemL</li>
</ul>
<h1>Irgendeine Überschrift</h1>
<p>Es war einmal ein Mann, ...</p>
</div>
Da das Hauptmenü ohnehin links-oben angezeigt werden soll, dürfte die absolute Positionierung hier nicht von Nachteil sein. Falls doch, ginge evtl. auch:
2. float:right für das Submenü und den Inhaltsbereich.
Hierzu müßte dieses DIV im Quelltext vorangesetzt werden und das CSS könnte z.B. so aussehen:
#links { /* Angaben zur Weite nicht unbedingt sinnvoll */ }
#rechts { float:right; width:80%; }
#rechts ul li { float:left; width:10em; }
#rechts h1 { clear:left; }
Oder halt ein Hack, der (warum auch immer;-) zumindest im IE6, Mozilla und Opera funktioniert:
Du formatierst #links mit float:left wie in Deinem ersten Ansatz, verzichtetst aber auf clear und fügst stattdessen vor der Überschrift ein:
<div style="width:10em;"> </div>
Tja, ich hoffe Dich nun richtig verstanden zu haben.. ;-)
Freundliche Grüße
Ingo