Philipp an Forum... Where are thou?

[Sven Rautenberg]

Moin!

Da sich bei mir die Page dynamisch der verwendeten Fenstergrösse
anpasst, ist es nicht möglich die Elemente absolut zu positionieren.
Meine Frage lautet nach wie vor: Wie kann ich die Elemente relativ zu einem anderen
positionieren?

Doch, natürlich. Wende folgenden Trick an: Absolute Positionierung bezieht sich immer auf die Koordinaten, die das umgebende, nächsthöhere, absolut oder relativ positionierte Element vorgibt.

Mit anderen Worten: Elementverschachtelung ist der Schlüssel zum Erfolg.

Ein Beispiel:

<div class="hauptmenu">Ich bin ein Hauptmenü</div>

Dieses DIV kannst du ohne Probleme irgendwo auf der Seite einbauen, so dass es sich dem Seitenfluss anpasst.

Wenn du es um ein Untermenü erweitern willst, dann füge das Untermenü an geeigneter Stelle ein, nämlich _innerhalb_:

<div class="hauptmenu">Ich bin ein Hauptmenü
  <div class="submenu" id="sub1">Ich bin ein Submenu<br>Ich bin Punkt 2<br>Ich bin Punkt 3</div>
</div>

Soweit, sogut. Wenn du das ohne CSS-Formatierung anguckst, siehst du alles. Sowas kann unerwünscht sein ;-)

Deshalb formatierst du jetzt ein wenig mit CSS:

.hauptmenu {
  position:relative; /* Durch relative Positionierung wird das DIV zu einem neuen Container */
  left:0px;
  top:0px; /* Es wird aber nichts verschoben - das ist der Trick */
}

.submenu {
  visibility:hidden; /* Alle Submenüs Verstecken */
  position:absolute; /* Submenü absolut positionieren */
  left:10px;
  top:30px;  /* Die Position bezieht sich auf die linke obere Ecke des _Hauptmenüs_ */
}

Beachte: Die ID im DIV wird gar nicht verwendet. Du kannst sie heranziehen, um diesem speziellen Untermenü eigene Eigenschaften zu geben - du brauchst sie aber eigentlich nur deshalb, um mit Javascript drauf zuzugreifen und den Layer anzuzeigen.

Die Positionierung des Submenüs musst du nach eigenen Wünschen vornehmen.

Netscape 4 kann mit dieser Methode durchaus Probleme machen, der positioniert nicht so gerne relativ, wenn ich es richtig erinnere. Also Vorsicht. Zur Not kannst du die Untermenüs immer noch verstecken - da du ja hoffentlich eine Navigationsalternative anbietest für alle Menschen ohne Javascript, ist das aber kein Beinbruch - es reicht dann, wenn man durch Anklicken des Hauptmenüpunktes zu einer Seite mit den Punkten des Untermenüs gelangt.

Bedenke auch: Wenn man mit der Maus einen Menüpunkt überfährt und ein Menü ausklappen sieht, ist man veranlaßt, den Hauptmenüpunkt _nicht_ zu klicken! Alle Computermenüs funktionieren so: Der Hauptmenüpunkt ist nur der Anlaß, das Untermenü auszufahren, er hat aber sonst keine Funktion. Deshalb ist es unter Umständen sehr sinnvoll, hinter dem Hauptmenüpunkt _keine_ wichtige Seite zu verstecken, weil die möglicherweise einfach nicht gefunden wird (ist mir schon so berichtet worden!). Meine Idee: Der Hauptmenüpunkt führt zum ersten Punkt des Untermenüs. So kriegen die Leute, die den Hauptmenüpunkt klicken, eine sinnvolle Inhaltsseite, und es kann sich keine Information verstecken.

Zum Layer-Anzeigen/Verstecken suchst du im Archiv nach "showlayer hidelayer" oder verwendest die Mechanismen der SelfHTML-DHTML-Bibliothek (wenngleich ich bevorzuge, für meine Skripte jeweils genau auf das Problem abgestimmte Skripte zu verwenden, und keine Bibliotheken, die als eierlegende Wollmilchsau meist langsamer sind - Funktionen kopieren geht aber ja auch).

- Sven Rautenberg