How do you code for different resolutions?

[l Squid l]

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



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?

[Apostropartheid]

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!

[jcdevelopment]

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.

[effpeetee]

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

Look at these sites. 1.

and here - 2.

Frank

[l Squid l]

Originally Posted by CyanLight

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.

[macwiz]

Originally Posted by l Squid l

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?

[_Aerospace_Eng_]

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.

[l Squid l]

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

[l Squid l]

Just a bump..

[jcdevelopment]

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.

[l Squid l]

Alright I get that. Thanks

[l Squid l]

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?

[_Aerospace_Eng_]

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.

[l Squid l]

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.

[l Squid l]

Ok I have split my layout like this.


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.