Nils: position: absolute

Hallo,

ich würde gerne bei einem Rollover ein kleines Preview - Bild anzeigen.  Was ich nun gemacht habe ist folgendes:

Der Link dazu sieht so aus:

<a href="#" onMouseOut="document.getElementById('PreviewfeldBild').style.display = 'none'" onMouseOver="document.getElementById('PreviewfeldBild').style.display = 'inline'" class="action">Preview Bild</a>

Das previewfeld ist eine DIV Area definiert wie folgt:

<div style="display:none; position:absolute ; top:25px; left:25px; border:1px solid #000000; width=350px; height=200px;" id="PreviewfeldBild"><img src="bild.jpg" alt="preview"></div>

Das Div Element befindet sich innerhalb eines <td> Elementes, durch das position: absolute attribut sollte nun also das Div Element an seinem Elternelement ausgerichtet werden, dem <td> Element, das ist aber nicht der Fall, das Elternelemnt scheint <body> zu sein, genau das verstehe ich nicht.

Falls das nicht möglich sein sollte, gibts denn vielleicht die  Möglichkeit das Element an der "Anzeigefläche" auszurichten, d.h. dass es immer an der selben Position erscheint (Wie background-attachment:fixed; ich denke man versteht was ich meine.)?

Hinweis: Da die Seite durch ein Script generiert wird bin ich nicht sehr flexibel was die Position der Tags betrifft (muss so bleiben).

Ich danke für eure Hilfe,

nils

  1. Hi,

    <a href="#" onMouseOut="document.getElementById('PreviewfeldBild').style.display = 'none'" onMouseOver="document.getElementById('PreviewfeldBild').style.display = 'inline'" class="action">Preview Bild</a>

    position:absolute und display:inline paßt nicht zusammen, benutze block.

    <div style="display:none; position:absolute ; top:25px; left:25px; border:1px solid #000000; width=350px; height=200px;" id="PreviewfeldBild"><img src="bild.jpg" alt="preview"></div>

    width und height sind unsinnig, falsches Trennzeichen.

    Das Div Element befindet sich innerhalb eines <td> Elementes, durch das position: absolute attribut sollte nun also das Div Element an seinem Elternelement ausgerichtet werden, dem <td> Element, das ist aber nicht der Fall,

    Warum sollte das der Fall sein?
    Basis für die Positionierung ist das innerste Vorfahren-Element, das nicht position:static hat, bei Nichtvorhandensein eines solchen Elements der Viewport.

    das Elternelemnt scheint <body> zu sein, genau das verstehe ich nicht.

    s.o. - ist so definiert.

    Falls das nicht möglich sein sollte,

    sorge dafür, daß das gewünschte Element nicht static positioniert ist.

    cu,
    Andreas

    --
    MudGuard? Siehe http://www.Mud-Guard.de/
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Hi,

      ganz nebenbei: Ich unterstelle, dass eine JavaScript-freie Lösung möglich ist.

      position:absolute und display:inline paßt nicht zusammen,

      Das kann man so oder so sehen. Der display-Typus wird bei absolut positionierten und gefloateten Elementen automatisch konvertiert; aus inline wird also block. Mit der "unsinnigen" Angabe kann man aber zumindest einen der obskuren IE-Bugs umgehen (mir fällt gerade nicht ein, welcher es war), so dass "position:absolute; display:inline;" durchaus eine gewollte Kombination darstellt.

      Basis für die Positionierung ist das innerste Vorfahren-Element, das nicht position:static hat, bei Nichtvorhandensein eines solchen Elements der Viewport.

      Danke - eine so knackige Zusammenfassung hatte ich bisher noch nicht gefunden. Ich lese sie jetzt 100[1] mal, damit ich sie mir auch wirklich merke.

      Cheatah

      [1] Binär, versteht sich ;-)

      --
      X-Will-Answer-Email: No
      X-Please-Search-Archive-First: Absolutely Yes
      1. Hi,

        Basis für die Positionierung ist das innerste Vorfahren-Element, das nicht position:static hat, bei Nichtvorhandensein eines solchen Elements der Viewport.
        Danke - eine so knackige Zusammenfassung hatte ich bisher noch nicht gefunden. Ich lese sie jetzt 100[1] mal, damit ich sie mir auch wirklich merke.

        ;-)

        [1] Binär, versteht sich ;-)

        Hm, ich dachte Tridezimal wäre die richtige Basis ;-)

        cu,
        Andreas

        --
        MudGuard? Siehe http://www.Mud-Guard.de/
        Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
        1. Hi,

          [1] Binär, versteht sich ;-)
          Hm, ich dachte Tridezimal wäre die richtige Basis ;-)

          aber nur für Zahlen, die das Produkt aus 9 und 6 darstellen ;-)

          Cheatah

          --
          X-Will-Answer-Email: No
          X-Please-Search-Archive-First: Absolutely Yes
      2. Hello,

        Das kann man so oder so sehen. Der display-Typus wird bei absolut positionierten und gefloateten Elementen automatisch konvertiert; aus inline wird also block. Mit der "unsinnigen" Angabe kann man aber zumindest einen der obskuren IE-Bugs umgehen (mir fällt gerade nicht ein, welcher es war), so dass "position:absolute; display:inline;" durchaus eine gewollte Kombination darstellt.

        War es nicht der double-margin-bug?

        Liebe Grüße aus http://www.braunschweig.de

        Tom

        --
        Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen
        Nur selber lernen macht schlau
        1. Hi,

          War es nicht der double-margin-bug?

          das richtige Stichwort, und schon wird man fündig: http://www.positioniseverything.net/explorer/doubled-margin.html :-)

          Cheatah

          --
          X-Will-Answer-Email: No
          X-Please-Search-Archive-First: Absolutely Yes
    2. Vielen Dank für deine Antwort, klappt nun alles einwandfrei.