Resolutions

[Steve25]

How can you make your website have the same look/layout in all resolutions? My main resolution is 1280 x 1024. When changing to 1024 x 768 the page is completely screwed up. The text has been thrown to the right off the page area, the navigation has gone off on one and the sider bars have shifted as well. Any help on this?

[ryanbutler]

Flexible or fluid width would be the only way.

[Steve25]

Here's an example of a line that goes down the left side, which moves around depending on the resolution.

position: absolute;
top: 0px;
left: 287px;
width: 2px;
height: 840px;
background: #000000;

[Eye for Video]

position: absolute;
That will always be a problem. Can be used but now it must be put inside a <div> which is positioned relative to resolution.
EfV

[Stephen Philbin]

Here are a few pretty simple guidelines I use to help keep pages looking decent on most screens.


Don't try to be too strict about having everything exactly the same at different resolutions.
Try to have the dimensions of the majority of your elements set in either relative terms, or not at all.
Only set an element's size in pixels if it is not going to be too big.
To work out rougly how big "too big" is, Imagine the user has a monitor with a resolution of 800x600. Then think about how much of that space the element should have. For something like a navigation menu, this won't be a huge proportion. For an important form, it's likely to be a significant amount.


Other people may well have better advice, but I find them helpful.

[Charles]

How can you make your website have the same look/layout in all resolutions? Publish your page in PDF. HTML is supposed to be different on different platforms. If that scares or annoys you then HTML is the wrong medium for you. If it excites you than you have a long a productive path before you. The trick is to create something that, while different on every platform, always works well.

[Steve25]

The css is used in div's in the html code or is that not what you mean?

I don't mind if the page becomes stretched or anything on different resolutions but when everything is totally unaligned and doesn't look the same that's a problem

[Stephen Philbin]

You'd probably find it easier to manage your CSS by having it in a seperate file and linking to it. Not specifying the width of a div element (or any block-level element) will allow it to stretch and squash withought alignments going all over the place.

[Steve25]

That is what i do :) all my css and javascript code is held in seperate files so for this one page i have 3 files linking to it. The div is all controlled by the css

[Stephen Philbin]

I've just noticed that your CSS looks like your trying to use the div to create a vertical line. Rather than have a div for that purpose alone, you should be able to get the effect you want simply by setting the right border of the left element or the left border of the right element.

A link to the page you're having a problem with would help a lot.

[Steve25]

Sorry i can't really give you a link because it isn't up yet it is still being built. Here is a bit of css that is fine whatever resolution is used on the website

background: #630000;
width: 680px;
height: 100px;
margin: auto;

This is the main body of the website. The head, navigation bar and body seem to be fine but the text, footer and margins are all thrown off to the right