Page shift off screen to the left

mattisimo
avatar
rank newbie

newbie


Posts: 4
Joined: 2007-05-15

Posted: Fri, 2008-05-16 17:05

Hi,

I have had a homepage design through that I need to chop up and I am not sure that the requested effect is possible. Well I can't see how/where to start. Does anyone have any ideas as to whether the following is possible and if so, I would be very grateful for any suggestions.

The problem as best as I can describe it:

  1. The site is left aligned, with a header and footer bar that runs 100% width
  2. The layout is too wide to display on a 1024 monitor (intentionally)
  3. There is an image that runs to the left hand side of the screen, to about half way across
  4. There is a gap of about 50px to the left of the rest of the content. This is the largest this gap should be
  5. On 1024 monitors the content should slide over to the left so that the gap is only about 10px
  6. The image should then shift with the content and therefore 40px of it will be out of the left of the screen
  7. What is more fun is that the image needs to be hooked into JQuery to provide interaction and change when the user rolls over a list of options.

Any idea whether this is possible? I have never had to work with a left aligned design that needs to adjust to the change of screen resolution or viewport size by sliding out of the left of the screen but only to a set amount.

Many thanks for reading this and hopefully shedding some light on it for me.

mattisimo
mattisimo's picture
rank newbie

newbie


Posts: 4
Joined: 2007-05-15

Hi again, here is a

Posted: Fri, 2008-05-16 22:46

Hi again,

here is a rough outline of the design to give some sort of visualisation

Chris..S
Chris..S's picture
rank Moderator

Moderator


Posts: 5678
Joined: 2005-02-22

Your explanation isn't very

Posted: Sat, 2008-05-17 07:31

Your explanation isn't very clear, so its difficult to say. At a guess, you'll need a placeholder element that includes space for the crumple zone and the image. That element will need a width, min-width and max-width. The width will be a % value, whilst the min & max values will be pixel values. For IE6 you'll probably need to choose a single set of values.

On Having Layout | The One True Layout | menus by listamatic

mattisimo
mattisimo's picture
rank newbie

newbie


Posts: 4
Joined: 2007-05-15

Hi, thanks for your

Posted: Sat, 2008-05-17 14:22

Hi,

thanks for your answer.

I think that based partly on your point about IE6 and also what I consider to be an unbalanced look when the design is compressed I'll see if I can convince them to look at a static design.

Have you ever seen a left aligned design that slides out of the screen to the left when the resolution or viewport size is reduced? If you have could you please tell me where as I would like to see it in action.

Many thanks again,

Matt

Chris..S
Chris..S's picture
rank Moderator

Moderator


Posts: 5678
Joined: 2005-02-22

I don't recall any.

Posted: Sun, 2008-05-18 01:23

I don't recall any.

On Having Layout | The One True Layout | menus by listamatic

mattisimo
mattisimo's picture
rank newbie

newbie


Posts: 4
Joined: 2007-05-15

A demo to help explain

Posted: Tue, 2008-05-20 22:46

Hi,

I have been partially successful in the implementation but only in Firefox. IE and Safari are not interested. Here is the experiment: http://code.likeaninja.co.uk/crumple/crumple.htm

Could anyone please spare a moment to have a look at this page in Firefox to see the sort of thing it should be doing and then shed any light on why no other browser will consider the crumple zone? Any suggestions in about the experiment/implementation in general appreciated.

Many thanks for your time and suggestions.