Hallo,

Ich habe in CSS einen Stil geschrieben, der eine div box immer in die Bilschrim-Mitte positioniert.
Diese Box benutze ich für meinen gesammten Inhalt meiner Seite, also
verschachtelt ich andere divs in diesen container.
Funktioniert alles wunderbar bis eine Seite länger ist als die üblichen anderen.
Sprich die meisten Seiten sind 600 px in der Höhe bis ein paar andere die ein wenig länger sind.
Das Problem ist nun das mein Container sich nun in der vertikalen bei den längeren Seiten verschiebt, also alles ein wenig nach links verschoben ist im Vergleich mit den kürzeren Seiten. Wie kann das angehen? Denn die Breite ist bei allen Seiten die gleiche. Hier mein CSS für die container box:

#mainkastenindex {
width: 990;
height: 600px;
text-align: left;
position: absolute;
top: 50%;
margin-top: -300px; /* 600px = 600px/2 */
left: 50%;
margin-left: -495px; /* 990px = 990px/2 */
margin-right: auto;
margin-bottom: 20px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

Kann mir jemand helfen? " mainkastenindex " soll immer in der vertikalen mittig sein.

Bin der Sache auf der Spur, es verschiebt sich alles weil bei den längeren Seiten der Scrollbalken vom Browser dazukommt.

Wie vermutet tritt dieser "Fehler" nicht unter Windows auf, da der Explorer immer einen Scrollbalken rechts anzeigt.
Wie könnte ich dies nur ausgleichen? Ich dachte schon an einen zweiten
div mit neuer CSS Regel für längere Seiten, aber die Breite muss ja nun mal mit 50% berechnet werden

Gibt es da eine Lösung?

Probier es einfach mal mit einem Layer.

Kannst du dier hier ansehen: www.euz.at

<div id="Layer1" style="position:absolute; width:920px; height:640px; margin-top:-305px; margin-left:-460px; top: 50%; left:50%; z-index:1">

Dein HTML - Code

</div>

Logik ist einfach die Hälft von width und height bei den margins.
Bei mir ist es hat etwas nach oben versetzt.

Wenn du den Scrollbalken immer eingeblendet haben möchtest, kannst du das auch um einiges einfacher lösen.

css code:

body {
height: 101%;
}

Dadurch wird der Scrollbalken dann einfach immer angezeigt.

hier gibt es gut funktionierende Vorlagen:

Guten Morgen,

Ich danke euch allen für eure hilfreichen Tips! Werde mich gleich mal mit experimentieren

@ Andreas Ender
Ist wie mein CSS, rutscht leider.

@ Timm
bei mir kommt trotzdem kein Balken

@ BlackSeb@work 133
Sehr guter Link, danke Aber gleiches Problem mit diesen Codes

Ich denke inzwischen auch das man mit dem "Springen" leben kann, die Kunden haben eh alle (altes) Windoof

Sorry, so sollte es gehen:

html,body {
height:100.01%;
}

als Erstes:
um ein Element zu zentrieren machst Du Folgendes:
margin:auto;
mehr brauchst Du nicht

als Zweites:
Du müßtest einen hohen Aufwand betreiben, der die Mühe nicht wert ist um den Scrollbalken zu berücksichtigen. Was ist so schlimm daran, wenn sich eine lange Seite um ein paar Pixel nach links verschiebt? Dafür ist der CSS Code sauber und ohne irgendwelche Tricks.

willst Du es trotzdem probieren, so könntest Du folgende Wege gehen:
1. ein unsichtbares Element einbauen, dass dafür sorgt, dass der Scrollbalken immer da ist <- eigentlich Blödsinn
2. über Javascript abfragen ob das Scrollen notwendig ist oder nicht und so immer um ein paar Pixel verschieben. Dazu mußt Du aber genau wissen wie breit der Scrollbalken ist <- genauso ein Blödsinn

wie gesagt, ich würde Dir raten es einfach zu lassen.

hm, vielleicht noch ausführlicher meine Anmerkung zum Zentrieren. Hier das Element für das Impressum auf meiner zentrierten und 700px breiten Seite:

#impressum {
width:700px;
margin:auto;
text-align:right;
}

hehe, ja stimmt. nachdem ich gepostet habe, hab ich auch überlegt, dass es doch eigentlich über Höhe gehen muss .

aber da es hier kein edit gibt ...