Forum Moderators: not2easy
When you create more complex websites, that's when you start running into trouble: layouts that require complex positioning, or need to be near pixel-perfect. If this is more the case than a simple website, what people sometimes do is have two layouts for a certain grid, such as a columnar newspaper-style grid (within the content section) for anything 1024*768 and up, and for those below, it switches to a row-style grid (Search for Resolution dependent layout, by The Man in Blue.)
This, while being a good compromise (being able to keep complex layouts without possibly being disastrous based on a user's resolution,) it does mean having to code two different layouts.
To be honest I don't see too much of a need for 100% resolution independence. A quick and nasty would be just to design a fixed-width site that looks fine in 800*600, and it will look the same (background images/widths and paragraph widths etc.) on any resolution above. Any resolution below 800*600 seems a bit mootpoint (to me at least.)
I think you're going to have a harder time getting it to look the same on IE 6 vs. IE 7 vs. standards-compliant browsers, rather than the same at all resolutions.
Although, now you've got me wanting to make a minimalistic skin of my site where the entire thing increases in size depending on what Font Size a browser is set to :)
The basic way to start though, is to use lots of EMs and percentages for sizing, so you base things off their font size, and their window size.
Aside from saying that, for specific inforamtion, you'd need to say what kind of site layout you'd want.
our layout's corner is zig-zag like pen draw.
This is most likely because the image is "stretched out" and the browser is interpolating the between-pixels.
If you have an image 50 X 50 pixels, this means there are 50 bits of image info across and down. If you put it in a page and set the size to 100 x 100 pixels, the browser must interpret what's "in between" to render it. This is called interpolation and the zig-zag you're describing is pixelization.
To render this site at a larger resolution, you will have to go back to your graphics program and re-create the graphics. Then when the page loads, have some method of determining user's resolution (unreliable at best) and serve one version for 1024, one for lesser resolutions. Or just commit to the larger size (not a great idea.)