View Single Post
Old 05-17-2003, 04:35 PM   #4 (permalink)
Epsilon
Regular Contributor
 
Epsilon's Avatar
 
Join Date: Mar 2003
Location: Las Vegas, NV
Posts: 131
Epsilon is on a distinguished road
I agree with redhead and sde. This layout would be easy to scale, you don't have to make different sites for different resolutions.

I don't know what your experience is with HTML, so I hope you can follow. Basically what you need to do is start with a design for 800 pixels wide (which you already have). Constrain everything in a table set at a width of 100%.

Now you can specify two types of <TD> widths: absolute, where you specify a width in pixels that will never change, and relative, where you specify a width in % of the browser that will change based on the user's resolution.

Use an absolute setting for your left sidebar with the links, else it will look funky. Right now you've got it set at 147, which is fine.

Now you can choose to scale either your content area or the right sidebar with relative widths. You just need to make sure the background of the table cells are filled, and the best way to do this is by using a background image within each table cell.

For example, notice how in your top graphic the right half of it has the same color pixels flowing horizontally? You could chop a part of this section, use it as a table background, left-align your existing top graphioc, and it would look great.

Or, perhaps a better recommendation is for you do do this with your right sidebar. In this case you would set the width of your left sidebar and content table cells to absolute values, then set your right sidebar to a relative value, right-align your right sidebar graphic, and use the right side-bar pattern as your background image for that table cell.

Another tip: On my screen (1152 X 864) your site is 950 pixels wide. If you're using all absolute values for your table width right now, your site is definitely not suitable for an 800 X 600 monitor. You should make sure it scales nicely down to at least 760 pixels wide.

Hope all this helps.
__________________
--Epsilon--
Epsilon is offline   Reply With Quote