Get Help:Ask a Question in our Forums|Report a Bug|More Help Resources
Last post Apr 25, 2011 06:31 AM by Balwant.mnd
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
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.
Apr 25, 2011 05:12 AM|LINK
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.
Apr 25, 2011 05:18 AM|LINK
here is sample example
margin: 1% 1% 1% 1%;
<!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">
<title>My Web Page</title>
<%-- Put your code here -->
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....
Apr 25, 2011 06:31 AM|LINK
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.
height = screen.height;
width = screen.width;
res = document.getElementById ('resolutionNumber');
res.innerHTML = width + " X " + height;
if (res == null)
If any one having same problem and wants to solution please share their view.