nicht angemeldet
Hallöle,
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?
Richtig!
Hierfür wäre die logische Umsetzung mMn _eine_ verschachtelte Liste, in der das Submenü in dem jeweiligem Listenpunkt integriert ist.
Ja, aber ...
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.
Genau.
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.
Eine weitere Alternative (display:inline-block aus CSS 2.1) scheidet mangels Unterstützung im IE/Mozilla aus.
- position:absolute für das Hauptmenü. Der Code wäe z.B.:
Da das Hauptmenü ohnehin links-oben angezeigt werden soll, dürfte die absolute Positionierung hier nicht von Nachteil sein.
Damit ginge es zur Not, das hat aber den Nachteil, das die Breitenbeschränkung des body (max-width) mit Zentrierung (margin:0 auto;) nicht mehr bzw. nur mit erheblichem Zusatzaufwand funktioniert.
- float:right für das Submenü und den Inhaltsbereich.
#links { /* Angaben zur Weite nicht unbedingt sinnvoll */ }
#rechts { float:right; width:80%; }
#rechts ul li { float:left; width:10em; }
#rechts h1 { clear:left; }
Damit ist wieder das gesamte float:left (also auch das des Hauptmenüs) aufgehoben. Leider gibt es kein float:left(<number>); mit dem nur eine bestimmte Anzahl floats aufgehoben wird. Oder eine Schachtelung von dann unabhängigen floats...
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>
Das scheint die einfachste Lösung zu sein. Ist zwar ein sinnloses Element in der Seite, aber ohne scheint es ohnehin nicht zu gehen.
Muß ich mal drüber nachdenken, warum das funktioniert.
Tja, ich hoffe Dich nun richtig verstanden zu haben.. ;-)
Sieht so aus. Sorry, falls ich unfreundlich geklungen haben sollte - das Problem hat mich tierisch genervt.
Vielen Dank für Deine Geduld mit mir.
Robert