CSS positionierungsproblem

http://retroms.he4d.net/nfi_homepage/

ich hab als hover einen text der mittel css & span tag in der info box erscheint (funkt im IE imho nicht).

da ich es aber relativ positioniere (klar), schiesst es mir jedes mal das tablelayout.

was müsst ich machen damit das layout erhalten bleibt, der text jedoch an seiner position erscheint (bei jeder auflösung an dergleichen stelle klarerweise)


TIA

nein ich muss ihn relativ positionieren, da er sonst je nach auflösung woanders erscheint! ausserdem solls ja kein drop down menü werden

Hmm, ich glaube ich sehe jetzt erst was du willst. Ich hab mich da von dem komischen Springen beeinflussen lassen. Du willst bei einem hover ueber einem Menu-Element unten einfach nur einen anderen Text einblenden?

Das verschieben kannst du mit position: relative nicht verhindern, weil das Element nicht aus dem document flow genommen wird. Der urspruenglich verbrauchte Platz wird nicht hergegeben.

Sieh auch http://www.w3.org/TR/CSS21/visuren.html#x28:

"Offsetting a box (B1) in this way has no effect on the box (B2) that follows: B2 is given a position as if B1 were not offset and B2 is not re-positioned after B1's offset is applied. This implies that relative positioning may cause boxes to overlap.

A relatively positioned box keeps its normal flow size, including line breaks and the space originally reserved for it. The section on containing blocks explains when a relatively positioned box establishes a new containing block."

Ich glaube fast es ist besser das mit JS zu machen; DIVs auf "display: none" setzen und bei entsprechendem Link-Hover auf display: block setzen.

CSS:

Code:

#nav a {
  display: block;
}
#bloecke div {
  display: none;
}

JS

Code:

var nav = document.getElementById('nav');
var bloecke = document.getelementById('bloecke');
var divs = bloecke.getElementsByTagName('div');
var links = nav.getElementsByTagName('a');
var i;
for (i = 0; i < links.length; i++) {
  links[i]._block = divs[i];
  links[i].onmouseover = function() {
    this._block.style.display = 'block';
  }
  links[i].onmouseout = function() {
    this._block.style.display = 'none';
  }
}

HTML

Code:

<div id="nav">
  <a href="">Link 1</a>
  <a href="">Link 2</a>
  <a href="">Link 3</a>
</div>
<div id="bloecke">
  <div>link 1 text</div>
  <div>link 2 text</div>
  <div>link 3 text</div>
</div>

Das ist jetzt nur Pseudogescribbel, aber so wuerd ichs machen.

Helf dir gerne Soll ich das index file von deiner Seite nehmen und einbauen?

Hmm, jo, verwende mal die Forumsuche bitte, das wurde schon oefters gefragt und Und google nach "css layout tutorial" bringt auch einiges, z.b. glish.com . Da hast dann eh einiges zu lesen und lernen

Zitat von nfin1te

gehts voran?

Hey, es gibt auch noch RealLife ;-)

File ist anbei. Wichtig ist, dass die Reihenfolge der Links in #navigation und die Reihenfolge der DIVs in #navigation-infoboxen die selbe ist; auf diesem Prinzip funktioniert die automatische Links <-> Infobox-Findung.
Happy hacking.