How do you code for different resolutions?

After i coded my sites they usually break apart when there are not maximized or in a different resolution I'd would really want to code

http://i97.photobucket.com/albums/l231/Squid267/MainDesigncopy.png

and i don't want tot break apart in different resolutions or when not maximized.
So whats the solution i hard fluid layout, is this a fluid layout?

If you code for a width of ~780 pixels, you're generally going to get it to fit the browser window at most resolutions.

Liquid layouts use percentages, which is a certain fraction of avalible space in the viewport.

PS: Liking the design!

a fluid layout normally consists of em's or %'s! That way it can and will adjust to the users screen resolution. Also it wont work well if you use position:absolute or relative with it. Thats because of top, left, right, bottom will all be different. Use paddings and margins and floats also. here is a good site with examples.

http://blog.html.it/layoutgala/

also we cant tell if your site is fluid without code or a link.

Generally speaking, put sizes in ems or %ages. Use as little Position:absolute; as possible.

Look at these sites. 1. (http://www.maxdesign.com.au/presentation/liquid/index.htm)

and here - 2. (http://nopeople.com/CSS/background_image_resize/)

Frank

If you code for a width of ~780 pixels, you're generally going to get it to fit the browser window at most resolutions.

Liquid layouts use percentages, which is a certain fraction of avalible space in the viewport.

PS: Liking the design!

Thanks, I'm so should I adjust the design to 780 px width. or code it straight to 780 px.

Thanks, I'm so should I adjust the design to 780 px width. or code it straight to 780 px.

Can we have a URL please?

Your site can easily be made into a fluid one. Check out this layout.

http://bonrouge.com/2c-hf-fluid.php

Your sidebar can stay at the width its currently set at. Use pixels for its width. Your content area will need to have a repeating image going in the x direction so it expands with the users screen resolution.

You could always keep your header graphic centered or start it on the left and have some type of repeating background. A shiny gradient would look okay.

Let me this straight. I'm going with coding it as a fluid layout. A fluid layout uses percentages. It grows and shrinks. Well my first step is slicing the design in Photoshop any specifics I need to know when slicing it to make it optimal for fluid layout coding? And regrading the Content area I do not understand fully what you said Aerospace Eng

Just a bump..

what he means is that your content area needs to have a reapeating image so that it can expand with content or the size of the users screen. you would take a small slice of your content image, lets say a height of 5px and the width of how large you want it. It all depends on how it looks.

Then you would repeat the content

#content {
background-image:url(contentIMG.gif);
background-repeat:repeat;
}/*just an example*/

check out slicing web based images on google and you might get a few examples of how to do this. Let us know if you have anymore questions.

Alright I get that. Thanks

Based on my layout should I code for two column fluid?

and ok so I coded the banner to be centered. now everything else except the side bar should coded fluid?

Yes. Take a look at the link to the layout I posted. You won't necessarily need to use percentages you could use a left margin on the content and float the sidebar to the left. The content will expand to fit the screen.

I just tried. I'm not able to grasp this. Maybe if someone could code just a column I can get a better hang of it. Don't worry I wont bug you to code more. This is just to help me.

Ok I have split my layout like this.
http://i97.photobucket.com/albums/l231/Squid267/SLiceddesign.jpg

I have made 3 columns to be fluid. and one sidebar to be fixed with. The header, nav and footer I am lost on what to do.

No need to write any specific codes for Columns 1 and 3. Al that you need is a width in % (obviously < 100) for the container and a style of margin:0 auto; to center it inside body

Ok. http://silentstormstudios.freehostia.com/

This what i current have. Its a start. I'll try what you said ^^^

Couple of questions.

1) With this fluid/liquid coding it looks like I won't be able to scroll vertically down?

2) Heres the CSS and HTML for the header which I am unable to make fluid. But then again when I change the percentages to 19% for the height it cut off the header. But I believe that is what its supposed to do because the original design is at 980 height...I think I just solved my problem, I can' make it fluid for smaller resolutions.

Link for site (http://silentstormstudios.freehostia.com/)

This thread cna be closed . I decided to screw the fluid idea and just make it fixed. Which solves my original problem of the design breaking under different resolutions.