Topic: Website look changes with the resolution

[paragkalra]

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?

[BlueBoden]

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.

Code: [Select]

* {
  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.

[deadlyp99]

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.

[haku]

I'd wager a guess that you are using absolute positioning in your layout. Is this correct?

[BlueBoden]

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.

[haku]

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.

[andrewsCWD]

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.