div position: fiexed;

[hansho]

Hallo

Ich habe auf einer Seite ein DIV mit Start Tag:

<div style="[B]position: fixed;[/B] left:1px; top:282px; width:161px; _width:163px; height:303px; _height:305px; z-index:8;">

Das DIV (mit Navigation) ist dadurch beim Hinunterscrollen immer links zu sehen

Die Seite ist für screen solution: 1024x768 optimal ausgerichtet.

Wenn nun ein breiter Bildschirm verwendet wird mit feinerer Auflösung, dann wandert das DIV mit Inahlt ganz an den linken Rand - weg vom Rest der Seite, welcher mit 1000px Breite zentral liegt.



Die Seitenbreite beträgt also 1000px. (geht sich bei 1024px Breite und Scrollbereich genau aus)


Ich würde nun gern:

left: (screenbreite_in_pixel - 1024)/2px; in 'style' eingeben, damit das DIV genau so liegt wie bei 1024 screen Breite...egal welche Pixelbreite der Bildschirm hat.


Geht das, und wie codiere ich die screenbreite_in_pixel für den Browser?


Ich hab das nochmal probiert, aber offenbar kann man für 'left: ' keine mathematische Operation einfügen, sondern nur einen festen Zahlenwert für px.

Gibt es dennoch eine Möglichkeit, dass mein DIV (mit position: fixed) bei Bildschirmbreite grösser als 1024px nicht nach links wandert - in Relation zu anderen Seitenelementen?

herzlichen Dank
Hans

 

[anna55]

Schau mal hier, Beispiel 3
http://www.thestyleworks.de/tut-art/iewinfixed.shtml

 

[hansho]

Schau mal hier, Beispiel 3
http://www.thestyleworks.de/tut-art/iewinfixed.shtml

Danke Anna

Da werd ich wohl etwas tüfteln müssen - wie ich sehe, ist mein Problem prinzipiell wohl lösbar - aber ich kann momentan kein JavaScript..

..kommt demnächst mal dran



Danke jedenfalls für den sehr interessanten link (und Hinweis auf die HP!)

Mein Problem ist ja nicht so akut - hat mich auch prinzipiell interessiert - die Frage

Für Bildschirmbreite bis ca 1200 pixel sieht die fixierte DIV ja noch akzeptabel aus, selbst, wenn sie etwas nach links verschoben ist...


Etwas würde mich aber noch interessieren:


Ich hatte auf der Seite einen kleinen Dia Animator, einen Lauftext und ein paar GIF-Animationen, sowie AudioPlugIn--


Immer, wenn ich 'div - porition: fixed;' einstellte, haben diese dynamischen Elemente extrem zu stottern angefangen..bein IE8

beim Firefox läuft alles bestens.


Ich hab dann diese Elemente eines nach dem anderen herausgenommen (ausser den Dia Animator, den ich zum Testen abwechselnd mit dem Lauftext drinnen gelassen habe) - die Seite praktisch neu aufgebaut - trotzdem stottert der Animator/Lauftext - und selbst die Navigation (mouse-over Effekt)


Kommt der IE8 mit 'DIV position: fixed' nicht zurecht?


Ich hab die style Anweisung inline und alternativ in eine externe css-Datei geschrieben, dennoch immer das selbst Probelm mit dem IE


Ich hab jetzt eine Minimalversion - das reicht schon - aber es würde mich interessieren, warum nur eine einzige Änderung auf postion fixed in einem DIV die ganze Seite zum Stottern bringt..


herzlichen Dank nochmals
Hans

 

[Junkee[]]

Immer, wenn ich div - porition: fixed; einstellte, haben diese dynamischen Elemente extrem zu stottern angefangen -

Das liegt höchstswahrscheinlich am Browser bzw. am Computer des Clients.

 

[hansho]

Das liegt höchstswahrscheinlich am Browser bzw. am Computer des Clients.

Danke

Das Problem seh ich ja auf meinem Rechner - und nur, wenn ich wie gesagt DIV position fixed auf einer Seite einstelle...

Ich hab sonst kein Problem mit dem Internet Explorer 8

Un mein Rechner ist fast neu: Quad Core, 2GB RAM...
Also kanns nicht an der Rechenleistung liegen


schönen Gruss
Hans

 

[anna55]

Da werd ich wohl etwas tüfteln müssen - wie ich sehe, ist mein Problem prinzipiell wohl lösbar - aber ich kann momentan kein JavaScript..

Es gibt auch Möglichkeiten ohne JavaScript:
http://www.cssplay.co.uk/layouts/fixed.html#bites

Wenn du mal nen Link hast, fällt uns vielleicht auf, warum die Seite 'stottert'.

 

[hansho]

Es gibt auch Möglichkeiten ohne JavaScript:
http://www.cssplay.co.uk/layouts/fixed.html#bites

Wenn du mal nen Link hast, fällt uns vielleicht auf, warum die Seite 'stottert'.

Danke Anna

1. Die feststehende Navigation mit CSS ist nett (kann ich sicherlich mal verwenden)



Ich denke ich hab das Wesentliche auch verstanden (versteh nur basics von CSS):

Die fixe Navigation steht in konstanter Relation zum Textbereich (unabhängig von der screen solution) - da der Autor für div - position:fixed - left:170px; festlegt.

..und für margin-left des Textbereichs (id="page") 250px . Die Seite also links ausgerichtet ist...

Das geht bei mir áuch - aber ich möchte die Seite zentriert (bei grosser Auflösung ist dann li und re ein gleicher Abstand - sieht besser aus, finde ich)

Die Navitgation (position:fixed) richtet sich aber - ( bei mir momentan left: 1; für 1024px screen Breite) - nach dem li screen Rand..und dann wandern Seite und Navigation bei zunehmender Auflösung auseinander.


2. Bitte um Nachsicht. Ich bin Amateur - arbeite mit WYSIWYG Editor - was unter Profis hier wahrscheinlich verpönt ist - und füge nur hier und da mal ein bisschen CSS HTML JavaScript ein - ausserdem möcht ich doch die Grundprinzipien dieser Sprachen verstehen...


Ich hab meine Seite durch den Validator laufen lassen - ist nicht ganz W3C konform...läuft aber sonst sehr gut unter IE und Firefox



Die meisten Fehlermeldungen (eine ganze Menge) - beziehen sich aber auf die Amazon links (welche ich von Amazon habe) - diese funktioneren jedoch (IE und Firefox) - und das ist ja der Zweck dieser Seite - nach den LIteraturtipps.

Ich hab auch versuchsweise die Tabelle mit allen links herausgenommen - dennoch ruckelt der Dia-Animator, wenn ich nur 'position: fixed' eingebe (unter IE8) - bei Firefox - wie erwähnt - läuft alles bestens.


http://www.avataara.net/literatur_studium.html

Herzlcihen Dank für die Hilfe
Hans