asp.net 浏览器页面最小化/向下恢复时的页面调整 state

Question

I am developing a website using asp.net, So far so good. the functionality does not have much a of a problem but the way the page looks is the problem. When the browser page is in full screen mode all the controls are aligned properly and are at the right place, just as it looked when i designed it on VS 2010. But when the browser is in restored down mode or the screen size is reduced everything on the page looks scattered around. I searched online but found no help This link has the same problem but there seems to be no solution posted. Please help.

Thank You:)

Answer 1

may be you would like to consider your css elements to be defined in % not absolute measures, for example i have a div width=100px; i would like it to be div width=50%. this would give an relative size of the screen size rather the fixed ones.

also consider the float and do use divs in order to make your page adjust accordingly

Answer 2

While coding a design you need to keep in mind that various users will use various devices with various properties. This has nothing to do with asp.net, c# nor visual-studio. This is a problem with CSS. You need to learn how to style your website, so that it looks the same all the time, not only when you're looking at it on your computer using a specific monitor resolution. This is a topic that can't be covered here. There are whole books discussing this "problem" and how to avoid it.

EDIT, some links which may help:

http://www.theserverside.com/tip/How-to-design-a-Web-page-that-will-display-properly-across-browsers

http://faq.programmerworld.net/web_publishing/a-web-standards-checklist.html

http://www.jimwestergren.com/common-css-mistakes-and-their-solutions/

http://www.webreference.com/authoring/style/sheets/index.html

Hope it helps. If you're not experienced, I'd suggest sticking with a fixed-width layout and learn, learn, learn.

And last advice - don't forget that there exist various browsers as well, each rendering the page in a slightly different way. Don't forget to write your css with that in mind and check for problems often.

Answer 3

The problem you are facing is well known as Floating Web Layout. Here I am giving an example

#header
{
    height: 85px; // change like 10%
    width:1000px; // change like 50%
    background-color: White;
    border-bottom:solid 2px #9DACBD;
    margin:10px auto 0px auto;  // change like 10% auto 0% auto
}

By changing to width, height, and margin to percentage (as suggested by @Akash Yadav), you can fix your layout consistent with page resolution. Hope it will help you.
* Note: *There are lots of posts on floating web layout. Search google for more:).