2 days to make, too ambitious?

[AlreadyInUse]

Hi folks,

I have to finish this site by tomorrow night at the latest for College. I thought I had made a simple design but when I take into account different screen resolutions the plan falls apart. Is this too ambitious considering I'm a CSS noob? I'm sure my idea is sound, it's just knowing how to set up the bloomin thing!

I decided to work at 1024 x 768. If I don't worry about supporting other resolutions my life will be so much easier, but it would be great to do so.

I've attached my photoshop plan. So as far as I can see, for this to work...

HORIZONTAL ISSUES:

1. The logo must always be at the horizontal centre at any resolution.
2. The main text box must also be at the horizontal centre of the page, but doesn't need to be anchored to the bottom of the page and doesn't change size vertically or horizontally.
3. Where it says '<Home>' is just to let you know where you are, I might change it, it needs to be horizontally centred.
4. Snakeskin needs to always be attached to the sides.

EXPLANATION OF NUMBERED SECTIONS:

These relate to a 'second background' I'd have to use. This would consist of the orange colour, the grey side-panel and the snakeskin only; in a total of four images (1, 2, 3 and 4 in the attached jpg). Box 1 and 2 would be anchored to the left, 3 and 4 to the right.

So if the screen was wider than 1024, boxes 3 and 4 would move to the right leaving a gap in the centre of the screen. This wouldn't matter though because of a first orange background behind the four boxes 'filling' in the gap.

Then if the screen was taller than 768 boxes 2 and 4 would repeat downwards. I would also do a better job of making the snakeskin look infinite.

++++++++++++++++

So, is this easy to do or should I just concentrate on 1024 x 768 for the sake of getting it done? I'd be interested to see how this would be done anyway!

Thanks a lot.

[AlreadyInUse]

Hehe, well I got the background kinda sorted. I've got the four images as divs, positioned to the sides/corners and they stay there. But I don't know how to get the bottom left and right background images to repeat downwards. I've tried different repeat settings within the css for the bottom right and left images but it just isn't happenning.

[craig]

You're going around the layout in the wrong way.

You should have one background, the width of that jpg, and have it repeating downwards. Then have the content ( if you want the scrollbar use the :overflow)
Then float the navigation to the left with a transparency.

Maybe you shouldve started this sooner, but for someone who's a self confessed n00b you still should be able to do it, the layout is not a tough one to do. Just think differently.

Hope this helps,

Craig

[AlreadyInUse]

Cheers Craig

I see what you're saying although I've already went down the 4 box route. I'm not sure if I could have got the snakeskin to cling to the sides if I had used 1 background image when the screen resolution is changed to 1280 x 1024?

That's been a catch-22 for me, the width of my page at 1024 x 768 and 1280 x 1024 is fine but there's a big orange gap at the bottom of the screen at 1280 x 1024. Might just have to be a trade-off, I really need to start setting up links and content now.

Another thing is that the snakeskin is the transparent part, on top of the navbar which is solid grey. And I wanted the grey to go all the way down. So what I have an invisible layer on the left which holds the links.

Yup, you're right... I really should have started this earlier. Not just for the fact it's a tough task, but it's also pretty good fun. When I first got the layers set up I spent about 5 minutes changing the window size with a big grin on my face. Hehe.