www.webdeveloper.com
Results 1 to 7 of 7

Thread: Different Resolutions

  1. #1
    Join Date
    Jan 2014
    Posts
    7

    Different Resolutions

    Hey all, i'm pretty new to the web dev scene.

    I've been creating a site (nothing of which is spectacular) and when viewing it on other monitors with a resoultion that isn't 1920x1080. The divs all seem
    to move around etc. I've been using pixels, looked on the net and people say use % but i prefer using pixels, is there anything i can do to make it work?

  2. #2
    Join Date
    Mar 2012
    Posts
    1,277
    You have not posted a link or any code to give anyone any idea of what the cause is. E.g.
    - Are you using a CMS, in which case which?
    - Are you hand-crafting the code, in which case what "position:" setting are you using (or are you not setting it)?

    General advice-

    a) Pixels may be preferable to % for columns of text, including vertical nav bars, but you need to use "position: absolute" consistently.

    b) If you want graphics to dynamically re-size with the window (whilst retaining their aspect ratio) - set a % width (not height).

    c) If you want graphics and/or text columns to re-size in steps - use media-specific style sheets, (or media queries).

    If you are not familiar with "position:" or media-specific style sheets, look up a CSS reference like this.

    Note: This may not be the answer you wanted, but there is no substitute for knowing what the CSS is doing, and how to set it up to do what you want.
    Last edited by jedaisoul; 01-12-2014 at 09:55 AM.

  3. #3
    Join Date
    Jan 2014
    Posts
    7
    Hi, thanks for the reply

    Yeah i'm doing this all by myself from scratch. Would the "Position: absolute" solve the problem? or is this due to that im using px?

  4. #4
    Join Date
    Mar 2012
    Posts
    1,277
    Position:absolute allows you to use the parameters top: and bottom:, left: and right: as well as width: and height: to fix the position of divs etc. with respect to the containing div. E.g.

    To have three divs: a fixed height header full width, and one fixed width column beneath it and another occupying the remainder of the space you can use:

    #topdiv {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    background-color:#F00;
    }
    #leftdiv {
    position: absolute;
    top: 150px;
    bottom: 0;
    left: 0;
    width: 200px;
    background-color:#0F0;
    }
    #rightdiv {
    position: absolute;
    top: 150px;
    bottom: 0;
    left: 200px;
    right: 0;
    background-color:#00F;
    }

    If you play around with the parameters, you should get the idea of how it works.
    Last edited by jedaisoul; 01-12-2014 at 02:14 PM.

  5. #5
    Join Date
    Jan 2014
    Posts
    7
    Hey, sorry for the late reply.

    That was really helpful. What CSS would i need for the wrapper? as im hoping this fixes my problem of the divs moving around.

  6. #6
    Join Date
    Mar 2012
    Posts
    1,277
    In principle, this code does not need a wrapper. However, in practice you'd probably want to set minima and maxima for the width, and add "overflow" settings to the boxes. So something like:

    #wrappper {
    position: absolute;
    top:0;
    bottom:0;
    left: auto;
    right: auto;
    max-width: 960px;
    min-width: 480px;
    }

    #topdiv {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    overflow: hidden;
    background-color:#F00;
    }

    #leftdiv {
    position: absolute;
    top: 150px;
    bottom: 0;
    left: 0;
    width: 200px;
    overflow: scroll;
    background-color:#0F0;
    }

    #rightdiv {
    position: absolute;
    top: 150px;
    bottom: 0;
    left: 200px;
    right: 0;
    overflow: scroll;
    background-color:#00F;
    }

    I've not tested the code, so let me know if it does not work as expected...

  7. #7
    Join Date
    Oct 2013
    Posts
    29
    There's no problem with using pixels, just make a container that limits your layout in that position.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles