Positionierung von Box relativ zu Button in Tabellenzelle

[Michi]

Guten Tag,

bin mit CSS nicht so vertraut, muss sie jetzt aber doch mal einsetzen:

Es geht da um eine Seite mit einer recht langen Auflistung von Daten, alles Tabellen (<table>).

Ganz unten, in der letzten Tabellenzeile dieser Seite, die am Seitenende andockt, befindet sich jetzt ein Button "History", bei dessen Anklicken eine Infobox nach oben hin aufgehen soll.

Sieht also in etwa so aus:

________________________________________________________________________

-------------------------------------------------------------
Tabellenzeile 1
-------------------------------------------------------------
Tabellenzeile 2
-------------------------------------------------------------
...
-------------------------------------------------------------
Tabellenzeile n
-------------------------------------------------------------
                                                    History
-------------------------------------------------------------
________________________________________________________________________

Der Button ist also in eine Tabellenzelle eingebettet.

Formatiert hab ich die Infobox folgendermaßen:

________________________________________________________________________

#infobox
{
  position: relative;
  bottom: 480px;
  right: 10px;
  width: 400px;
  height: 460px;
  background-color: #ffcc00;
  text-align:left;

}
________________________________________________________________________

Angezeigt wird sie vereinfach dargestellt so:

________________________________________________________________________

...

<td>

<div id="infobox">
     dies und jenes
     ...
   </div>

</td>

...
________________________________________________________________________

Jetzt wird die Box zwar schon an der Stelle in der Form angebaut, wie es sein soll, nämlich direkt oberhalb des Buttons, aber:

Die Tabellenzelle, die diese Infobox über <div> einbindet, wird gleichzeitig auch noch um die Höhe dieser Box aufgebläht und das soll natürlich nicht sein.

Wie muss man die Box jetzt formatieren bzw. einbinden (vielleicht liegt auch da schon das Problem), dass sie zwar immer so wie jetzt auch schon direkt oberhalb des Buttons dargestellt wird, die einbindende Tabellenzelle aber in ihrer Formatierung unberührt bleibt, sodass also keine Aufblähung stattfindet etc.?

(Eine absolute Positionierung bezieht sich bei CSS ja scheinbar immer auf den sichtbaren Bildschirmbereich und nicht auf die ganze Seite, die ja länger sein kann als der Bildschirm anzuzeigen vermag. In manchen Fällen vielleicht praktisch, hilft hier jetzt aber ohne Weiteres nicht.)

Gruß Michi

[Marc]

Hallo Michi,

(Eine absolute Positionierung bezieht sich bei CSS ja scheinbar immer auf den sichtbaren Bildschirmbereich und nicht auf die ganze Seite, die ja länger sein kann als der Bildschirm anzuzeigen vermag. In manchen Fällen vielleicht praktisch, hilft hier jetzt aber ohne Weiteres nicht.)

Das stimmt nicht. Siehe: Positionierung

Viele Grüße,
Marc.

[Michi]

Hi Marc,

danke für den Tip. Hab das jetzt mal schmunzelnd studiert mit den
absoluten Positionierungen, die ja eigentlich doch recht relativ
zu verstehen sind und dass auch noch gar nicht so alte Browser gleich
wieder Probleme mit der und der Angaben haben... usw., da kommt
Freude auf. :)

Habs jetzt folgendermaßen gelöst, auch auf die Gefahr hin,
dass es irgendwie auch noch einfacher ginge: ;)

_________________________________________________________

#container_fuer_infobox
{
  position: static;
  height: 0px;
}

#infobox
{
  position: relative;
  text-align:left;
  bottom: 480px;
  height: 460px;
  right: 10px;
  width: 400px;
  background-color: #ffcc00;
  text-align:left;

}

_________________________________________________________

<td>

<div id="container_fuer_infobox">

Historybutton...

<div id="infobox">

alles, was man so wissen muss...

</div>

</div>

</td>

_________________________________________________________

Funktioniert, aber auf die Verpackung in einen übergeordneten
Container mit explizit festgelegter Höhe 0 (sonst blähts die
Tabellenzelle auf) muss man erstmal wieder kommen.

Dank und Gruß von Michi

[Michi]

(Zumindest im Firefox funktioniert das, im IE natürlich wie immer nicht...)

[Michi]

Hältst nicht aus... :)

Habs jetzt mit Overlib gelöst, funktioniert in allen Browsern, selbst in schlechten:

http://www.bosrup.com/web/overlib/

[ChrisB]

Hi,

Funktioniert, aber auf die Verpackung in einen übergeordneten
Container mit explizit festgelegter Höhe 0 (sonst blähts die
Tabellenzelle auf) muss man erstmal wieder kommen.

Stimmt, jeder Bloedsinn braucht erst mal einen, der drauf kommt ...

"Vernuenftig" umgesetzt wuerde man die Infobox natuerlich einfach absolute innerhalb eines Elements mit vom Defaultwert static abweichender Positionierung positionieren.

MfG ChrisB