Hi,
I am new to web development. I have 1280*800 resolution in my system. When i design CSS elements,i have to give positons interms of pixels. If i design for my resolution, the same page may look big in small moniors.
How can i design resolution independent CSS elements
Firstly, you can use relative units of measurements (percentage, em, etc) where possible.
Secondly, another common technique is to use different stylesheets for different resolutions (or at least widths, which tends to be the important thing).
It is fairly common to define a minimum width and then fix the width at that. 960 pixels is fairly common now.
The first thing to do it pick a minimum resolution for the site to support without horizontal scrolling. Refer to W3 Schools as a guide; they’re currently reporting at least 93% of browsers at 1024x768 or greater so that’s a good place to start.
The next thing is decide on fixed versus variable width. For example, should all machines render the site at the same fixed width compatible with the minimum resolution you defined above or should the elements flow across the entire space available horizontally. The fixed width option is more predictable but variable width makes better use of screen real estate.
Finally, try to avoid explicit width or left / right positioning of you go down the variable width path. This is fine for some page elements such as a navigation column which always renders at the same width but other elements such as the main page content need to expand beyond any explicit boundaries. The best option is to define the width of a parent container (it may just be 100% which is the default for a div element anyway), then allow the child elements to fill out the container and let the browser render the width accordingly.
Start with some articles about liquid (aka elastic) layout and grid layout (you can search on any engine for those terms). A good source of such articles is the Layout Design section on A List Apart. in particular, the Fluid Grids one has lot of info and a lot of links to resources about the latest design techniques, including some of the most popular CSS frameworks for grid layout design. The How To Size Text In CSS one has a lot of information how to et away from absolute pixels and use em and percentages. The Multi-Column Layouts Climb Out Of The Box has also some interesting information about liquid layout and some nice links.