Position:Absolute zentrieren

[Markus Speicherl]

Hi

Ich habe ein Dokument in dem ich ein DIV aufgezogen habe und kein Position zugewiesen habe. Ich habe ihm eine breite von 900px gegeben und margin:auto; gesagt.
Dieses Div ist daher zentriert was ich sehr schön finde :)

Jetzt will ich aber ein DIV einbinden was als absolute definiert sein muss (wegen ner JS geschichte) und ich bekomme es nicht hin dass es mittig ist :/

Ich habe versucht das DIV einfach 100% breit zu machen so dass ich dann in diesem wiederum meine 900px zentriert machen kann, doch da tritt der Fehler auf, dass bei einem absoluten DIV mit 100% unten Scrollbars entstehen :/

Wie kann ich das machen?

danke

[Cheatah]

Hi,

Jetzt will ich aber ein DIV einbinden was als absolute definiert sein muss (wegen ner JS geschichte)

die Begründung ist mir unklar. Was soll eine "JS-Geschichte" mit dem Zwang einer absoluten Positionierung zu tun haben?

und ich bekomme es nicht hin dass es mittig ist :/

Du wirst es nicht glauben: JavaScript kann rechnen.

Cheatah

[Markus Speicherl]

die Begründung ist mir unklar. Was soll eine "JS-Geschichte" mit dem Zwang einer absoluten Positionierung zu tun haben?

Der Layer muss Absolute positioniert sein damit er mit dem Bild runterscrollen kann.

Du wirst es nicht glauben: JavaScript kann rechnen.

Womit ich auf Js fixiert bin. Ich möchte aber dass jemand ohne Js nicht die Seite für einen schlechten Witz hält weil der layer dann das design verhunzt.
Ich würde es gerne so haben dass ich den layer mittels CSS zentriert bekomme und er daher auch ohne JS (sich zwar nicht bewegt) aber immerhin  seine Infos immernoch attraktiv anbieten kann.

ciao

[wahsaga]

hi,

die Begründung ist mir unklar. Was soll eine "JS-Geschichte" mit dem Zwang einer absoluten Positionierung zu tun haben?
Der Layer muss Absolute positioniert sein damit er mit dem Bild runterscrollen kann.

Immer noch nicht ganz klar, warum dafür absolute Positionierung erforderlich sein soll - und was du überhaupt damit meinst.

Du wirst es nicht glauben: JavaScript kann rechnen.
Womit ich auf Js fixiert bin. Ich möchte aber dass jemand ohne Js nicht die Seite für einen schlechten Witz hält weil der layer dann das design verhunzt.
Ich würde es gerne so haben dass ich den layer mittels CSS zentriert bekomme und er daher auch ohne JS (sich zwar nicht bewegt) aber immerhin  seine Infos immernoch attraktiv anbieten kann.

Dann binde ihn doch mit CSS zentriert ein, wie bisher.
Wenn JS aktiv ist, dann liest du seine aktuelle Position aus (offsetTop, offsetLeft, ggf. offsetParent), und positionierst ihn an dieser absolute.

gruß,
wahsaga

[Markus Speicherl]

Dann binde ihn doch mit CSS zentriert ein, wie bisher.
Wenn JS aktiv ist, dann liest du seine aktuelle Position aus (offsetTop, offsetLeft, ggf. offsetParent), und positionierst ihn an dieser absolute.

Das klingt im Grunde ok. Aber müsste ich dann nicht noch ein onWindowResize() Funktion einbauen damit sich der layer bei einem ändern der Fenstergrösse wieder erneut zentriert positioniert?

ciao

[Ashura]

Hallo Markus.

Womit ich auf Js fixiert bin. Ich möchte aber dass jemand ohne Js nicht die Seite für einen schlechten Witz hält weil der layer dann das design verhunzt.

Und wie wäre es, wenn du den „Layer“ erst per JS einfügen lässt?
Ausreichende Möglichkeiten hierfür sind die Methoden http://de.selfhtml.org/javascript/objekte/document.htm#create_element@title=createElement und http://de.selfhtml.org/javascript/objekte/node.htm#append_child@title=appendChild. Ein wenig in das Kapitel über das http://de.selfhtml.org/javascript/objekte/node.htm@title=node-Objekt kann auch nicht schaden.

Ich würde es gerne so haben dass ich den layer mittels CSS zentriert bekomme und er daher auch ohne JS (sich zwar nicht bewegt) aber immerhin  seine Infos immernoch attraktiv anbieten kann.

Hat der „Layer“ ohne JS überhaupt einen informativen Charakter oder hängt er nur nutzlos in der Gegend herum?

Einen schönen Freitag noch.

Gruß, Ashura

[Markus Speicherl]

Der Layer ist ein DIV.
Er befindet sich am oberen Rand des Fensters und beinhaltet ein Formfield zum Suchen sowie den Usernamen des Benutzers (auf den man beim klicken zu seinem Profil kommt).

Der DIV-Container sitzt wie gesagt am oberen Rand und scrollt mit nach unten sobald der Benutzer die Seite nach unten scrollt.
Zum Scrollen benutze ich dieses Script:
http://www.dyn-web.com/dhtml/slide/glide-stat.html
(Mit dem unterschied dass mein Container halt zentriert sein soll)

Ich würde es wirklich gerne komplett in CSS machen damit bei einem ändern der Fenstergrösse der Layer sich auch neu ausrichtet. Das geht natürlich auch mit JS, aber wenn kein Js vorhanden wäre würde der Container sich bei einem ändern der fensterbreite doch nicht mitbewegen oder sehe ich das falsch?

mfg

[wahsaga]

hi,

Der DIV-Container sitzt wie gesagt am oberen Rand und scrollt mit nach unten sobald der Benutzer die Seite nach unten scrollt.

Also scrollt er _nicht_ mit (dann würde er nach oben gehen), sondern bleibt stehen.

Zum Scrollen benutze ich dieses Script: [...]

Ich würde es wirklich gerne komplett in CSS machen damit bei einem ändern der Fenstergrösse der Layer sich auch neu ausrichtet.

Was du eigentlich willst, ist also position:fixed, bzw. für den IE ein Workaround dafür.

gruß,
wahsaga

[Markus Speicherl]

Ich will es nicht fixed haben. Ich will das Script dafür benutzen.

[wahsaga]

hi,

Ich will es nicht fixed haben. Ich will das Script dafür benutzen.

Ach so, du willst diesen langsam nachscrollenden Effekt haben.

Ja, dann mach's mit einer Kombination, wie vorgeschlagen.
Element per CSS zentriert einbinden, wenn JS verfügbar, dann absolut dort positionieren.

Ob (und wie) du dann noch auf Fenstergrößenänderungen reagieren willst, bleibt dir überlassen.

gruß,
wahsaga

[Ingo Turski]

Hi,

Jetzt will ich aber ein DIV einbinden was als absolute definiert sein muss (wegen ner JS geschichte) und ich bekomme es nicht hin dass es mittig ist :/

Du kennst position:relative ?
Damit kannst Du das Elternelement als Bezugsrahmen setzen.

freundliche Grüße
Ingo