CSS positionierungsproblem

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/css_positionierungsproblem_119050/page_1 - zur Vollversion wechseln!

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

Du positioniertst ihn absolut. Nur funktioniert das mit CSS alleine nicht mehr, dazu brauchst auch Javascript (da du ziemlich sicher die absolute positionierung entsprechend ausrichten moechtest). Das sind eben die typischen Menus.

Erst kuerzlich hats auf ALA einen Artikel gegeben , HTH -> http://www.alistapart.com/articles/horizdropdowns/

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

Aber alles was nicht position: absolute oder position: fixed ist, ist im "flow", d.h. es wird die den inhalt des dokumentes veraendern und die nachfolgendes elemente im dokument verschieben. Vielleicht hab ichs nur falsch verstannden, dachte du willst dieses verschieben, das Springen der Seite, verhindern.

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?

ja genau.
der text wird ja eingeblendet, aber er verschiebt alles. das verschieben will ich ja verhindern.
(der text soll in der "info box" erscheinen")

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;
}

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';
  }
}

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>

dummerweise kann ich kein js

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

hehe jo, wär super

danke dir

ein freund meinte, die site mit tables aufbauen wäre altmodisch. man könne alles mit css positionieren und aufabauen, gibts dazu wo gute tutorials?

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

gehts voran?

Zitat von nfin1te

gehts voran?

w00t danke.

overclockers.at v4.thecommunity
© all rights reserved by overclockers.at 2000-2026