position: absolute
Nils
- css
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
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
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 ;-)
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
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
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
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
Vielen Dank für deine Antwort, klappt nun alles einwandfrei.