Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question CSS & Challenging Web Design Problem

    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:

    Last edited by bromdog; 12-27-2009 at 04:32 PM.

  • #2
    Regular Coder godofreality's Avatar
    Join Date
    Jan 2009
    Posts
    234
    Thanks
    1
    Thanked 15 Times in 15 Posts
    Quote Originally Posted by bromdog View Post
    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

    Code:
    <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
    woot found the avatar options...i swear they didn't exist b4

  • #3
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder godofreality's Avatar
    Join Date
    Jan 2009
    Posts
    234
    Thanks
    1
    Thanked 15 Times in 15 Posts
    depends on the method used to get your measurements and that browser u are using http://www.howtocreate.co.uk/tutoria.../browserwindow
    woot found the avatar options...i swear they didn't exist b4

  • #5
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your input. The problem is solved.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •