Div immer in Mitte positionieren - auch wenn gescrollt wurde

[kapsl]

Hi
Ich stehe vor einem echten Problem: Ich hab ein Programm geschrieben, dass mittels Ajax funktioniert. D.h. man klickt in einer Tabelle auf eine Zelle, dann springt ein Div mit einem Inputfield auf - und diese Zelle kann dann bearbeitet werden. Soweit so gut.

Mein Problem: Wie bekommen ich es hin, dass das aufgehende Div immer egal wo der user gerade hingescrollt hat - ganz oben in der tabelle oder ganz unten - das div mittig im Browser fenster aufgeht?

Hab jetzt schon lange gesucht und noch keine Lösung gefunden. Das ist echt verzwickt.

Jemand eine Idee?

[bleicher]

Grüße,
absolute positionierung?
MFG
bleicher

[kapsl]

Naja das mit dem top: 50% bin ich auch draufgekommen. Aber dann wird es ja nicht im Browserfenster mittig sondern auf der Webseite mittig angezeigt - was mir dann auch nicht weiterhilft...

[bleicher]

Grüße,

Naja das mit dem top: 50% bin ich auch draufgekommen. Aber dann wird es ja nicht im Browserfenster mittig sondern auf der Webseite mittig angezeigt - was mir dann auch nicht weiterhilft...

ich bin nciht gerade für meine html/css-eleganz bekannt, aber wenn mans hardcore machen wollenwürde - ganz ohne JS zB,
dann würde cih den gesamten webseiteninhalt in ein an fenstergröße angepasstes div packen, und es in ihm mittig positionieren,

dass der user das fenster resizen kann wärend dein popup da ist würde cih zudem nciht berücksichtigen - ist nett aber imho nicht wichitg.
MFG
bleicher

[Kapsl]

Also danke für alle Antworten, werd mal schaun, ob was funktioniert.

Meld mich dann wieder.

[Chris]

Hi,
stand letztens vor nem ähnlichen Problem. Das leidige Problem: wie positioniert man DIVs im Browser absolut mittig?

Mein Problem hat ne gaaaaanz einfache Lösung.
Einfach das folgende CSS zur DIV:

#div {
   position:absolute;
   height: 300px;
   width: 300px;
   top: 50%
   left: 50%
   margin-top: -150px;
   margin-left: -150px;
}

Mit dem CSS wird das DIV beim Seitenaufbau mittig positioniert, verschiebt sich aber natürlich auch beim Scrollen.

Ich weiß, dass es für die Eigenschaft "position" auch einen Wert "fixed" gibt. Hab selber noch nich mit dem Wert gearbeitet, habe aber gehört, dass dieser bewirkt, dass das DIV immer am gleichen Fleck bleibt, egal, wie oft der User scrollt.

Vielleich hilft dir das weiter.. :)

MfG
Chris

[Don P]

Hallo,

Mein Problem: Wie bekommen ich es hin, dass das aufgehende Div immer egal wo der user gerade hingescrollt hat - ganz oben in der tabelle oder ganz unten - das div mittig im Browser fenster aufgeht?

Ich würde das Div es von Anfang an erstellen und jeweils mit über style.visible anzeigen/verstecken. Dazu müsste es statisch sein (position: fixed;), und margin-top müsste abhängig von der Größe des Viewports gesetzt werden.

Horizontal zentieren kann man es einfach mit
margin-left: auto;
margin-right: auto;

Allerdings bräuchtest du auch noch eine Funktion, die das Ändern der Fenstergröße überwacht und entsprechend reagiert. Alles in Allem sicher nicht gerade einfach.

Gruß, Don P

[Detlef G.]

Hallo kapsl

… man klickt in einer Tabelle auf eine Zelle, dann springt ein Div mit einem Inputfield auf - und diese Zelle kann dann bearbeitet werden. Soweit so gut.

Ich fände es wohl angenehmer, wenn mir kein Div entgegenspränge, sondern die Tabellenzelle selbst bearbeitbar würde. (Inputfield direkt in der betreffenden Zelle)

Mein Problem: Wie bekommen ich es hin, dass das aufgehende Div immer egal wo der user gerade hingescrollt hat - ganz oben in der tabelle oder ganz unten - das div mittig im Browser fenster aufgeht?

Du verwendest doch sowieso Javascript.
In dem Beispiel Änderungen der Fenstergröße überwachen findest du die Funktion Fensterhoehe(), damit kannst du leicht die Fensterhöhe bestimmen. Mit pageYOffset und document.body.scrollTop (dort unter „Beachten Sie”) kannst du feststellen, wie weit gescrollt wurde.
Damit und der Größe des Divs kannst du dann leicht berechnen, wo du es einblenden willst.

Auf Wiederlesen
Detlef

[Andreas D]

Mein Problem: Wie bekommen ich es hin, dass das aufgehende Div immer egal wo der user gerade hingescrollt hat - ganz oben in der tabelle oder ganz unten - das div mittig im Browser fenster aufgeht?

würde folgendes CSS vorschlagen:

  
#popup {  
 position: fixed;  
 top: 50%;  
 left: 50%;  
 height: 200px;  
 width: 200px;  
 margin-left: -100px; /*muss die Hälfte der Höhe sein (damit mittig)*/  
 margin-top: -100px;/*muss die Hälfte der Beite sein (damit mittig)*/  
 z-index: 100;  
}  
* html #popup { /* ie6 hack */  
position: absolute;  
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');  
}  

Muss nicht 100% fehlerfrei sein. Hab ich einfach nur wo rauskopiert wo ich es schon mal für so was in der Art verwendet habe. Musst es halt ggf. anpassen.

Ein so positioniertes Div mit der ID popup ist auf jeden Fall immer mittig im Fenster. Selbst wenn während es sichtbar ist gescrollt wird oder die Fenstergröße verändert wird. Sogar im IE 6 und 5.5.

Gruß
Andreas