layer relativ zu einem button positionieren

[Rios]

hi, wie schon in der Überschrift lesbar, habe Ich einen Button und einen Layer den Ich bei click direkt unten am button angrenzend anzeigen lassen will.
Wie mache Ich das, dass die Position vom layer relativ zum der des buttons ist?
Habe schon rumprobiert mit position:absolute und relative, funktioniert aber nicht so wie ich dachte.

Der Code zur Veranschaulichung:

P.S. Die Position des buttons ist auch variabel

 <table border='0' cellpadding="0" cellspacing="0">
<tr>
<td align="right">
<input type="button" id="button1" onclick="showLayer('view_layer')" value="view">
</td>
</tr>
<tr>
<td>

<div id="view_layer" style="position:relative; left: 1px; top: 1px; visibility:hidden; z-index:1; "> 

<table cellpadding="0" cellspacing="0">
<tr>
<td onmouseover="this.style.backgroundColor='#cccccc'" onmouseout="this.style.backgroundColor=''">
<a href="javascript:doClose()">Task List</a><br>
</td>
</tr>
<tr>
<td onmouseover="this.style.backgroundColor='#cccccc'" onmouseout="this.style.backgroundColor=''">
<a href="javascript:doClose()">Time Sheet</a><br></td>
</tr>
</table>

</div>

</td>
</tr>
</table>

 

[ollek81]

Tach

Ich peile nicht so ganz, was du willst.
Was soll den bitte "relativ" sein

Ollek81

 

[Rios]

also ich will keine Pixel Angaben machen müssen, so wie is im beispiel code drin ist, sondern, je nachdem wo sich der button befindet, soll der layer immer genau drunter erscheinen.

 

[ollek81]

Das top:1px usw.?
Dann schmeiß das doch einfach raus. Das mit position gleich auch noch.
Dann sieht's immer noch gleich aus.
Bei mir jedenfalls.
Die Position unter dem Button machst du doch eh mit der Tabelle, die um das beides rum ist...

Kannst du mal ein Bild machen, wie's ist, und wie's seien soll?

Ich kann mir da echt nix vorstellen... Sorry.

Ollek81

 

[Rios]

ja wenn ich das mit position rauslasse ist es an der stelle, das Problem ist dann aber, dass der layer Platz verbraucht, auch wenn er unsichtbar ist.

Zur Veutlichung folgender screenshot: Der text wird auch nach unten "gedrückt" wenn der layer unsichtbar ist, stattdessen soll er, wenn er aufklappt über dem Rest erscheinen und nicht alles nach unten schieben, verstehst du?

 

[ollek81]

ach so...

Also eine Art dropdown-Menü

Da gibt's doch auch schon zig Einträge hier im Forum.
Such mal danach.

Ne "einfache" Variante die mir jetzt auf die Schnelle einfällt:

Nimm 2 div-container und bau auf dem einen den Button und dein Menü.
Auf den anderen den Text.
Der mit dem Text erhält den z-index 1, der mit dem Button usw. z-index 2.
Ist also darüber. Das vernünftig zu positionieren, kannst du dann über Tabellen auf beiden layern. Also du baust die gleiche Tabelle auf beiden layern. Nur auf der einen kommt unter dem Feld mit den Button der layer(z-index:3) hin, auf dem anderen halt der Text.

Soweit klar
Naja, wie gesagt. Vernünftige Lösungen wurden hier schon in Massen gepostet.
Sonst Google...

MfG

Ollek81

 

[Rios]

ja gute idee, vielleicht pass ich mir so ein dropdown menü an.

Das Problem ist, dass es nicht so ganz so leicht wird, weil der ganze code variable mit PHP erzeugt wird, der text drunter ist auch nur ein dummy

 

[Quaese]

Hi,

wenn Du Bereiche mit visibility versteckst, wird der benötigte Platz bereits reserviert.
Soll das nicht sein, solltest Du die CSS-Eigenschaft diplay verwenden und
ihr den Wert none zuweisen. Soll in Deinem Fall der Container wieder
eingeblendet werden, so gibst Du ihr den Wert block.
Um den Container direkt unter den Button zu platzieren, musst Du die CSS-Eigenschaft
margin-top auf 0px setzen.

Dein DIV-Tag sollte demnach wie folgt aussehen:

<div id="view_layer" style="margin-top: 0px; position:relative; left: 1px; top: 1px; display: none; z-index:1; ">

Mit der folgenden Funktion kannst Du den Container ein- und ausblenden:

<script language="javascript" type="text/javascript">
<!--
    var isBlock = 0;
    function showLayer(strID){
        var myObj = document.getElementById(strID);
        if(isBlock == 0){
            myObj.style.display = "block";
        isBlock = 1;
        }else{
            myObj.style.display = "none";
            isBlock = 0;
        }
    }
  -->
</script>

Vielleicht bringt Dich das weiter.

Ciao
Quaese

 

[Rios]

ah cool danke, genau das meinte ich, jetzt wird der Platz nicht mehr "reserviert", aber wenn ich auf den button clicke, wir der Rest der Seite nach unten geschoben, es müsste aber so sein, dass sich der layer drüber legt.

Wie kann Ich das noch erreichen?

 

[Rios]

habs hingekriegt

und zwar muss ich den div style so setzen:

<div style="posiotion:absolute; visibility:hidden; z-index:1">

d.h. mit position:absolute aber ohne Positions Angaben, dann wird kein Platz reserviert, und bei click wir der layer oben drüber gelegt