CSS & Challenging Web Design Problem

[bromdog]

I am trying to create a web site that should (only) fill up the entire effective area of the (maximized) browser. This effective area is also known as the viewport and excludes elements like scrollbars and toolbars. Using this design no scroll bars will show up at the right site of the web page. It seems quite difficult to realize this design for all common monitor resolution (1024 x 768, 1280 x 800, 1680 x 1050 and 1280 x 1024) because of the picture in the right top corner.

The relative size of the picture compared to the rest of the web page will change when using different monitor resolution. For example, its width may be almost 50% of the viewport width when using a relatively low resolution, but its width may be only 20% of the viewport width when using a relatively high resolution. This will mean that the orange area will get too big.

Is it a good idea to create different image sizes for frequently used monitor resolutions and then use Javascript to load the right image size?

I would like to use DIV to create the gray area below the picture. This area should be exactly as width as the picture. Also it should fill up the rest of the page vertically. I guess it is not quite straightforward to realize this, because of the (variable) height of the picture above it.

Creating unique web designs for different monitor resolutions is not an option, because Javascript redirects will not work with Google's indexing.

Let me know what you think.

Please take a look at the picture below to get an impression:

[godofreality]

Originally Posted by bromdog

Is it a good idea to create different image sizes for frequently used monitor resolutions and then use Javascript to load the right image size?

actually what i would do is make a single image be larger than it should ever have to be based on the size of the largest common monitor and how much space u need it to take up so lets say a 1080p monitor or 1920*1080 and lets say the image should always be 50% of the width and 50% of the height so the image should be 969*540

then from here i would use javascript to automatically resize the image based on the width/height of the screen

here is a psuedo-code example and will not actually work in this context

<script type="text/javascript">
var image= document.getElementById('theImg');
image.style.width = (screen.width/2)+"px";
image.style.height = (screen.height/2)+"px";

dividing by 2 bcuz 50% is half so dividing by 2 gives me half

the only problem with using the method i mentioned is that there is not a cross-browser simple method to do this and u will need to use a browser detection script and use the appropriate screen methods from there since IE has to be difficult

[bromdog]

Thanks for your reply.

There is another thing I would like to ask. You are referring to screen width. Is this the total screen width or the width of the viewport?

For example, if one would like to know the height of the web page that will be shown by the browser, then toolbars etc. must be excluded. Then you need another javascript function.

[godofreality]

depends on the method used to get your measurements and that browser u are using http://www.howtocreate.co.uk/tutoria.../browserwindow

[bromdog]

Thanks for your input. The problem is solved.