'fixed' positionierte divs nach Scrolling nicht mehr fix

[Orlando]

Liebe Leute,

ich bastle an einer Seite, die einige mit 'position:fixed' positionierte Elemente enthält, zB die Navigation. Beim Mousover der dort enthaltenen Links soll als zusätzliche Erklärung ein weiteres <div> mit einigen Infos unter der Navigation sichtbar werden. So weit klappt alles wie gewünscht.

Das Problem ist, dass beim Scrollen der Seite in Opera der erscheinende Infotext ebenfalls nach oben (über die Navi) wandert. Das ist mir etwas suspekt, denn ich habe ihn ja ebenfalls als 'fixed' deklariert. Mozilla macht es korrekt.

Gibt es für dieses Problem eine saubere CSS-Lösung oder einen akzeptablen Javascript-Workaround?

Danke & LG
Orlando

[Sönke]

Hallo Orlando!

Da ich vor zwei, drei Tagen erst etwas ganz ähnliches gemacht habe
kann ich Dir sagen: Eigentlich sollte das möglich sein.
Hast Du nicht mal eine URL oder ein Stückchen Quellcode zum ansehen?
So aus den Bauch heraus weis ich nämlich was da schief laufen könnte.
Vielleicht mal dem DIV ein eigenen z-Index verpassen?

Gruß,
Sönke

[Orlando]

Hi, Sönke

Da ich vor zwei, drei Tagen erst etwas ganz ähnliches gemacht habe
kann ich Dir sagen: Eigentlich sollte das möglich sein.

Mozilla kapiert es ja, aber mein Operetten-Browser nicht.

Hast Du nicht mal eine URL oder ein Stückchen Quellcode zum ansehen?

Ja gerne doch ;-)

http://www.skop.net/self/orlandau/
http://www.skop.net/self/orlandau/style.css

So aus den Bauch heraus weis ich nämlich was da schief laufen könnte.

Oh, deinen Bauch hätt' ich gerne [1]

Vielleicht mal dem DIV ein eigenen z-Index verpassen?

Das habe ich (s. div#geschichte), nützt leider nichts. Eventuell liegt es daran, dass die eingeblendeten DIVs per Javascript eingefügt werden, habe ich aber noch nicht getestet.

Danke & LG
Orlando

[1] Auf die Gefahr hin, eine nennenswerte Summe, die ich in meinen investiert habe, zu verlieren :)

[Sönke]

Hallo nochmals!

Ha, genau wie ich es mir gedacht hatte. Die Lösung für Dein
Opera-Problem ist nahe. War doch genau das gleiche wie bei mir.

Füge einfach dies in Dein Javascript ein:

function Show(ID) {
    if (window.opera) {
      savedY = window.pageYOffset;
      window.pageYOffset = 0;
    }
    ....
  }

sowie:

function Hide(ID) {
    if (window.opera) {
      window.pageYOffset = savedY;
    }
    ....
  }

Dann geht es! Versprochen. :) OK, logisch ist das net...
Schöne Seite übrigens. Nur das Grün ist nicht so ganz mein Fall.

Viele Grüße,
Sönke

[Orlando]

Hi, Sönke

Dann geht es! Versprochen. :) OK, logisch ist das net...

Einen ganz dicken Dankesgruß! Also darauf wäre ich wirklich nicht gekommen. Die Positionierung ist damit gerettet ;-D Was brauche ich für den IE? *bg*

Es dürfte sich aber um einen gröberen Bug handeln, denn wenn ich jetzt herunterscrolle, werden sogar die Links beim 'hovern' zerhächselt. Ich befürchte zwar, es liegt nicht am Stylesheet, sondern an Opera, doch da werde ich mich dahinterklemmen, bis das Gegenteil feststeht.

Schöne Seite übrigens. Nur das Grün ist nicht so ganz mein Fall.

Danke auch dafür, grün wird übrigens demnächst gegen hellblau ausgetauscht.

LG Orlando
nein, den 'Handkuß' erpare ich dir ;-D

[Sönke]

Moin, moin!

Die Positionierung ist damit gerettet ;-D Was brauche ich für den IE? *bg*

Ach herjeh, immer diese Anfängerfragen. :)

Also 1. schreibst Du für IE  ein eigenes CSS mit ungefähr folgenden
Inhalt:

body {
    overflow:hidden;
    margin:0px;
  }

#logo {
    margin:5px 0px 0px 5px;
  }

#navi {
    position:absolute;
  }

#thema  {
    display:none;
  }

#content {
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
    height:100%;
    width:100%;
    padding-left:280px;
    padding-right:30px;
    overflow:auto;
  }

div#geschichte,
  div#news,
  div#produkte,
  div#horizi,
  div#sys1927,
  div#sys2525 {
    position:absolute;
  }

2. bindest Du dieses dann hinter(!) Deine normale CSS-Datei ein. Meine zur Zeit bevorzugte Methode:

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie.css" />
  <![endif]-->

3. Für Dein Opera Problem mußt Du wahrscheinlich nur das Script von
gestern ein wenig anpassen. Mache aus denn beiden Schnipseln aus den Show() und Hide() Funktionen einfach zwei neue Funktionen welche Du dann in den 'leeren' Links mit onmouseover / onmouseout aufrufst. Dann sollte das eigentlich Käse sein.

Bleibt nur noch das Miniproblem das, wenn jemand seine Maus
über einen der Links im Menü stehen hat und dabei dann gleichzeitig
z.B. mit den Mausrad Scrollt... >:(
Einfach mal ausprobieren danach Text zu selektieren, etc. Das ist mir aber jetzt zu doof. Muß an meinen eigenen Sachen noch etwas arbeiten.

nein, den 'Handkuß' erpare ich dir ;-D

Och, dabei hatte ich sie gerade frisch gewaschen. :)

Gruß,
Sönke

[Calocybe]

Moin moin!

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie.css" />
  <![endif]-->

Ja hey, was ist denn das? Versteht der IE diese Pseudotags tatsaechlich? Ist das irgendwo dokumentiert? Waere naemlich genau das, was ich gerade brauche, um den IE vom Laden meiner CSS-Datei abzuhalten.

So long

[Sönke]

Hi Calocybe,

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie.css" />
  <![endif]-->

Ja hey, was ist denn das? Versteht der IE diese Pseudotags tatsaechlich? Ist das irgendwo dokumentiert? Waere naemlich genau das, was ich gerade brauche, um den IE vom Laden meiner CSS-Datei abzuhalten.

Ob das irgendwo bei M$ dokumentiert ist, weiß ich nicht. Die Seiten tue ich mir nur äußerst ungern an. Gefunden hatte ich das mal bei http://www.drweb.de/html/conditional_comments.shtml. Zumindestens mein IE 5.5 unter Win versteht das. Ob das Für IE 6 oder MAC Systeme auch gilt? Keine Ahnung. Habe ich hier nicht zum ausprobieren.

Viele Grüße,
Sönke

[Calocybe]

ReHi!

Ob das irgendwo bei M$ dokumentiert ist, weiß ich nicht. Die Seiten tue ich mir nur äußerst ungern an. Gefunden hatte ich das mal bei http://www.drweb.de/html/conditional_comments.shtml.

Na wow, dass mir Sven Lennartz jemals weiterhelfen wuerde, das war ja das letzte, was ich erwartet habe. Allerdings weiss ich noch nicht, wie ich den IE von etwas *ausschliessen* kann. Mit

<!--[if ! IE]>
    <link rel="stylesheet" type="text/css" href="ie.css" />
  <![endif]-->

klappt das nicht, denn fuer andere Browser ist das einfach ein Kommentar, und so laden sie den Style auch nicht. Tja, und das auf den M$-Seiten herauszufinden... haha, also *versucht* hab ich's ...

Zumindestens mein IE 5.5 unter Win versteht das. Ob das Für IE 6 oder MAC Systeme auch gilt? Keine Ahnung. Habe ich hier nicht zum ausprobieren.

In meinem Fall waere es nur eine zusaetzliche Massnahme, damit mehr IEs als sowieso schon nicht mein CSS laden (sie verstehen es ja doch nicht ;-) ).

So long

[Orlando]

Hi, Sönke

Die Positionierung ist damit gerettet ;-D Was brauche ich für den IE? *bg*

Ach herjeh, immer diese Anfängerfragen. :)

Das war auf position:fixed bezogen und daher ironisch gemeint. Tut mir leid, dass ich nicht dick genug aufgetragen habe :(

3. Für Dein Opera Problem mußt Du wahrscheinlich nur das Script von
   gestern ein wenig anpassen. Mache aus denn beiden Schnipseln aus den Show() und Hide() Funktionen einfach zwei neue Funktionen welche Du dann in den 'leeren' Links mit onmouseover / onmouseout aufrufst. Dann sollte das eigentlich Käse sein.

Ich habe schon einiges probiert, aber es kommt immer wieder zu unterschiedlichen Fehlern. Letztendlich ist es Overkill, bei jedweder Gelegenheit den Offset neu zu setzen/auszulesen. So wichtig ist der Effekt nicht. Dafür gibt's ja title="tooltip" :)

Bleibt nur noch das Miniproblem das, wenn jemand seine Maus
über einen der Links im Menü stehen hat und dabei dann gleichzeitig
z.B. mit den Mausrad Scrollt... >:(

Kann ich das mit Javascript unterbinden? <- ;-)

Dein Hinweis hat mir jedenfalls sehr geholfen. Danke nochmals!

LG Orlando