hi, my problem is that i made a website which is best view in the screen resolution 1368*768. this website look's very good in this resolution but when someone view it in another PC having different resolution, then all web pages alter and horizontal scroll
coming for all pages. this is due to that i have used div rather then table and all div's overlaping with each other. i want to add css file's according to the screen resolution. so that this problem is resolved. and the look and feel of website become alike
whether it is viewed in 1024*768 or 1368*766 or any other resolution. That is user screen resolution independent. I think it could be done with Javascript or JQuery. but i don't know how to this. Please help me! Thanks Balwant
Problem with that approach is that just because someone has a screen resoultion of 1024 x 768, that doesn't mean that their browser is displayed at that resolution. Normally, you would put a wrapper div around the content and ensure that it always displays
at a fixed width if your design depends on the width.
using css you can solve this problem by placing a div between form tags and apply css property to that div define your width only to that not define your height because height might change with respect to your content on page.
Thanks for your reply. but this is not as simple as you said.
If i set width of my container div in %age. then the problem becomes much worst.
Suppose your application has very complicated design which best fil 1368 * 768 px screen.
and some images in this application also has fixed width of 600px or more and less.
if we applied width in %age and client browser having resolution 800 * 600 px the all those images get blurred.
and your website becomes a dustbin rather then good designed website.
So this is not a possible solution.
I have a solution in my mind but i am not sure about this whether it is fit or not.
Here is the overview of this:-
Creating different CSS external files for all screen resolutions. and then in the pageload get the user resolution and inclued only that CSS file having made for that resolution.
Using Javascript or jquery.
But the problem is that how can i get resolution using javascript.
here is the javascript code to get screen resolution
Balwant.mnd
Member
108 Points
38 Posts
Resize web page according to resolution of screen
Apr 25, 2011 04:02 AM|LINK
hi, my problem is that i made a website which is best view in the screen resolution 1368*768. this website look's very good in this resolution but when someone view it in another PC having different resolution, then all web pages alter and horizontal scroll coming for all pages. this is due to that i have used div rather then table and all div's overlaping with each other. i want to add css file's according to the screen resolution. so that this problem is resolved. and the look and feel of website become alike whether it is viewed in 1024*768 or 1368*766 or any other resolution. That is user screen resolution independent. I think it could be done with Javascript or JQuery. but i don't know how to this. Please help me! Thanks Balwant
Mikesdotnett...
All-Star
155649 Points
19987 Posts
Moderator
MVP
Re: Resize web page according to resolution of screen
Apr 25, 2011 05:03 AM|LINK
Problem with that approach is that just because someone has a screen resoultion of 1024 x 768, that doesn't mean that their browser is displayed at that resolution. Normally, you would put a wrapper div around the content and ensure that it always displays at a fixed width if your design depends on the width.
Web Pages CMS | My Site | Twitter
matifnadeem
Contributor
4968 Points
1156 Posts
Re: Resize web page according to resolution of screen
Apr 25, 2011 05:12 AM|LINK
hi Balwant.mnd,
using css you can solve this problem by placing a div between form tags and apply css property to that div define your width only to that not define your height because height might change with respect to your content on page.
M Atif Nadeem
Mark as Answer if you got right thing
Read my blog | Follow me on LinkedIn
matifnadeem
Contributor
4968 Points
1156 Posts
Re: Resize web page according to resolution of screen
Apr 25, 2011 05:18 AM|LINK
here is sample example
CSS CODE
div.wrapper
{
width:99%;
margin: 1% 1% 1% 1%;
}
HTML CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title>My Web Page</title>
</head>
<body>
<form runat="server">
<div class="wrapper">
<%-- Put your code here -->
</div>
</form>
</body>
</html>
M Atif Nadeem
Mark as Answer if you got right thing
Read my blog | Follow me on LinkedIn
amitpatel.it
Star
8070 Points
1880 Posts
Re: Resize web page according to resolution of screen
Apr 25, 2011 05:20 AM|LINK
In this kind of desing you have to define your html page design width and height with % rathter then fix pixel value....
MCPD Enterprise and Web Application
MCTS Web, Window and Enterprise Application
Balwant.mnd
Member
108 Points
38 Posts
Re: Resize web page according to resolution of screen
Apr 25, 2011 06:31 AM|LINK
Hi
Thanks for your reply. but this is not as simple as you said.
If i set width of my container div in %age. then the problem becomes much worst.
Suppose your application has very complicated design which best fil 1368 * 768 px screen.
and some images in this application also has fixed width of 600px or more and less.
if we applied width in %age and client browser having resolution 800 * 600 px the all those images get blurred.
and your website becomes a dustbin rather then good designed website.
So this is not a possible solution.
I have a solution in my mind but i am not sure about this whether it is fit or not.
Here is the overview of this:-
Creating different CSS external files for all screen resolutions. and then in the pageload get the user resolution and inclued only that CSS file having made for that resolution.
Using Javascript or jquery.
But the problem is that how can i get resolution using javascript.
here is the javascript code to get screen resolution
<SCRIPT language="JavaScript">
<!--
height = screen.height;
width = screen.width;
res = document.getElementById ('resolutionNumber');
res.innerHTML = width + " X " + height;
if (res == null)
{
alert ("hello");
}
//-->
</SCRIPT>
Thanks
Balwant
If any one having same problem and wants to solution please share their view.