0

My website design (www.benjaminchirlin.com, I know its a bit heavy at the moment, still need to compress images) demands large fullscreen divs to animate across the main screen on menu clicks as opposed to scrolling horizontally. The design is largely image based so I have overflow set to hidden on each menu div. However, when the browser window is smaller than the image content of the div, the animated divs are clipped to the window size which the user can see as they animate left and right.

Is there a way to remove scrolls bars from my window without clipping the images? Thanks.

Primus202
  • 648
  • 7
  • 24

2 Answers2

0

I would position your menu divs underneath another div with a 100% height, a pixel min-height and a negative margin, rather than using a bottom position. As long as your signposts are long enough to accommodate big screens, you should be pretty set.

But congratulations on an innovative design, btw. I was very impressed.

Nathan MacInnes
  • 11,033
  • 4
  • 35
  • 50
  • the bottom bit isn't the problem. the problem is the wall and signs being clipped by the %100 width and height since overflow is set to hidden. Thanks for the compliment! – Primus202 Feb 20 '11 at 04:13
0

Use pixel values instead of 100% in your height & width for the menu divs, but that again creates a problem, that is you will have to center the menu divs manually, i doubt if even margin:auto will work then

Sameer Goyal
  • 471
  • 3
  • 7
  • I realized that no matter what I'll have problems since I'd have to adjust my animations to match the new window sizes and all sorts of other nightmares. I do pull the window size for my mouse tracking code so that is doable... – Primus202 Feb 20 '11 at 04:14