float kollidiert mit position absolute (nur <=IE7)

[aloescher]

Hallo!

Habe eine Site gebaut, die komplett W3C-konform ist. Darin enthalten ist ein Inhaltsbereich mit drei Elementen: Ein Textfeld (div) mit fester Größe und overflow:auto (linksseitig) und rechts zwei weitere Felder, danach ein clear:both. Nun möchte ich einfach mit position:absolute ein weiteres div (Position im Code vor den drei anderen Elementen) über all diesen drei Elementen platzieren. Safari, FF, IE8 zeigen alle das Feld über den drei anderen Elementen. Nur im IE7 scheint die Scrollbar eine Grenze für das position:absolute darzustellen und somit liegt es so, dass es erst in der Mitte startet und über den beiden rechten divs schwebt. Hat jemand eine Idee?
P.S. Die absolute Ebene sind die zwei kleinen Pfeile zum navigieren.

Bye

André

[ChrisB]

Hi,

Safari, FF, IE8 zeigen alle das Feld über den drei anderen Elementen.

FYI: Im FF 3.0.4/Vista ist der Scrollbalken des mittleren Bereiches bei mir übrigens unbedienbar.

MfG ChrisB

[aloescher]

Hallo ChrisB,

Hi,

Safari, FF, IE8 zeigen alle das Feld über den drei anderen Elementen.

FYI: Im FF 3.0.4/Vista ist der Scrollbalken des mittleren Bereiches bei mir übrigens unbedienbar.

Da hatte ich mich so auf die Pfeile konzentriert - das lag am padding. Habe es jetzt mit top gelöst und sollte funktionieren.

MfG ChrisB

Thanks

André

[Detlef G.]

Hallo André

Da hatte ich mich so auf die Pfeile konzentriert - das lag am padding. Habe es jetzt mit top gelöst und sollte funktionieren.

Damit ist das Problem vermindert aber nicht gelöst.
Du hast den Bereich, in dem der Scrollbalken nicht funktioniert zwar drastisch verkleinert, es gibt ihn aber noch.

Auf Wiederlesen
Detlef

[Detlef G.]

Hallo André

… Nun möchte ich einfach mit position:absolute ein weiteres div (Position im Code vor den drei anderen Elementen) über all diesen drei Elementen platzieren.
P.S. Die absolute Ebene sind die zwei kleinen Pfeile zum navigieren.

Wozu extra eine absolut positionierte Ebene mit Pfeilen?
Positioniere doch einfach die Pfeile selbst genau dorthin, wo du sie haben willst.

Noch ein Nachtrag:
Bei mir ist die Seite zu hoch fürs Browserfenster (1024x768). (Ich hasse mehrfache Scrollbalken.)

Auf Wiederlesen
Detlef

[aloescher]

Hallo Detlef!

Hallo André

… Nun möchte ich einfach mit position:absolute ein weiteres div (Position im Code vor den drei anderen Elementen) über all diesen drei Elementen platzieren.
P.S. Die absolute Ebene sind die zwei kleinen Pfeile zum navigieren.

Wozu extra eine absolut positionierte Ebene mit Pfeilen?
Positioniere doch einfach die Pfeile selbst genau dorthin, wo du sie haben willst.

Ich möchte, dass die Pfeile genau die gleiche Position haben wie auf den Seiten davor/danach. Und dazu müssen die Pfeile über dem Textfeld, welches man ja scrollen kann, liegen. Ansonsten würden sie ja mitwandern.

Noch ein Nachtrag:
Bei mir ist die Seite zu hoch fürs Browserfenster (1024x768). (Ich hasse mehrfache Scrollbalken.)

Auf Wiederlesen
Detlef

Bye

André

[Detlef G.]

Hallo André

Positioniere doch einfach die Pfeile selbst genau dorthin, wo du sie haben willst.

Ich möchte, dass die Pfeile genau die gleiche Position haben wie auf den Seiten davor/danach. Und dazu müssen die Pfeile über dem Textfeld, welches man ja scrollen kann, liegen. Ansonsten würden sie ja mitwandern.

Hast du nur meinen ersten Satz gelesen?
Du musst nicht extra ein Div-Element quer über die Seite positionieren, um zwei kleine Pfeile zu haben. Du kannst auch die Pfeile selbst absolut positionieren.

Auf Wiederlesen
Detlef

[aloescher]

Hallo Detlef!

Habe es einmal nach Deiner Version versucht und den Pfeil einzeln absolut positioniert. Abgesehen davon, dass sich an dem Problem nichts ändert, da der Pfeil leider nicht wie im IE8 an der linken Seite des Textes positioniert wird, sondern rechts von der Scroll-Leiste, taucht dann ein weiteres Problem auf. Ich bekomme jetzt den zweiten Pfeil nicht auf die rechte Seite.

Bye

André

Hallo André

Positioniere doch einfach die Pfeile selbst genau dorthin, wo du sie haben willst.

Ich möchte, dass die Pfeile genau die gleiche Position haben wie auf den Seiten davor/danach. Und dazu müssen die Pfeile über dem Textfeld, welches man ja scrollen kann, liegen. Ansonsten würden sie ja mitwandern.

Hast du nur meinen ersten Satz gelesen?
Du musst nicht extra ein Div-Element quer über die Seite positionieren, um zwei kleine Pfeile zu haben. Du kannst auch die Pfeile selbst absolut positionieren.

Auf Wiederlesen
Detlef

[Detlef G.]

Hallo André

Habe es einmal nach Deiner Version versucht und den Pfeil einzeln absolut positioniert. Abgesehen davon, dass sich an dem Problem nichts ändert, da der Pfeil leider nicht wie im IE8 an der linken Seite des Textes positioniert wird, sondern rechts von der Scroll-Leiste, taucht dann ein weiteres Problem auf. Ich bekomme jetzt den zweiten Pfeil nicht auf die rechte Seite.

Meinst du dies:

#pageNavigationText {  
	top: 481px;  
	width: 12px;  
	position:absolute;  
}  
  
#pageNavigationLeft {  
	top: 481px;  
	width: 12px;  
	position:absolute;  
	z-index:100;  
}  
  
#pageNavigationRight {  
	top: 481px;  
	width: 12px;  
	position:absolute;  
}  
  
#alignLeft {  
	margin-right: 770px;  
}  

Und dazu das HTML:
~~~html <div id="pageNavigationText"><span id="alignLeft">
<a href="bibliotheken15_de.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('prevPage','','../images/pageArrowLeft_White_over.jpg',1)"><img src="../images/pageArrowLeft_White_up.jpg" width="12" height="13" alt="Zur vorherigen Seite" name="prevPage" /></a>
</span>
<a href="bibliotheken17_de.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nextPage','','../images/pageArrowRight_White_over.jpg',1)"><img src="../images/pageArrowRight_White_up.jpg" width="12" height="13" name="nextPage" /></a>
<!-- pageNavigationText --></div>

  
Ich finde darin weder #pageNavigationLeft noch #pageNavigationRight, da können deine Regeln auch nicht wirken.  
  
Du könntest z.B. Folgendes machen:  
Gib #columnMainContent ein position:relative, damit sich die folgenden absoluten Positionierungen darauf beziehen.  
Dann ersetzt du den obigen CSS-Teil, also von #pageNavigationText { bis margin-right: 770px; } komplett durch:  
  
~~~css
#pageNavigationText a {  
	top: 371px;  
	width: 12px;  
	position:absolute;  
        right:0;  
}  
#alignLeft a{  
	position:absolute;  
        left:0;  
}  

Besser wäre allerdings, du räumst HTML und CSS komplett vernünftig auf. Irgendwie sieht das alles sehr unübersichtlich aus, als ob dort noch viele auch gescheiterte Versuche drinstecken.

So ist #pageNavigationText vollständig unnötig, wie auch span#alignLeft. Stattdessen einfach nur die Links mit der jeweiligen Grafik:

<a id="pageNavigationPrev" href="bibliotheken15_de.php"><img src="../images/pageArrowLeft_White_up.jpg" width="12" height="13" alt="Zur vorherigen Seite" name="prevPage" /></a>  
<a id="pageNavigationNext" href="bibliotheken17_de.php"><img src="../images/pageArrowRight_White_up.jpg" width="12" height="13" name="nextPage" /></a>  

Und im CSS dürfte dann das reichen:

#pageNavigationPrev, pageNavigationNext {  
	position:absolute;  
	top: 371px;  
        left:0;  
}  
[code lang=css]#pageNavigationNext {  
        right:0;  
}  

Übrigens lassen sich Hovereffekte auch ohne Javascript nur mit CSS und ohne MM_-Funktionen realisieren

Auf Wiederlesen
Detlef