[dekzn]

Hallo zusammen,

ich habe eine Website mit 3 Blöcken. Einer links (250px breit), einer in der Mitte (Content mit Navigation usw ca 1000px Breit) und einer rechts (250px breit).

Die Contentbox is mittig augerichtet. Die Blöcke rechts und links davon sind left:0px bzw. right:0px sowie beide mit position:fixed ausgerichtet.

Das sieht alles gut aus wenn der Browser im vollem Maße Groß maximiert ist. Verkleinert man jedoch das Browserfenster überlappen die Blöcke links und rechts den Contentblock. Eigentlich sollte aber sobald diese Blöcke näher als 20px an die Contenbox kommen (margin:20px) ein horizontaler Scrollbalken kommen.

Wie erreiche ich diesen Effekt?

Vielen Dank für eure Hilfe!

[Karlarsch]

Stell bitte eine Seite online auf welcher wir uns das Ganze ansehen können. Ersatzweise kannst du auch http://jsfiddle.net/ (oder Vergleichbares) dazu nutzen.

Gruß
Karl

[dekzn]

Okay,

hier der Link:

http://vanille24.com/index.php/shop

[ChrisKam]

1500px ist viel zu breit für den normalen Viewport. Geh' mal lieber von 1000 aus. Computerbildschirme werden zwar größer, aber es gibt eine ganze Menge anderer Geräte mit kleineren Bildschirmen, und denen willst Du keine Scrollbalken präsentieren.

Dein (falscher) Gebrauch diverser HTML5 Tags und der bisherige Versuch, das alles korrekt mit CSS auszurichten offenbart auch einige Lücken, die Du erst einmal füllen solltest bevor Du einen ganzen Shop bastelst - dazu wird hier oftmals http://little-boxes.de/ empfohlen, ob das was taugt und auf dem neusten Stand ist, kann ich persönlich aber nicht sagen.

[dekzn]

es wird ja eben KEIN Scrollbalken angezeigt. Es SOLL aber einer angezeigt werden wenn der Browser kleiner ist, als der Inhalt.

[ChrisKam]

... und leider wäre es so, wie Du es haben willst, nicht besser. Bitte lies meinen Post noch einmal.

[Morgo]

position: fixed bedeutet fix, die Position ist also unabhängig vom Scroll-Offset. (Das ist ja der Sinn der Sache.) Was du suchst sind Media-Queries: Du brauchst unterschiedliche CSS-Regeln für die Breite über und unter 1400px.

Du hast da aber noch ein paar andere, grundliegende Probleme, die du lösen müsstest:

Erstens solltest du dir überlegen, ob das nicht ein bisschen (um nicht zu sagen: viel zu) breit ist, um es fest zu hinterlegen oder ob du das nicht lieber für kleinere Viewports etwas umbaust. (Wenn du eh schon Media-Queries einsetzt, kannst du das auch darüber steuern).

Zweitens sind die fix positionierten Elemente bereits ab einer Viewport-Höhe von 700px nicht mehr ganz zu sehen, da brauchst du also eine Javascript-Lösung.

An deiner Stelle würde ich da nochmal konzeptionell rangehen..

[Karlarsch]

Wenn ich mir die Seite so ansehe hast du einige Probleme mit der Seite, wobei das geschilderte nur die Spitze des Eisberges ist.

- Wie schon von anderer Seite erwähnt solltest du dein Konzept nochmal überdenken. Was willst du erreichen, für wen und warum?
- Wenn du HTML5 nutzen möchtest, nutze es konsequent (ja, das geht auch mit Joomla). Ein Mischmasch aus HTML und XHTML ist, diplomatisch formuliert, unklug
- das Datenvolumen deiner Seite beträgt stolze 3MB. Das ist selbst zu Zeiten in denen Breitbandanschlüsse weit verbreitet sind schon sehr happig
- warum 2 js-Frameworks? Was machst du mit MooTools was jQuery nicht kann?
- Warum jQuery 1.6.2 und 1.5? Aktuell ist 1.9.1
- die Validierung von Formularen mit JS ist nur notwendig für Browser die clientseitige Validierung mittels HTML5-Techniken nicht können
- nutze etwas wie Modernizr um nur das auszuliefern was der entsprechende Browser auch wirklich braucht.
- Divsuppe ist nie schön. Nutze semantisch korrekte Auszeichnung.
- inline-style ist böse. Du hast doch schon diverse ausgelagerte Stylesheets, also pack den Code auch da rein.
- inline-scrpte sind auch böse. Auch hier gilt: auslagern
- Tabellen sind nicht zur Gestaltung gedacht. Nutze für sowas ein Grid, wie z.B. Bootstrap (das löst auch einige andere deiner Probleme)
- HTML-Attribute sollten nicht mehr zum stylen genutzt werden. Nutze statt dessen konsequent CSS.

Gruß
Karl