Making webpage 'stretch out'?

Daniel15

Hi everyone,
I was just wondering if someone would be able to help me with a problem. Basically, I'm trying to get a webpage to stretch out and occupy the whole space on the screen (instead of being a set width). Unfortunately, I have no idea how to do this... My site is made in Adobe Photoshop/ImageReady using a table-based layout (I know, it's horrible, but I did this a while ago).

For example, here's how my DanSoft Australia page looks at my resolution (1152x864):

And here's a mockup of what I'm aiming to achieve:

(obviously, I'll make sure that the text is centred in the final version)

I've tried to do this, but failed miserably. Can someone please guide me here?

Thanks,
Daniel15

EDIT: Oh yeah, the page in the screenshots is http://www.dansoftaustralia.net/blank.dsa

kronso.23

Well, you can use a number of techniques... first of all, you can set one fixed width, a pretty large width that would accomodate most 1024x768, wrap the whole site in one table, and center the table. or you can make it expandable by cutting a vertical piece of the background, and in CSS give it a repeat-x attribute so it will expand to the size of the screen... but if you were to take that approach you would have to edit your banner a little bit... I would just do a bit of research... look on some sites that have a similar layout and thoroughly examine the source code... if you successfully create the site please let me know as I would like to know how you did it...

DoctorBeaver

You can't do it if you've got a fixed-width banner.

The way I've done it is to create a background sliver - a 1 or 2 pix wide slice - and repeat-x it with the banner width set to 100% (or whatever width you want).

If you use this, however, your banner will be the same all the way across. I normally use a top to bottom colour transition which gets repeated across the page. That tends to look better than just having a single colour.

b4r4t

If it's table based and You don't want to have XHTML w3c valid site, then just set for table width 100% Smile

Then , for the cell with the top banner You may set background-image whitch is a small strip from right side of the banner and make it repeat-x Smile

And here is an example how to make resizable layout with CSS+Div's Smile

http://redmelon.net/tstme/3cols2/

aningbo

make it into a table and use percentages. yeah you should cut if off properly. here's one example i made it: http://ncfpulse.tk/ though haven't check on the site after uploading it. (no visitors, lolz)

you may go through the codes and the way i cut the images. good luck.

hey thats a good template.