Different Resolutions

This site is best viewed in a modern browser with JavaScript enabled.

ChuckleBerry

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?

jedaisoul

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.

ChuckleBerry

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?

jedaisoul

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.

ChuckleBerry

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.

jedaisoul

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...

williamforrest

There's no problem with using pixels, just make a container that limits your layout in that position.