s_monani
asked on
how to make the website resolution independent using asp.net?
hi experts,
I m making my project in asp.net. I want to create the project resolution independent. I had tried it with tables but it became complicated when the project form had more controls. Is there any other way to do it so. Plz help me.
thanx
I m making my project in asp.net. I want to create the project resolution independent. I had tried it with tables but it became complicated when the project form had more controls. Is there any other way to do it so. Plz help me.
thanx
Asp.Net 2.0 has a facility called themes. This allows your site to has several 'Sets' of images (amongst other things) and a style sheet associated with each set. This set is called a theme and you can programatically set the theme on a user by user basis at runtime.
Basically what you need to do is design a set images and a style sheet for each resiolurion and store these as a theme in the App_themes folder. Then in the session on start event detect the users screen resolution (from the user agent in browser capabilities) and set the theme as appropriate (typically using a case statement).
For page layout you could either
1) use a master page for each screen resolution (my favorite as it's easy and flexible)
2) use a single master base based on percentages (can ork but difficult to develop and not very flexible - you might want to have a completly different layout for some browsers)
3) use css positioning based on divs and stored in the style sheet (this the most PC and by far trhe bset but you'd need to be pretty good at CSS to pull it off)
If you want to get really advanced you could also put all your sites text into 'skin' files (these are part of the theme) and have these dynamically put on the page at run time. This works for really small browsers where you might want a less verbose version of you site to be displayed. It is also a technique that can be used for creatig a multi-lingual site.
The real beauty of this is that it's straight out of the box in asp.net 2.0
Basically what you need to do is design a set images and a style sheet for each resiolurion and store these as a theme in the App_themes folder. Then in the session on start event detect the users screen resolution (from the user agent in browser capabilities) and set the theme as appropriate (typically using a case statement).
For page layout you could either
1) use a master page for each screen resolution (my favorite as it's easy and flexible)
2) use a single master base based on percentages (can ork but difficult to develop and not very flexible - you might want to have a completly different layout for some browsers)
3) use css positioning based on divs and stored in the style sheet (this the most PC and by far trhe bset but you'd need to be pretty good at CSS to pull it off)
If you want to get really advanced you could also put all your sites text into 'skin' files (these are part of the theme) and have these dynamically put on the page at run time. This works for really small browsers where you might want a less verbose version of you site to be displayed. It is also a technique that can be used for creatig a multi-lingual site.
The real beauty of this is that it's straight out of the box in asp.net 2.0
ASKER
hi,
thanx for u r reply. But can u plz tell me what is master page?
thanx for u r reply. But can u plz tell me what is master page?
Master pages are a new featutre of ASP.Net 2.0. Basically you can define a template (as master page) and define within it placeholders for content. Then you write your content pages that have just these content 'islands' and nothing else (except a reference to the master page). At run time the content islands are merged with the master page and the result is a normal asp.net page. The advantage is that the template is seperate and therefore when you change it you onluy have to change the one page. Another advantage is that you can programatically choose which master page to use so you can change the page layout on a page by page basis at runtime.
This is a very basic explanation but you can find dozens of detailled examples on the web.
This is a very basic explanation but you can find dozens of detailled examples on the web.
ASKER
hi,
Can u send me some of the example links so that i can understand in a better way
thanx
Can u send me some of the example links so that i can understand in a better way
thanx
These should help...
Master pages
http://www.devx.com/dotnet/Article/18042
Themes
http://www.15seconds.com/issue/040105.htm
http://www.codeproject.com/aspnet/ThemesAndSkins.asp
There is a huge amount off new stuff in ASP.Net 2.0 and I think it is well worth buying a book. One I can recommend is...
http://www.amazon.co.uk/Pro-ASP-NET-2-0-M-MacDonald/dp/1590594967/sr=8-2/qid=1162374715/ref=sr_1_2/202-3808747-8724650?ie=UTF8&s=books
Master pages
http://www.devx.com/dotnet/Article/18042
Themes
http://www.15seconds.com/issue/040105.htm
http://www.codeproject.com/aspnet/ThemesAndSkins.asp
There is a huge amount off new stuff in ASP.Net 2.0 and I think it is well worth buying a book. One I can recommend is...
http://www.amazon.co.uk/Pro-ASP-NET-2-0-M-MacDonald/dp/1590594967/sr=8-2/qid=1162374715/ref=sr_1_2/202-3808747-8724650?ie=UTF8&s=books
ASKER
hi,
It was nice links as it had the very clear & easily understandable contents. But the problem is i m using asp.net 1.1 version. & Master pages are not supported by this version. So any other option is there?
thanx
It was nice links as it had the very clear & easily understandable contents. But the problem is i m using asp.net 1.1 version. & Master pages are not supported by this version. So any other option is there?
thanx
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I beleive that I am owed the poijnts for this one. I have worked hard to explain the solution setp by step. The author agrees that this is the correct answer he's just not using ASP.Net 2.0.
use relative widths in your html code :
<table border=0 cellpadding=0 cellspacing=0 width="100%">