Horizontale Scrollbar erst bei bestimmter Größe anzeigen

[ypso]

Hallo Leute,

ich habe folgendes Problem und komme nicht weiter, könnt ihr mir weiterhelfen?

Ich habe drei <div>’s in meinem Layout: links und rechts für den Background (rot markierte Flächen) und der Content ist der weiße Kasten in der Mitte (siehe angehängtes Bild). Alle drei <div>’s sind umschlossen von einem weiteren <div> das eine feste Breite hat und via margin:0 auto; horizontal zentriert ist.

Nun zu meinem Problem: Wenn ich den Viewport verkleinere erscheint die horizontale Scrollbar bereits sobald das umschließende <div> nicht mehr in den Viewport vollständig angezeigt werden kann. Was ja auch logisch ist aber ich hätte gerne die beiden roten Flächen vom Maß abgezogen so das die horizontale Scrollbar des Browser erst dann erscheint wenn der Viewport so klein ist wie das weiße <div> zwischen den beiden rot eingefärbten Flächen.

Ich hoffe ich konnte mich verständlich genug ausdrücken =)

 

[Trüffelkrieger]

Was hast du denn in deinem Hintergrund? Die Lösung wäre folgende: Du löscht das linke und rechte div. Du verkleinerst das div, was alles umschließt und das ganze zentriert auf die Breite des Content-divs. Nun weist du dem body den Hintergrund zu.

Edit: Vielleicht geht es auch, wenn du dem linken und rechten div ein overflow:hidden zuweist.

 

[ypso]

das war auch anfangs so wie du es geschrieben hast: das linke und rechte <div> gehören zum Background. Das Problem ist wenn ich die Beispielsweise im body als Background angebe bekomm ich ihn zwar horizontal zentriert aber er "fließt" nicht mit dem Content nach oben und unten wenn man scrollt. Oberhalb bleibt er fix an der Oberkante. Daher dieser Aufbau

overflow bringt hier nichts da die beiden <div>'s von einem weiteren umschlossen werden. ich musste sie deswegen umschließen damit ich alle drei <div>'s horizontal zentrieren kann =(

 

[Trüffelkrieger]

Du kannst dem background im body das Attribut background-position:fixed; geben. Dann bleibt es auch beim scrollen mit im Blickfeld.

 

[ypso]

Deine Tipp hat mich auf eine andere Idee gebracht:

background:url('../img/bg.jpg') no-repeat center top;

Funktioniert wunderbar da ich vorher beim ausprobieren einen falschen Wert eingegeben hatte =) Jetzt klappt es wunderbar !