Bereich nicht scrollbar

[Timmer]

Hey, ich möchte an meiner Website rechts, links und unten einen Schatten drann machen und dieser Schatten soll aber durch scrollen nicht sichtbar werden. Wenn der User eine niedrige-normale Auflösung verwendet, muss er nach unten, ggfs sogar nach rechts und links scrollen. Genau dann soll der Schatten nicht angezeigt werden. Benutzt der User aber eine hohe Auflösung (und nicht scrollen muss), soll der Schatten als Seitenbegrenzung angezeigt werden (und nur dann, da er sonst unnötig ist).

Der Schatten besteht aus Eck-Grafiken und langgezogenen 'Strecken'-Grafiken. Also sind mindestens 5 Blockelemente um die Website gebaut, die von diesen Eigenschaften betroffen sind.

Man könnte es mit JS realisieren, aber die Methode gefällt mir nicht. Gibts vielleicht eine Methode mit CSS (z.B. overflow), mit der ich das realisieren kann? Ein Lösungsansatz wäre nicht schlecht, da ich echt keinen Schimmer habe, wie ich an das Problem rangehen sollte...

Timmäh!

 

[Elroy]

Hallo.

CSS kenn nicht die Aufloösung deines Monitors.

Wer sagt dir das ein User mit einer höheren Auflösung mehr Platz zur Verfügung hat als ein User mit einer niedrigen Auflösung?
Nicht jeder surft mit voll geöffnetem Browser. Schon mal darüber nachgedacht?

Gruss
Elroy

 

[Timmer]

Es geht einfach nur darum, dass der Schatten nicht angescrollt werden kann. Natürlich ist auch die Fenstergröße entscheidend. Nehmen wir mal an, ein User mit einem 30 Zoll Monitor und einer Auflösung von 2560 x 1600 und hat das Browserfenster so klein, dass er auf meiner Seite scrollen muss (d.h. Scrollbalken sichtbar). Dann soll er den Schatten nicht anscrollen können, sondern am echten Seitenrand bzw. -boden ankommen. Macht er das Fenster größer, sodass er nicht mehr scrollen muss, aber auch mehr als die Seite angezeigt wird, dann soll der Schatten angezeigt werden.

 

[HTMLworld]

hey, warum machst du nicht einfach nur dein content-div scrollbar und sonst alles nicht scrollbar, das könntest du dann ganz einfach mit dem overflow befehl in css....wenn du es aber besser haben willst, dann wirst du nicht an js vorbeikommen.....

 

[Timmer]

Ja, meine Frage war aber, WIE mache ich den Contentbereich Scrollbar und den Rest nicht? ;D

 

[Philastan]

Was spricht denn dagegen, das du deine Div's folgendermaßen aufbaust:

<div id="wrapper">
<div id="schatten_links></div>
<div id="schatten_rechts></div>
<div id="schatten_oben></div>
<div id="schatten_unten></div>
<div id="content"></div>
</div>

Dann den Schatten jeweils 1px breit/hoch machen (Links und rechts: Ein Pixel hoch) und als Backgroundimage einfügen. background-repeat einschalten und die Höhe/Breite der Schatten-divs 100%. Overflow:hidden. Dann dürfte es auch nichtmehr scrollbar sein.

Hoffe das ist auch das was du willst ;)

 

[Timmer]

Nein, nein, das ist auch nicht, was ich suche ^^ Trotzdem danke für die Hilfe, ich muss wohl damit Leben, dass der Schatten angezeigt wird...

 

[FoXMorayn]

wenn der user bei einer normalen auflösung horizontal scrollen muss, ist das nicht optimal.
du könntest den schatten für die linke seite relativ(relativ positionieren oder vllt mit margin arbeiten) links in den negativen bereich zu setzten und die seite zu zentrieren. d.h. der anschlagspunkt für die linke seite liegt am rechten ende des linken schattens.

 

[Fisker31]

Kann nicht direkt nachvollziehen wie ein Schatten als Rand dienen soll...^^

 

[Timmer]

wenn der user bei einer normalen auflösung horizontal scrollen muss, ist das nicht optimal.

Ich weiß, es kann ja aber durchaus möglich sein, dass der User sein Fenster ganz schmal zieht. Außerdem geht es mir ja auch darum, dass der Schatten kein Scrolling verursacht, wenn er nicht mehr in den angezeiten Bereich passt...

Kann nicht direkt nachvollziehen wie ein Schatten als Rand dienen soll...^^

Schonmal ein Blatt Papier auf den Tisch gelegt und ne Lampe darüber gehabt? Wenn das Blatt nicht glatt auf dem Tisch liegt, sondern z.B. mit den Ecken und Kanten etwas über dem Tisch 'schwebt', wirft das einen kleinen Schatten auf den Tisch. So ist auch mein Schatten ;D

PS: Sorry für die späte Antwort...

 

[mermshaus]

Also, die Schatten links und rechts sind nicht das Problem. Da könntest du dem body-Element ein zentriertes Hintergrundbild mit repeat-y setzen, das meinetwegen 900 px breit ist und an beiden Rändern 20 px an Schatten enthält. Die eigentliche Seite zentrierst du horizontal darin und gibst ihr eine Breite von 860 px.

So hast du allerdings einen über die gesamte Höhe des Viewports durchgehenden Bereich.

Wie du dazu unten einen ordentlichen Abschluss hinbekommen kannst, weiß ich nicht. Vielleicht bringt footerStickAlt was, wobei die Technik auch nicht das Problem lösen kann, dass du über den Hintergrund von body drübermalen müsstest. Das ginge vielleicht noch irgendwie mit negativen Margins. Nach unten hin: Keine Ahnung.

- The Man in Blue > footerStickAlt: A more robust method of positioning a footer

 

[Timmer]

Nicht die Methode, die ich mag, da mein Schatten nicht durchweg gleich ist, sondern an den Ecken verzogen und außerdem soll der Schatten ja nur bis zum Footer genen, und nicht darüber hinnaus =)

Trotzdem danke für eure Antworten!