...

View Full Version : How do you code for different resolutions?



l Squid l
07-18-2008, 06:52 PM
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?

Apostropartheid
07-18-2008, 06:57 PM
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
07-18-2008, 06:57 PM
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
07-18-2008, 06:59 PM
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

l Squid l
07-18-2008, 07:19 PM
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
07-18-2008, 07:22 PM
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_
07-18-2008, 07:57 PM
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
07-19-2008, 06:33 AM
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
07-21-2008, 05:32 PM
Just a bump..

jcdevelopment
07-21-2008, 05:37 PM
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
07-21-2008, 05:59 PM
Alright I get that. Thanks

l Squid l
07-22-2008, 04:34 AM
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_
07-22-2008, 07:00 AM
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
07-23-2008, 04:23 PM
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
07-24-2008, 04:42 PM
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.

abduraooft
07-24-2008, 05:08 PM
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

l Squid l
07-24-2008, 05:22 PM
Ok. http://silentstormstudios.freehostia.com/

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

l Squid l
07-24-2008, 07:52 PM
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&#37; 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/)

l Squid l
07-25-2008, 06:22 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum