tmyonline Posted September 13, 2009 Share Posted September 13, 2009 Hi Guys, I have this problem all the times. The CSS rules I specify work fine on my machine. However, when I look at the same site on another machine, which is set at a higher resolution (everything looks bigger), then my CSS rules don't seem to work as expected. Is there a way to render the CSS so that it works for all resolutions. Otherwise, what would be your suggestions ? Thanks. Quote Link to comment Share on other sites More sharing options...
saltedm8 Posted September 13, 2009 Share Posted September 13, 2009 a or larger screen resolution will make a site look larger or smaller there is a way around it and that is to create a fluid layout ( that means it contracts and expands with the browser window ).. but its not something a beginner can do without loads of hassle another option is to build your sites at a certain width, or no more than a certain width... I would say that if you built it 800px wide it would be ok.. but it would look tiny in much larger resolutions, the next is no wider than 1024px... this is a bit better for the majority of users, but anything less than that ( for example 800px ) and it can look bad really its up to you which you use, but remember the differences - the smaller one will give a much smaller ( even tiny ) website for those that use larger screen sizes - and 1024 will not look ok in 800px width monitors my personal choice would be no longer than 1024px.. I usually design for around 900px width.. the reason is that not many people have a screen size smaller than 1024px these days Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted September 14, 2009 Share Posted September 14, 2009 Get a book called "bulletproof web design - SECOND EDITION" by Dan Cederholm. It is basically all about how to overcome this problem. It cannot be explained in a forum or by any answer like - use a liquid/elastic layout (which is one of the hardest animals to create for more than a simple text based site), or modify your pixel based fixed layout. So many factors are involved that understanding exactly how to overcome the problems is required. Dan's book did it for me. Quote Link to comment Share on other sites More sharing options...
tmyonline Posted September 16, 2009 Author Share Posted September 16, 2009 Thanks so much guys! Quote Link to comment Share on other sites More sharing options...
YDevelope Posted September 26, 2009 Share Posted September 26, 2009 I'm not sure I understood, but this may help: <html> <head> <script type="text/javascript"> <!-- function setWidth(number){ document.getElementById('mainDIV').style.width = screen.width - number + "px"; } //--> </script> </head> <body onload="setWidth(100)"> <div id="mainDIV"> <!-- SITE --> <!-- SITE --> <!-- SITE --> <!-- SITE --> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.