paragkalra Posted February 2, 2009 Share Posted February 2, 2009 Hello Folks, I am a newbie in this world of web-development. I have made my own website. However the website looks different when opened on different machines having different screen resolution. Is there a way we can make sure the website structure is independent of the screen resolution of the machine on which it is accessed? Quote Link to comment Share on other sites More sharing options...
SuperBlue Posted February 2, 2009 Share Posted February 2, 2009 Not entirely. You can however avoid the most common bad-practices, such as. Locking the font-size or fixing the layout using pixels. Now i usually add something along the lines of below to my own layouts. * { margin: 0; padding: 0; } #Basement { width: 90%; max-width: 1600px; min-width: 668px; } The reason i use the star to remove margin and padding on everything, is because i likely need to change these values anyway, and finally it solves quite a few browser specific issues. For lists that would be the issue where one browser uses margin, while the other uses padding. Be sure to set your font-sizes with either percentages or em as well, pixels would be the last option i would chose. Quote Link to comment Share on other sites More sharing options...
deadlyp99 Posted February 4, 2009 Share Posted February 4, 2009 Also people with a widescrean monitor will see it differently despite the percentages. You can use javascript to detect the browser and resolution/width/height, and load up a different style sheet tailored for them. For instance I find that %20 margins are nice on my 19" wide screen, but leave people with square monitors with a very slim area of content, so I do that to make margins for them about... half of my wide screen. Quote Link to comment Share on other sites More sharing options...
haku Posted February 4, 2009 Share Posted February 4, 2009 I'd wager a guess that you are using absolute positioning in your layout. Is this correct? Quote Link to comment Share on other sites More sharing options...
SuperBlue Posted February 14, 2009 Share Posted February 14, 2009 I don't work with percentages for margins, nor padding. At Least i usually don't. I find it far better to use em's for margins, as well as far more secure then percentages. Don't use JavaScript to change the stylesheet, use PHP instead. A good rule of thumb is that your site should fit nicely into the most common of screen resolutions, without modifying the styles based on resolution, widescreen is no exception in this case. Quote Link to comment Share on other sites More sharing options...
haku Posted February 14, 2009 Share Posted February 14, 2009 You don't need to use javascript OR php for layouts. If they are done right, they can (and usually are) done purely in CSS. There are different ways of doing it - fixed width layouts, FNE (float nearly everything) layouts, expandable layouts and jello layouts are all done purely in CSS, and when coded right, work on whichever monitor side and resolution they are shown on. Quote Link to comment Share on other sites More sharing options...
andrewsCWD Posted February 22, 2009 Share Posted February 22, 2009 I agree with haku. I don't use php or javascript for browser detection on my website. It's just xhtml and css. It displays fine at 800x600 up to 1440 on my widescreen 17inch. I've tested it on my mothers 13inch laptop square screen and a 15 inch widescreen laptop at 1280x800. I have never tested it on anything bigger though, as I don't own anything bigger. So it might look like crap at a large resolution ??? It's not the best website, I imagine someone could code it better. But it seems to be quite resolution friendly and browser friendly at the moment without any browser detection for switching stylesheets. 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.