Jump to content

Website look changes with the resolution


paragkalra

Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.