Layer positionieren?

[notebook20000]

Wnen ich folgendes eingebe, landet der LAyer immer am linken Bildschirmrand. Wie kann ich dafür sorgen, das er da auftaucht wo das Teil aufgerufen wurde?

<input name="" type="text"><a href="#" onClick="openDatePicker()">Open Date</a>
<div style="position:absolute;z-index:1000;" id='calendarContainer'></div>

 

[Maik]

Hi,

ohne eine Positionsangabe (left oder right) wird das Element automatisch am linken Elementrand positioniert.

Ansonsten schau dir mal den Code von http://christoph.ist-stylish.de/tut/tooltips.html an, falls der Layer sich an der Mausposition ausrichten soll.

 

[notebook20000]

Hallo,

da muss es noch was anderes geben. Eine reien CSS Lösung

 

[hans jörg]

Hallo,
du könntest um das Inputfeld und den Layer noch einen Layer spannen mit der Eigenschaft postion:realtive;. So ein relatives Element kann nähmlich auch als neuer Ursprung für ein absolut positioniertes Kindelement dienen.

 

[notebook20000]

Div überlappen und auf Elternelement ausrichten?

Wie geht das ? Der aktuelle Code sieht so aus:

<span id="paper1_anzahl_gelesen" onClick="OpenCloseDiv('userlist_gelesen');" style="text-decoration:underline;">
<div style="display:block;position:absolut;">
<div ID="userlist_gelesen" style="display:block;overflow:auto;width:200px;height:180px;background-color:#004589;">
{$content.userlist_gelesen}
</div>
</div>
{$content.anzahl_useraufrufe} x User gelesen
<span>

 

[Maik]

Hi,

wenn ich die Kurzfassung deines Anliegens richtig verstanden habe, muss das Elternelement relativ und das Kindelement absolut positioniert werden - der Wert heißt zudem absolute mit "e" am Ende.

Dein Quellcode hat leider einen Haken, denn Inline-Elemente, wie das span-Element, dürfen keine Block-Elemente, wie das div-Element, enthalten.

Hier mal eine reine DIV-Variante, in der ich zu Demonstrationszwecken dem Eltern- und Kindelement eine linke und obere Positionsangabe mit auf den Weg gegeben habe:

<div id="paper1_anzahl_gelesen" onclick="OpenCloseDiv('userlist_gelesen');" style="text-decoration:underline;position:relative;left:50px;top:50px;">
     <div style="display:block;position:absolute;left:50px;top:50px;">
          <div ID="userlist_gelesen" style="display:block;overflow:auto;width:200px;height:180px;background-color:#004589;">
               {$content.userlist_gelesen}
          </div>
     </div>
     {$content.anzahl_useraufrufe} x User(n) gelesen
<div>

[editpost]

Da du die Frage in ähnlicher Form schon vor Tagen im JS-Forum gestellt hast, führe ich die beiden Themen nun an dieser Stelle zusammen, und möchte dich bitten, solch "Cross-Postings" zu unterlassen (siehe Netiquette Nr.12).

 

[notebook20000]

Das ewirkt auch nix. Im Firefox klept es am rechten Rand der übergeordneten tabelle , im IE richtet es sich einigermaßen richtig aus aber es lappt rechts über den Bildschirm.

 

[Maik]

Vielleicht helfen dir diese Beispiele weiter?

• http://www.brunildo.org/test/CssPop.html
• http://www.brunildo.org/test/AutoAbsP.html

 

[notebook20000]

Hallo,

teilweise habe ich es jetzt hinbekommen:

        <div id="paper1_anzahl_gelesen" onclick="OpenCloseDiv('userlist_gelesen');" style="cursor:pointer;text-decoration:underline;position:relative;">
         <div ID="userlist_gelesen" style="display:block;position:absolute;left:10px;top:12px;">
           <div ID="userlist_head" style="display:block;width:200px;overflow:auto;background-color:#004589;font-weight:bold;" class="row0">Bereits gelesen durch:</div>
           <div style="display:block;overflow:auto;width:216px;height:180px;background-color:#004589;">
             {$content.userlist_gelesen}
           </div>
         </div>
         Useraufrufe: {$content.anzahl_useraufrufe} 
        <div>

aber wie krieg ich das Teil jetzt ohne Umbruch an den Rest dran? Der jetzt definierte relative Tag bricht imemr eine Reihe tiefer um

 

[Maik]

Bei mir wird lediglich das Kindelement #userlist_gelesen nach unten verschoben, was an top:12px liegt.