DIV über Inhalt positionieren - javarea.de Forum powered by javarea.de

Archivlink: javarea.de Forum > (X)HTML & CSS (allgemein) > DIV über Inhalt positionieren

Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > DIV über Inhalt positionieren

Pages: [1]

geschrieben von AlexD am 25.10.2010 - 11:02

Hallo,

ich hab ein Problem eine "Kommentar-Box" über den Inhalt zu positionieren.

Situation ist folgende:
In einer Tabelle mit Trainingseinheiten können auf Wunsch auch Ruhetage angezeigt werden. Diese können wiederum mit einem Kommentar hinterlegt werder, dieser soll nun beim Überfahren des kleinen roten Dreiecks angezeigt werden.
Leider wird mir auch der komplette Inhalt der Tabelle mit verschoben!!

Wie bekomme ich das DIV schwebend über den Tabelleninhalt?!

Aktuell sieht das beim DIV so aus:

HTML-Quelltext

1:

<div id="".$datum."" class="msg_box" style="position:relative; bottom:20px; left:60px; width:300px; height:100px; overflow:auto; display:none; z-index:1;">Kommentar Ruhetag:<p>".$eintrag['eintrag']."</p></div>";

Wenn ich position: absolute nehme wird der Inhalt nicht berührt, jedoch wird es dann nicht da angezeigt wo es soll... bei relativer Positionierung passt die Position aber der Inhalt wird verschoben.

[EDIT]
Hab nun versucht die Tabelle mit 'position:relative; top:0px; left:0px' zu Positionieren und dann die DIV-Box mit 'position:absolut' innerhalb der Tabelle. Der IE und Opera machen das wohl, FireFox positioniert mir die BOX immer zur Browserecke.

Nachteil von position: absolute:
ich hab ggf. mehrere Zeilen in der Tabelle mit Kommentar, da muss ich dann von PHP immer Pixel für die nächste Zeile hinzurechnen... Problem ist nur, wenn mal eine Zeile der Tabelle höher ist (zweizeilig) stimmt die Positionierung der Div-Box der nächsten nicht mehr, was sich unter Umständen wiederholt und die Position immer "schlechter" wird.
[/EDIT]

Anbei ein Screenshop zum Problem.

Gruß
Alex

geschrieben von zippy am 25.10.2010 - 12:24

Vielleicht funktioniert es, wenn du bei position:absolute die Position des Cursors beim Klicksen auf den Button einbeziehst, also nicht 20 und 30 Pixel, sondern 20px+Maus-x und 30px+Maus-y. Näheres hier:
http://de.selfhtml.org/javascript/o....client_x_y
Die Funktion aus dem Link, ein bisserl abgeändert, grob gekürzt und ungeprüft:

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10:

<script type="text/javascript">
function Mausklick (Ereignis,id) {
    xxx=Ereignis.clientX+30;
    yyy=Ereignis.clientY+20;
    document.getElementById(id).style.left  = xxx + "px";
    document.getElementById(id).style.top = yyy + "px";
 }


</script>

Beim Klick auf den Button müsste dann stehen onmousedown="Mausklick(event,id", und die id ist die id es div, welches erscheinen soll.

geschrieben von zippy am 25.10.2010 - 12:40

Also, ganz gelöst ist dein Problem damit natürlich nicht. Du müsstest natürlich deinen Code dazu schreiben. Es sollte aber insoferne helfen, als bei position:absolute nicht mehr ein starrer Wert zur Positionierung verwendet wird, sondern die Position des Mauszeigers dazugerechnet wird.

geschrieben von Danny am 26.10.2010 - 00:52

Hallo Alex,

versuche mal folgende CSS Attribute für das überlagernde div zu verwenden

	HTML-Quelltext
1:	position:absolute; margin-bottom:20px; margin-left:60px;

und kein top/bottom und left/right. Hab es jetzt nicht getestet, aber soweit ich weiß sollte ein absolutes div wenn nicht explizit mit top/left positioniert an der Stelle erscheinen, wo es theoretisch relativ liegen würde.

Gruß Danny

geschrieben von AlexD am 26.10.2010 - 09:01

Hallo,

also ich hab jetzt erst mal das von Danny getestet da es der einfachste Weg ist.
Und ja Danny hat recht, ohne Positionsangabe verhält sich position:absolute wohl wie relative und setzt es dort hin wo es eigentlich positioniert wäre.

Also es funktioniert!!

Hab es mit IE8, FF3.6.11, Safari, Opera und Chrome getestet!
Einzig der IE8 im Kompatibilitätsmodus für IE7 versetzt mit die Box um genau die Pixel weiter die ich angegeben habe... heißt die Box ist etwas zu weit versetzt.
Aber damit kann ich leben... man könnte das ja jetzt noch über CSS ausgleichen.

So ich möchte mich wieder mal für die schnelle und kompetente Hilfe bei Euch bedanken!!

Besten Gruß
Alex