DIV zentriert mit overflow:hidden

stroyer · 07.04.2009

Ich habe ein zentriertes DIV und will es, wenn das Fenster zu klein ist, links UND rechts abschneiden. Mit ovferlow:hidden bleibt der Container aber irgendwann links stehen und wird nur rechts abgeschnitten.
Ich würde aber gerne haben, dass der Container eine fixe Breite hat und dessen Mitte immer auf die Mitte des Browserfensters fällt. Wie kann ich das realisieren?
Vielen Dank im Vorhinein

AlphaGen · 07.04.2009

AW: DIV zentriert mit overflow:hidden

Also ich hab ne Lösung, die aber sicherlich nicht deinen Vorstellungen entspricht.

Du gibst dem div folgende css-styles:
margin-left:50%;
left:-(hälfte der Breite deines divs. Bei width von 400 also 200)

Probleme dieser Lösung:
1. Das div muss eine festdefinierte Breite besitzen.
2. Das div verschwindet auf beiden Seiten obwohl die Größe des divs die gleiche ist. Erklärung: Nehmen wir an, unser div ist 400px breit. Das Browserfenster wird jetzt auf 200px Breite zusammen geschoben. Das div ist weiterhin 400 px Breit und ragt links und rechts je 100px über. Problem hierbei ist, dass man nicht nach rechts scrollen kann.

stroyer · 07.04.2009

AW: DIV zentriert mit overflow:hidden

Erst einmal danke für die Antwort. Das links/rechts scrollen wäre mir egal gewesen, da es sich nur um ein Bild im div handelt. Ich habe es jetzt dann doch über background-image und background-position:center gelöst, da ich denke, dass es anders generell keine andere Lösung als deine gibt.

sokie · 07.04.2009

AW: DIV zentriert mit overflow:hidden

natürlich gibt es die.
zunächst positionierst du deinen DIV per

Code:

#meinDiv{
  width:600px; /* eine Breite angeben */
  margin: auto;
  height: 400px /*höhe angeben*/
  overflow: hidden;
}

und den umassenden container des darin liegenden elements mit der selben methode.

stroyer · 07.04.2009

AW: DIV zentriert mit overflow:hidden

Habe ich das jetzt falsch aufgefasst, weil

HTML:

<html>
  <head>
  </head>
  <body>
    <div style="width:600px;margin:auto;height:40px;overflow:hidden;">
      <div style="width:600px;margin:auto;height:40px;overflow:hidden;background-color:blue;color:white; text-align:center;">
      Helo world
      </div>
    </div>
  </body>
</html>

geht nicht.
(stehe doch wieder vor diesem positionierungsproblem)

sokie · 07.04.2009

AW: DIV zentriert mit overflow:hidden

nicht du hast das falsch aufgefasst, sondern ich, sorry für den Irrweg

stroyer · 10.04.2009

AW: DIV zentriert mit overflow:hidden

Jetzt stecke ich vor dem nächsten Problem: ich habe ein 50x50 Pixel großes div, das manchmal rechts aus dem Browser stehen soll. Nur wie kann ich dabei Scrollbalken vermeiden?
Gehen würd es mit einem 100% 100% großem div und overflow:hidden, aber dann kommen meine mouseevents auf die divs darunter nicht an. und overflow hidden bringt im kleinen div logischerweise auch nichts.