Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 356
  • Last Modified:

Alternating web page code for monitor display modes

Is there any way that a webpage can be made smaller or larger for the setting on the user's monitor. According the set display mode this page I created http://myproboxer.webs.com/ comes up badly in that you have to scroll horizontally to get the full content.
0
kgpretty
Asked:
kgpretty
  • 2
1 Solution
 
Göran AnderssonCommented:
You usually don't consider the size of the monitor, but rather the size of the browser window. My browser is always about half the width of the monitor, so if you would adjust the page according to the monitor size, I would only see half of the page.

Your problem is very common. Almost every person involved in layout for the web struggles with it, as there is no perfect solution.

A common way to handle it, is to assume that the monitor is at least 800 pixels wide, and that anyone with such low resolution has the browser maximised, so that you can safely use about 780 pixels without needing to scroll horisontally. The space to the right of that with is usually used for secondary material, like ads.

Another way to handle it is to use the full width of the browser window, and let the content adjust itself, for example using floating elements.
0
 
gxp071Commented:
As mentioned above web developers as a rule make a decision very early on to go one of two ways when designing a website.

fixed/ static width, or
variable width,

Pro's & Con's

fixed width sites can be guaranteed to look similar in most browsers. but can look silly on wide screen monitors especially if the developer chooses to make the site fit on to an 800px wide monitor...  avg 7% of site users.

variable width sites are harder to design and plan as they can change size,  gfx have to be designed to repeat horizontally to allow for scaling. Can look better on different size monitors but can also make screen reading of text difficult on really wide monitors.

there is a third alternative which is a variable width site caped at a set size. However this takes intermediate css skills.

Generally designers choose to go for a 1024px wide site static site or less as 46% (avg) still have a res of that size or above. examples

www.bbc.co.uk -- less than 800 px static
facebook.com -- viewable at 800 px static
microsoft.com -- less than 1024 px static
apple.com -- less than 1024 px static



to change your site edit:

<table width="80%">      

to be a fixed size ie .. 1024px


at the moment your sit's width is variable to fit 80% of the browser but its minimum width is being dictated by the width of you content i.e. how wide the images are.

Hope that helps point you in the right direction.








0
 
kgprettyAuthor Commented:
What are the "floating elements" all about? I'm not familiar with them.
0
 
Göran AnderssonCommented:
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now