Screen Size and Resolution

[Ashlar]

Hi
I design Web Pages using a 19" monitor set at 1024 x 768
However the great unwashed and other surfers and critics complain that it's to big for their screens and resolutions.
I heard that I could solve this problem using CSS. Does anybody know how? I would apprerciate any information on this matter.................Thanks

[pyro]

Cross posted here http://forums.webdeveloper.com/showt...&threadid=2721

[AndrewTheMan]

Style sheets won't fix all of your problems unfortunately. If you use large graphics and want them displayed properly, I'm afraid users with tiny monitors are S.O.L. However, if you can give up using layouts with absolute measurements in favor of using tables set up with percentages, then (in theory) your sites will have equal proportions on every monitor. The only other option is to dictate to the browser what size you want images displayed at and let the browser shoehorn your image into the allotted space. I am not sure whether or not graphics can be coded into pages by percentages... perhaps thats a question for someone else.

[pyro]

Yes, graphics can be coded in percent, but you are going to end up with some pretty distorted images in certain resolution. What if someone shows up on you site with 1600x1200 screen resolution? Chances are, the graphic is going to have to double it self to fit the percentage that you specified...

[::mist::]

What you could do ( if you have ASP enabled on your server ) is get the screen reso , store it in a variable, then adjust the string of your image directory to use the right sized image by using an IF statement. You could of course do this in PHP as well, heck, probably even Javascript. IF you need a clearer explanation Here is a bit of psuedo code to get you started.

<%

//Get screen resolution
//store in variable "reso"
IF reso = "1024,768" THEN
reso_dir = "1024"
ELSE IF reso = "800,600" THEN
reso_dir = "800"
ELSE IF reso = "640,480" THEN
reso_dir = "640"
END IF

%>

OF course you would have to do a bit of research to figure out how to get the screen resolution and what it would look like if would be stored in a varible. That shouldn't be too hard though. Then when you put an image as a background or whatever make sure you have three folders called "640","800" and "1024". Place the images which are made to suit those resolutions in the correpsonding folder. Then whenever you use an image in a "src" thingy make sure you use the variable instead. ( that must sound soooooo confusing, I better give an example. lol ) e.g

<img src = "<% Response.Write("images/" & reso_dir & "image_name.jpg")%>"

or perhaps an easier way would be to keep them all in the same folder and have the resolution at the end of the name ( just before the .gif/.jpg/.png) e.g

<img src = "<% Response.Write("images/image_name" & reso_dir & ".jpg")%>"

I know this must sound sooooo bad as it is written so poorly,
but hopefully you understand what I am trying to say.

[Stefan]

Originally posted by AndrewTheMan
Style sheets won't fix all of your problems unfortunately. If you use large graphics and want them displayed properly, I'm afraid users with tiny monitors are S.O.L.

With CSS you can make scrollbars popup automatically for individual items, eg an image, when they otherwise don't fit on the screen.

I would say that is pretty far from being S.O.L.