CSS Infobox in einer Tabelle positionieren

[Michel1966]

Hallo,

ich möchte eine Infobox - wie hier:
http://aktuell.de.selfhtml.org/artikel/css/infobox/

So positionieren, dass der Inhalt bei "Mouse over" nicht absolut ist, sondern innerhalb einer Tabelle mit fester Größe positioniert werden kann.

Also derzeit sieht die Infobox so aus:
#box:hover div{
display:block;
width:300px;
position:absolute;top:20px;right:20px;
border:1px solid black;
padding:15px;
font:normal 14px verdana, sans-serif;}

Das hat zur Folge, dass meine Infobox bei einer hohen Auflösung zu weit weg ist. Ich möchte die Infobox in eine Zelle einer Tabelle haben.
Siehe hier:
http://www.visual-3d.de/temp/mouse_over_test.htm

Geht sowas ohne Java Script ? Wenn ja wie ?

Danke

Gruß - Michel

[ChrisB]

Hi,

ich möchte eine Infobox - wie hier:
http://aktuell.de.selfhtml.org/artikel/css/infobox/

So positionieren, dass der Inhalt bei "Mouse over" nicht absolut ist, sondern innerhalb einer Tabelle mit fester Größe positioniert werden kann.

Lies noch mal in der Beschreibung zu position:absolute in SELFHTML nach, worauf diese Angabe Bezug nimmt.

MfG ChrisB

[Michel1966]

Hi,

am Ende soll es ungefähr so aussehen:
http://www.visual-3d.de/temp/mouse_over_test_1.htm

Mit dem Unterschied, dass die Infobox nicht UNTEN oder OBEN stehen soll, sondern auf der RECHTEN Seite.

P.S.: Der Infotext in der Tabellenzelle wird durch das Bild überdeckt.

Danke

Gruß - Michel

[Michel1966]

Ich glaube so bleibt es erstmal:
http://www.visual-3d.de/temp/mouse_over_test_2.htm

Nicht unbedingt die sauberste Lösung, aber damit kann ich leben.

Falls jemand noch eine Idee (ohne Java Script) hat, wäre ich nicht abgeneigt diese zu erfahren.

Gruß - Michel

[plan_B]

Hallo,

Ich glaube so bleibt es erstmal:
http://www.visual-3d.de/temp/mouse_over_test_2.htm

Nicht unbedingt die sauberste Lösung, aber damit kann ich leben.

dir ist noch nicht klar, dass eine Id (id=box) nur einmal im Dokument vormkommen darf. Statt dessen bietet sich das class-Attribut an.

Gruß plan_B

[Michel1966]

dir ist noch nicht klar, dass eine Id (id=box) nur einmal im Dokument vormkommen darf. Statt dessen bietet sich das class-Attribut an.

Gruß plan_B

Stimmt, das ist mir nicht klar. Warum ? Scheint doch zu funktionieren.
Muss ich jetzt für jede Box eine eigene class anlegen ?

Danke

Gruß - Michel

[plan_B]

Hallo,

dir ist noch nicht klar, dass eine Id (id=box) nur einmal im Dokument vormkommen darf.

Stimmt, das ist mir nicht klar. Warum ? Scheint doch zu funktionieren.

nur von validem Markup kann man erwarten, dass es von allen Browsern richtig dargestellt wird. Hier findet man z.B. etwas zum id-Attribut http://de.selfhtml.org/html/attribute/allgemeine.htm@title=html/attribute/allgemeine.htm, ansonsten darfst du auch gern selbst mal die Suche bemühen.
Auch der Validator dürfte für dich interesant sein, um dein HTML zu checken.

Muss ich jetzt für jede Box eine eigene class anlegen ?

nein, du würdest für alle divs eine Vorschrift definieren. Das ist ja gerade der Unterschied zur id, die nur für 1 Element gilt.
http://de.selfhtml.org/css/formate/zentrale.htm#klassen@title=css/formate/zentrale.htm#klassen

aus <div id="box">...</div>

wird <div class="box">...</div>

und das CSS entsprechend
aus #box{ height:120px; ... }
wird div.box{ height:120px; ... }

aus #box:hover div{ ... }
wird div.box:hover div{ .. }

Gruß plan_B

[Michel1966]

@ plan_B

Vielen Dank für Deine Hilfe und die Aufklärung.
Die Links werde ich mir noch genau anschauen und auch Deine Tipps umsetzen.

Gruß - Michel