Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „DIV zentriert mit overflow:hidden“

stroyer

Aktives Mitglied

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

Nicht mehr ganz neu hier

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. :D
 

stroyer

Aktives Mitglied

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

Mod | Web

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

Aktives Mitglied

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)
 

stroyer

Aktives Mitglied

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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.158
Beiträge
2.581.869
Mitglieder
67.223
Neuestes Mitglied
Desiree
Oben