Website can't adapt other people's resolution! Help!

[ddrultramix]

I always use 1280x1024 on my monitor and I realize not everyone has that. I've noticed on every website I go to, every site fit's any of my resolutions no matter what they are. How can I enable m 1280x1024 website to adapt to a users resolution, which could be 800x600 or anything else. I look at my site on my computer and it looks fine. Then when I go to another computer and look at it (as the other computer monitor is 1024x768 all of my text, pictures, etc, are way off the screen.

[terrawolf]

Well it depends on the way you have built your website, but I would start with these articles:

http://www.alistapart.com/articles/elastic

You should always remember though (when designing and coding your websites) that the most common screen resolutions are 1024x768 and 800x600... if you keep this in mind then you should never go wrong

[ddrultramix]

My monitor cant go with 1024x768 and 800x600 is so big! I use 1280x1024 so I can easily work on a massive screen. Isnt there some sort of script or html I can insert into my site to make it fit any screen? Some one said put the entire site in a table at 100% (dont know what that means, i do know what a table is though) and by doing this, the website can be viewed anywhere. Is that true? I dont need to make a seperate site for every resolution do I? That would take years.

[felgall]

What you need to do is to design your site so that it adjusts itself to fit the resolution of the screen on which it is being displayed. To do this you should use percentages rather than fixed widths for columns and perhaps specify min-width and max-width. You could also set uo the page using a small version of images and use Javascript to replace them with larger sized ones if the available space in the browser window is larger than a certain size.

[ddrultramix]

Ok. That in a way makes sense. I know a lot about computer's except when it comes to web design. If it helps, i'm using macromedia dreamweaver 8 and I have changed my monitor resolution from 1280x1024 to 800x600. (everything is HUGE!) So what your saying is.... I'm still not exactly sure.

[terrawolf]

My monitor cant go with 1024x768 and 800x600 is so big!

The problem is that other web users monitors can... when you're designing for the web and your website is going to be viewed by people other than yourself, you need to be able to compensate for at least some other users - even if you don't use it 800x600 might seem absolute HUGE to you, but it's still one of the most used screen resolutions around.

So what your saying is.... I'm still not exactly sure.

ddrultramix, make a new HTML web page and put the following in the body tags:

<div style="background: #000; color: #fff; width: 100%; height: 10px;">Hi</div>
<div style="background: #000; color: #fff; width: 1024px; height: 10px;">Hi</div>

Then have a look at the differences when you start to resize your web browser.

Notice how the first div will scale to the width of the browser, whereas the other one won't?

[ddrultramix]

I understand that but what's the point?I got 2 Hi's. Also, I realized that the only time my information goes off center from the center of the webpage is when I use layers. So how can I tell the program to keep layers on the center or keep them from moving when the resolution changes?

[terrawolf]

I understand that but what's the point?

The point is that you're not the only person viewing your website. If a person can't view your website correctly, they're not going to waste time scrolling, they're going to go elsewhere. People who use 1280x1024 resolutions are a tiny minority, so that's a huge amount of traffic you're potentially saying "goodbye" to.

Also, I realized that the only time my information goes off center from the center of the webpage is when I use layers. So how can I tell the program to keep layers on the center or keep them from moving when the resolution changes?

Try using: margin: 0 auto; in your style definition.

[ddrultramix]

where is that (style margin?)

[terrawolf]

<div id="myobject" style="width: 50%; margin: 0 auto;">My object</div>

[ddrultramix]

Shucks. I think im doing it wrong. But I did find something out. After converting the layer into a table, it works great and wherever I place it now, it appears in the same place and same when I change my resolution. Only problem now is how to move the converted layer. I put the cursor behind it and press the spacebar and it doesnt move! I try tabbing it and it wont move. It's so stubborn. How can I move this converted layer? The only way its moving now is if I backspace it and it goes up or press enter behind it and it goes down but it wont go left to right.