CSS and Screen Resolutions...?

Question

OKay, so I'm Gr.10 and I'm taking a technology course; for my summative I have to make a website without the use of an editor. Most of the class is using tables, but the teacher thought I was ready to use CSS. We've been programming websites for about 2 months. Here's my problem: I designed my site using CSS (with absolute values for positiong objects) on a widescreen monitor with a 800x1280 resolution and when I brought it to the school computers (the one's we are being marked on), my page was all warped... I now realize why that happened, but what I want to know is can I fix it without changing the resolution and going through each of the fifteen pages, manually adjusting each pixel position? Can I have CSS or HTML or Java detect the resolution of the monitor and shrink the page and pictures accordingly, while still keeping the page centered?

Here's a section of my code:

Oh, and if that's not possible is there a way to shrink pictures (with %) using CSS instead of going into photoshop and manually shrinking each photo for the lower resolution I'm being marked on?

Thanks for the advice, it really helped. I talked to my teacher about it, he said he's only marking how it looks in 800x600. There's only one more problem; I've got the positions and images to adjust dynamically to the size of the browser, but I have no idea how to do it with the font sizes. If you could give me an HTML or CSS code to dynamically adjust the fonts, I'm set. Thanks again.

Answer 1

You can resize images in HTML, by specifying the width and height in the img tag, e.g.:

This would require changing each img tag on each page, but it's easier than resizing all the images in photoshop.

As for the absolute positioning... sorry dude but I think you're going to have to change each pixel value. There is, however, one thing you can do to make it less terrible. You can specify all your sizes in percentages rather than pixels. If you make your box 50% wide (CSS -> width : 50%) instead of a number of pixels, then it will resize with the screen.

You could always explain the situation to your teacher and see if there's anything that they can do - you never know, they may be sympathetic!

Well done for trying CSS - it's a real pain to use. I'm a competent programmer and i'm constantly being annoyed by how difficult CSS is sometimes.

Good luck with it, I hope it works out ok in the end.


~~~
Got some time to spare? Come play free online games. Even if you're busy, you deserve a break. It'll only take a minute... or two?
http://www.cygnetgames.co.uk

Answer 2

Fonts dynamically adjust by coding them as em units instead of px. (That way, anyway, they adjust to what the person viewing the web page has specified for her/his default screen print size...if you intend to be humane about it).

As for pix, sometimes you can get away with, merely specifying a different size. For example, say, your original image is 100px tall and 200px wide. Sometimes you can get away with specifying the
As for targeting and trying to force a web page into a certain resolution screen (which sort of means, trying to force the viewer's screen to reset its own resolution...que no?) isn't that a sort of dream-the-impossible-dream? For example, what if, I've called up your website, and my normal resolution is 1280 by 800, and you set it to something else, and my session is interrupted before your website gets a chance to reset my resolution back to what it was? That's a major hassle for me! Unfair!

Answer 3

hi examine if there are any pictures that have a greater width or long text textile devoid of any areas. as an occasion in case you have a photograph width 700px interior the 1st div, in greater decision the 1st div won't overlap on the 2d, yet in a decrease decision, the 1st div gets prolonged till at last the image width. it is same for the Texts. If there are no areas and if its long text textile, it could disturb your layout. it is an assumption. i'm uncertain.