div positionieren

[strauberry]

Hallo zusammen,

ich möchte ein div auf meiner Seite zentrieren und dazu von ganz oben nach ganz unten haben... Wie genau macht man das? So wie ich das kenne, funktioniert entweder das eine oder das andere... zentrieren: width: x; margin: 0 auto; oder von oben nach unten position: absolute; top: 0; bottom: 0;. Wenn ich absolut positioniere, ist es aber (logischerweise) nicht mehr zentriert.

DANKE!

[ZombieChe]

mhmm, verstehe dein Problem mit der ersten Lösung nicht.

html,body {height:100%;}

.divclass {
  margin:0 auto;
  width:...; //wasauchimmer
  height:100%;
} 

sollte doch gehen...
Falls du lieber absolut positionierst geht auch folgendes:

html,body {height:100%;}

.divclass {
  position:absolute;
  top:0;
  left:50%;
  height:100%;
  width:...; //wasauchimmer
  margin-left: (width/2); //<--  width einsetzen und ausrechnen!
} 

[strauberry]

Hi,

danke für deine Antwort!

Das mit dem height: 100% ist so ne Sache: wenn dann soviel Content drinsteht, dass ich scrollen muss, geht das div nur bis zum Ende des Browserfensters und nicht bis zum Ende des Contents. Also der Bereich, der dann "reingescrollt" wird, ist ohne div. Zumindest beim FF.

Außerdem setzt das left: 50% beim absolut psotionierten die linke Kante auf genau die Browsermitte. Der margin schiebt es dann noch weiter nach rechts. Ist also nicht wirklich zentriert :-)

[wahsaga]

Original geschrieben von strauberry
Außerdem setzt das left: 50% beim absolut psotionierten die linke Kante auf genau die Browsermitte. Der margin schiebt es dann noch weiter nach rechts.

Und was könnte vielleicht in die andere Richtung "schieben" - ein negatives margin-left vielleicht ...?

Ist also nicht wirklich zentriert :-)

Und du denkst auch nicht wirklich mit :kein-smilie:


Dass die Lösung natürlich den Nachteil hat, dass bei zu kleiner Breite des Anzeigebereiches das Element nach links aus dem Bild geschoben wird, und dann auch durch Scrolling nicht mehr erreichbar ist, sollte klar sein.

[strauberry]

Und was könnte vielleicht in die andere Richtung "schieben" - ein negatives margin-left vielleicht ...?

Wie einfach sind doch manchmal die Sachen :-) Vielen Dank!!!

[ZombieChe]

jo...sorry - Tippfehler

War natürlich nur vom einfachsten Fall ausgegangen.