Web Design

Hi i create html page in full screen mode but design will be breaking in multiple resolution screens

that is not fit in all screens how can i fit

 

I'd advise you to do some research on coding in compatibility. There are many different things people could tell you, one of which is to code in wrappers or setting the page width to 100% which would be 100% of the device. You're probably going to have to re-code a majority of your website though.

Or use a CSS framework such as the 960 grid system. It works fantastically well across multiple platforms such as iPhone, Galaxy, tablets, PCs and most screen resolutions.

The only issue I had with it was that it only squeezes the images down when the screen gets smaller. Obviously with devices such as phones, the images need to be cropped rather than squeezed as it eats the bandwidth.

 

just use % on the place of px , make width and height 100%

 

I agree with Scott. I think 900px to 950px width would do for all the resolution. You just need to manipulate the design to make it seamlessly.

 

I would say use % instead of pixels. This is the easiest way to do it. No matter how big the screen it will always be the % you set of any screen.

 

While design is the art and process of combining individual elements of design (lines, shape, texture, color) into a pleasing arrangment,

 

I think, Use a CSS like: margin:0px;padding:0px;

 

I have used % instead of pixels. But yet, it does not fit on many screen resolutions. I mean it gets self- altered sometimes. How does this happen?

 

You can use all browser supported css file.
and also used to % instead of px;

 

Yes, using % is the problem and the reason for your issues. if you are using % then its a dynamic website, and it will change based on the resolution and will break. If you use px for everything, then everything is fixed in place. it will then look identical on different sized screens,( though you still need to make sure it appears the same in different browsers.)

 

Did you use java-script ?
I think there is any problem here ,
try to solve it.

 

[FONT=Arial, Helvetica, sans-serif]Make sure to set the margin top and bottom wrapper to 0 and left and right margin to auto, which centers it on the page. Then, you can set the width to 750 pixels or you can probably go up to 950 or 1000. Lastly. maker sure your CSS properly link to other pages of your site.[/FONT]

 

First, check this to know what are problems of your site when being view by mobile devices http://leebros.us/blog/item/134-how-to-test-your-website-layout-on-iphone-ipad

Then, use CSS to fix the problems you find by define specific css code for specific screen like:

 

I agree with cpaclick - you can check your design with third party tools and emulators - iphone/ipad emulators for apple or multi-browser viewer for windows allows you to test the design. You can also just use browsershots and specify the dimentions when requesting the URL. % are good in some instances, but can add to complexity when wanting to maintain.