MaX: relative Ausrichtung eines Menüs?

Hallo,
nachdem ich mich beim Internetseiten erstellen 1½ Jahre nur auf html und css beschränkt habe, bin ich nun der Versuchung dhtml erlegen :-).
Zum üben habe ich mir gleich ein Buch von S. Münz gekauft (DHTML), u.a.  mit einem Script für ein PullDown Menü. Solange dieses Menü "absolute" ausgerichtet werden kann, ist es eine super Sache. Allerdings hab ich es bisher nicht geschafft, dieses Menü, bzw. nur einen Menüpunkt mit den entsprechenden Links, "relative" auszurichten (z.B. IN einer Tabelle).
Eine relative Ausrichtung mit css funktionierte bisher nicht.
In dem dazugehörigen Javascript gibt offensichtlich zwei Einzelvariablen die für diese absolute Ausrichtung verantwortlich sind: "var TopStartLinks = Wert;" und "var TopStartOben = Wert;".

Die Fragen dazu sind: Gibt es überhaupt eine Möglichkeit solche Menüs relativ auszurichten? Gibt es eine Variable statt "Top" mit der man am übergeordneten Element statt an den Rändern ausrichten kann?
Und wenn das dann noch mit ns 4.x-7.x u. IE u. Opera u.... funktioniert......(ist nur so ein Traum ;-) )
Vielen Dank schon mal!!!

mfg

MaX

PS.: Es geht wirklich nur um EINEN Menüpunkt mit PullDown-Funktion!

  1. hi,

    solange du von deinem Menü sonst nichts weiter  verrätst, müssen wir erstmal Geld sammeln, damit einer zur nächsten Hellseherin gehen kann ... bissel Geduld also, ja?

    Grüße aus Berlin

    Christoph S.

    1. Hallo,

      ich liebe Zynismus. Offensichtlich habe ich die FAQ nicht gut genug gelesen, um von solchen Beiträgen verschont zu werden.
      Da ich hier nicht die zwei Seiten Javascript-Code + CSS-Datei, etc.
      posten möchte und die Seiten noch nicht im Netz stehen, beende ich hier besser meine Anfrage.

      in diesem Sinne

      Viele Grüße aus Berlin nach Berlin

      MaX

      PS.: Es ging NICHT, wie meiner Anfrage zu entnehmen ist, darum, das Menü vorgekaut zu bekommen, sondern um eine eher allgemeine Aussage.
      Aber wer lesen kann,..........

      1. PS.: Es ging NICHT, wie meiner Anfrage zu entnehmen ist, darum, das Menü vorgekaut zu bekommen, sondern um eine eher allgemeine Aussage.
        Aber wer lesen kann,..........

        muss raten????

        aus deiner Frage ist aber leider nicht ersichtlich was und wo du probiert hast.
        Man kann dir nur sagen: Layer lassen sich relativ positionieren.

        Aber ob dir das way hilft?

        Struppi.

        1. Hi Struppi,

          das Layer sich relativ positionieren lassen, ist mir durchaus bekannt :). Ich bin mir allerdings nicht sicher, ob dir der Auszug des Scrips nun weiterhelfen kann. Mein Problem ist ja bekannt. Die Frage ist nach wie vor, ob ich dieses Menue in einer Tabelle an einer Tabelle ausrichten kann?

          mfg

          MaX

          Auszug aus dem JScript

          var Menue = new Array(
           "top","Fotos","#",
           "down","Seite 01","http://...........",
           "down","Seite 02","http://...........",
           "down","Seite 12","http://..........."
           );
          var MenueDivs = new Array();

          var TopStartLinks = 10;
          var TopStartOben = 10;
          var TopBreite = 100;
          var DownBreite = 100;
          ...
          ...
          ...
          ...
          function Init() {
           if(document.getElementById)
            Menue_erzeugen();
           else
            if(! parent.Daten)
             window.location.href = "navframe.htm";
          }

          function Menue_erzeugen() {
           var j = 0;
           for(var i = 0; i < Menue.length; i += 3) {
            MenueDivs[j] = document.createElement("div");
            MenueDivs[j].style.position = "absolute";
            MenueDivs[j].style.fontFamily = MenueText;
          ...
          ...
          ...
            MenueDivs[j].style.zIndex = "2";
            if(Menue[i] == "top") {
             MenueDivs[j].innerHTML = "<a class="nav" href=""+ Menue[i+2] + "" onMouseover="MouseoverTopMenue(" + j + ")" onMouseout="MouseoutTopMenue(" + j + ")">" + Menue[i+1] + "</a>";
             Untenversatz = 0;
             if(i > 0) Rechtsversatz += TopBreite;
             MenueDivs[j].style.top = TopStartOben + "px";
             MenueDivs[j].style.left = TopStartLinks + Rechtsversatz + "px";
             MenueDivs[j].style.width = TopBreite + "px";
             MenueDivs[j].style.height = TopHoehe + "px";
             Untenversatz += TopHoehe;
            }
            else if(Menue[i] == "down")

          Dateikopf html-Datei

          <html>
          <head>
          <title>Untitled Document</title>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
          <link rel="stylesheet" href="nav.css" type="text/css">
          <script src="nav.js" type="text/javascript"></script>
          <style type="text/css">
          <!--
          #seite { position:relative; ........................z-index:1; }
          //-->
          </style>
          </head>

          1. Hi Struppi,

            das Layer sich relativ positionieren lassen, ist mir durchaus bekannt :). Ich bin mir allerdings nicht sicher, ob dir der Auszug des Scrips nun weiterhelfen kann. Mein Problem ist ja bekannt. Die Frage ist nach wie vor, ob ich dieses Menue in einer Tabelle an einer Tabelle ausrichten kann?

            Keine ahnung, der Quellcode gibt's nicht her.

            Die Frage ist, an welcher Stelle in deinem Quellcode wird der Layer ausgerichtet?
            wenn er relativ positioniert werden soll, muss der Layer innerhalb des Elternelementes ausgegeben werden. Aber ich kann nicht sehen, wo irgendein Layer ausgegeben oder wo der im HTML Code positioniert wird.

            Struppi.

            1. Hi Struppi,

              okay, so kommen wir nicht weiter. Hier also der Quelltext von der html-Datei und das komplette Javascript :).
              Im Javascript sind zwei Variablen: var TopStartLinks = 20; und
              var TopStartOben = 20; . Diese beiden Variablen bestimmen ganz offensichtlich die Lage des Menues. Und ich vermute, dass ich mit diesem Menue nicht das erreiche, was ich mir vorgestellt habe.
              Aber ich lass mich gern überraschen.

              Also schon mal vielen Dank und einen schönen Abend!

              MaX

              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
              <html>
              <head>
              <title>Seite</title>
              <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
              <style type="text/css">
              #Navigationsersatz { position:absolute; top:20px; left:20px; }
              #Seite { position:absolute; top:60px; left:20px; right:20px; z-index:1; }
              </style>
              <link rel="stylesheet" href="formate.css" type="text/css">
              <script src="navigation.js" type="text/javascript"></script>
              </head>
              <body onLoad="Init()">
              <div id="Navigationsersatz">
              <noscript>
              <a href="navigationsframe.htm" target="_blank"><b>Navigation</b></a>
              </noscript>
              </div>
              <div id="Seite" onClick="Menue_zuruecksetzen()">
              <h1>Ein berühmter Blindtext und sein Hintergrund</h1>

              <p>Text</p>

              </div>
              </body>
              </html>

              Javascript

              "top","Fotos","#",
               "down","Seite 01","http://........",
               "down","Seite 02","http://........",
               "down","Seite 03","http://........",,
               "down","Seite 04","http://........",
               "down","Seite 05","http://........",
               "down","Seite 06","http://........",
               "down","Seite 07","http://........",
               "down","Seite 08","http://........",
               "down","Seite 09","http://........",
               "down","Seite 10","http://........",
               "down","Seite 11","http://........",
               "down","Seite 12","http://........"
              );
              var MenueDivs = new Array();

              var TopStartLinks = 20;
              var TopStartOben = 20;
              var TopBreite = 120;
              var DownBreite = 220;
              var DownLinksrand = 20;
              var TopHoehe = 20;
              var DownHoehe = 20;
              var MenueHintergrundfarbe = "#CCCCCC";
              var MenueText = "Tahoma,sans-serif";
              var MenueTextfarbe = "#000000";
              var MenueTextgewicht = "bold";
              var MenueTextgroesse = "13px";
              var MenueInnenabstand = "2px";
              var MouseoverHintergrundfarbe = "#D00000";
              var MouseoverTextfarbe = "#FFFFFF";
              var Rechtsversatz = 0;
              var Untenversatz = 0;

              function Init() {
               if(document.getElementById)
                Menue_erzeugen();
               else
                if(! parent.Daten)
                 window.location.href = "navigationsframe.htm";
              }

              function Menue_erzeugen() {
               var j = 0;
               for(var i = 0; i < Menue.length; i += 3) {
                MenueDivs[j] = document.createElement("div");
                MenueDivs[j].style.position = "absolute";
                MenueDivs[j].style.fontFamily = MenueText;
                MenueDivs[j].style.fontSize = MenueTextgroesse;
                MenueDivs[j].style.color = MenueTextfarbe;
                MenueDivs[j].style.fontWeight = MenueTextgewicht;
                MenueDivs[j].style.backgroundColor = MenueHintergrundfarbe;
                MenueDivs[j].style.padding = MenueInnenabstand;
                MenueDivs[j].style.zIndex = "2";
                if(Menue[i] == "top") {
                 MenueDivs[j].innerHTML = "<a class="nav" href=""+ Menue[i+2] + "" onMouseover="MouseoverTopMenue(" + j + ")" onMouseout="MouseoutTopMenue(" + j + ")">" + Menue[i+1] + "</a>";
                 Untenversatz = 0;
                 if(i > 0) Rechtsversatz += TopBreite;
                 MenueDivs[j].style.top = TopStartOben + "px";
                 MenueDivs[j].style.left = TopStartLinks + Rechtsversatz + "px";
                 MenueDivs[j].style.width = TopBreite + "px";
                 MenueDivs[j].style.height = TopHoehe + "px";
                 Untenversatz += TopHoehe;
                }
                else if(Menue[i] == "down") {
                 MenueDivs[j].innerHTML = "<a class="nav" href=""+ Menue[i+2] + "" onMouseover="MouseoverDownMenue(" + j + ")" onMouseout="MouseoutDownMenue(" + j + ")">" + Menue[i+1] + "</a>";
                 MenueDivs[j].style.top = TopStartOben + Untenversatz + "px";
                 MenueDivs[j].style.left = TopStartLinks + Rechtsversatz + "px";
                 MenueDivs[j].style.width = DownBreite + "px";
                 MenueDivs[j].style.height = DownHoehe + "px";
                 MenueDivs[j].style.paddingLeft = DownLinksrand + "px";
                 MenueDivs[j].style.visibility = "hidden";
                 Untenversatz += DownHoehe;
                }
                document.getElementsByTagName("body")[0].appendChild(MenueDivs[j]);
                j += 1;
               }
              }

              function MouseoverTopMenue(n) {
                MenueDivs[n].style.backgroundColor = MouseoverHintergrundfarbe;
                Menue_zuruecksetzen();
                for(var i = 0; i < Menue.length; i += 3)
                 if(Menue[i] == "down")
                  if(parseInt(MenueDivs[parseInt(i/3)].style.left) == parseInt(MenueDivs[n].style.left))
                   MenueDivs[parseInt(i/3)].style.visibility = "visible";
              }

              function MouseoutTopMenue(n) {
                MenueDivs[n].style.backgroundColor = MenueHintergrundfarbe;
              }

              function MouseoverDownMenue(n) {
                MenueDivs[n].style.backgroundColor = MouseoverHintergrundfarbe;
              }

              function MouseoutDownMenue(n) {
                MenueDivs[n].style.backgroundColor = MenueHintergrundfarbe;
              }

              function Menue_zuruecksetzen() {
                for(var i = 0; i < Menue.length; i += 3)
                 if(Menue[i] == "down")
                  MenueDivs[parseInt(i/3)].style.visibility = "hidden";
              }

              1. Hi Struppi,

                okay, so kommen wir nicht weiter. Hier also der Quelltext von der html-Datei und das komplette Javascript :).
                Im Javascript sind zwei Variablen: var TopStartLinks = 20; und
                var TopStartOben = 20; . Diese beiden Variablen bestimmen ganz offensichtlich die Lage des Menues. Und ich vermute, dass ich mit diesem Menue nicht das erreiche, was ich mir vorgestellt habe.
                Aber ich lass mich gern überraschen.

                Wohl kaum.
                Wie ich schon sagte, um etwas relativ zu etwas anderen zu positionieren muss das was relativ sein soll in das andere eingabut werden und zwar nicht im browserfenster, sondern imn Quelltext. Und den gibt es, wie bei den meisten (ich kenn kein anderes) Menüskripten, hier nicht.

                Struppi.