Photoshop graphics help

Websites with photoshop

[nickkrym]

Hi, I make my websites with photoshop, slice them, then edit them where needed. I find this a very effective and fast wayto make good looking websites, but I have one small problem. When I make the main part of each page (where the content is going to be) its size is static, meaning when there is more content that tha max size, a scroll bar appears. I dont like this, and I see many sites "adjust" their size (for example [fresherimage.com...] , there are many more but this is just off the top of my head. Any ideas as to how to do this?

Thanks, Nick

[macrost]

One quick way is to not limit your tables by setting absolute values on them. i.e. <table width="725"></table>

Set them to a percentage and they will expand according to size of the browser.

[jo1ene]

Setting absolute widths is the way to go. I always use 'em. I know that a lot of purists believe in everything relative widths, but as long as the width is set less than 800, I don't see an issue. If you make the extra space on the sides a dark color, it really sets off the content. If you do go with the table narrower than the window, make sure that you center it. Leaving a lot of empty space on one side looks hideous, IMO.

[nickkrym]

Thanks for the replies, but if i use percentages, will the image itself also stretch, what I mean with that is if I have for example a line or something (drawn) around the tablem and the table stretches, will that line stretch with it (so will the table still be surrounded by the line)?

Thanks, Nick.

[jo1ene]

No. Images don't ever stretch. That's another reason to use fixed width tables. To piece together parts of images so that the widths and alignments are presreved.

If you wanted a relative width line, you would use a transparent GIF (1px X 1px) and set the hieght to be the thickness you want the line and set the cell background color to be the color you want the line. Then when the table width changes, so does the row and the line.

[nickkrym]

Thanks for all the replies, but then I still don't know how for example this site [absolutecross.com...] , the table (the image) will always be the correct size for the text, do they have to make a different page in photoshop (different sizes) for each page?

[jo1ene]

I will assume that you're talking about the beveled edge. It's a background image that repeats. Right click the edge to view the image. Then the background for the multi row span column has this background repeating.

[pleeker]

Welcome to WebmasterWorld, nickkrym.

One thing you can always do is view the source code of the page/site in question -- not for the purpose of stealing, but for learning.

[jusdrum]

Scaling an image in the way you are talking about nick, is done using multiple parts. The corners are individual graphics and the sides of the box are background images within a cell that repeats. The backgrounds are probably 1 px high (1 px wide on the top and bottom).

If you were going to make this page in Photoshop, you would have to hand edit it after you sliced up the page. I would envision the side nav, top nav, and main window as separate areas that are contained within their own parent tables. The right nav bar is set to align to the top so even though the page can stretch vertically, it looks like the right nav bar is a fixed height.

This is all about nested tables. Knowing which ones to keep a static size and which ones to make percentages.

Also, you don't need to be stuck in the world of fixed pixel dimensions once you grasp how tables can slide.