Resolution Independance??

[Timmy_j]

Hey all,

im currently creating a website for my dads company and its going pretty good. Im only a beginner and can really only create web pages in design view in dreamweaver.

Ive come across one problem though...
Since im creating the webpage in a 1024x768 resolution, if someone else goes to view it with a higher resolution, say 1280x800, then theres this huge white gap down the side.
Ive read that when designing you should create your graphics with every resolution in mind, but i didnt even think of that, and dont really want to go and create them all again.

So i heard of this javascript code that you can use which basically zooms your page according to a set resolution that you specify.

This is the code:

window.onload = check_width

function check_width() {
var correctwidth=1024;
// You can personalize "correctwidth" according to your layout.

if (screen.width!=correctwidth) {
document.body.style.zoom = screen.width / correctwidth;
}
}

however i dont know where to insert it :P and even when i think ive done it right it still doesnt work.

If anyone has any ideas could you help me out.
Better yet if theres just a function in dreamweaver that enables this that would be even better.

Thanks

[Redcore]

I always design websites with 800x600 resolution and center it if the design is inclusive (meaning it wouldn't look right to have it left-justified).

Sounds like you should be changing the color of your background though...right click on your page (in design view) and go to "Page Properties..." at the bottom. It will start off in the "Appearance" tab - where you can define your background color. So that big white gap will be a big colored gap that better matches the color of your layout.

As far as this code you posted, can you provide the link where you got it from? Then I'll test it out.

[devil lady]

This may help http://smartwebby.com/web_site_desig...esolutions.asp It's often better to work in percentages, they will stretch or shrink to fit any resolution.

[Timmy_j]

K well heres the link for the code that i have:

http://digilander.libero.it/indipendent_res/faq.htm

As for the 800x600 resolution and using a fill colour for the background,
well that isnt really an option for me as i have designed the background image myself, and therefore only fits a 1024x768 screen size. Using a fill colour would mess up the background and really doesnt overcome the issue that the page has been resized.

With the smartwebby.com site, i understand that by setting the width as 100% then that overcomes the problem of screen size as it resizes the table to fit. So if i were to create a table that was the size of my page, and just fit everything inside it, and set it to 100% width, would this overcome the problem??
If so, im not really code-smart, so could someone tell me what the code would be and where to put it :P
(I create pages in the design view >_<)

thanks for the help so far
Tim

[gamerman0203]

deffinatley follow redcore's suggestion. Design for 800x600 and that will allow nearly all visitors to see it. Centering the whole site will also be an improvement.

[Redcore]

I've been messing around with this JS for awhile now and I'm not really a fan of it.

Just looking at the example page it doesn't expand the layout to my resolution (1280x1024). Anyways, if someone with 800x600 resolution is on your site, it's not going to zoom OUT so they can see the page. I don't think it's a very effective way to get where you want to go.

Web design (ESPECIALLY at first) is all about learning the hard way. I've rebuilt some sites half a dozen times because I found a more cleaner/effective way to do things. I still rebuild sites sometimes because I'm not happy with how it's working out. Since this is going to represent your dad's company, it's probably a good idea to optimize it to look as good as you can get it. I had to learn the resolution rule the hard way too.

If this has just been designed in DW, it won't take long at all to get it down to 800 width (you don't have to worry as much about the length because obviously the user can simply scroll down - depending on the application). As a web developer, sometimes I'm hired to take over web sites that are old and ineffective. I run into this kinda stuff quite a bit (various special tricks with JS) and it's typically the first thing I rip out unless it actually works perfectly on every browser and serves a useful purpose.

edit: you can post the pages you're working on here and we can help you optimize it.

[Timmy_j]

OKay then, i knew that javascript didnt work too well :P

So you reckon resize everything for an 800x600 resolution instead??
and then just center eveything??

that actually sounds like a good idea, but what about the background problem??
wont there be white gaps down the sides??

thanks

[Redcore]

If you could post your design, I could give you the best advice for your problem. A background color is normally all you need, but I'd like to take a look and see if you need to make a background image or something that would blend in better.

[Timmy_j]

K well if u wanna check out the website the url is:

www.lockandsecurity.com.au

Its not finished yet by the way:P

And if you want the seperate files ie background and other images let us know and i'll send them to you.

[Redcore]

That's definitely a unique background and creates a bit of challenge in this case. The best way to go about it is finish out the rest of the image rather than cutting it off.

[Timmy_j]

Okay, so just extend the background, and so when it is viewed in a higer resolution it will just show the extended background rather that the white space. But how does that overcome everything not being centered then?? Like if i put everything in a large table, and then just centered it, in a higher resolution it would center the table, but then the banner and logos etc would be on the background instead of the white area....
:S sorry if that seemed confusing :P

[Redcore]

In this case you can't center it unless you get rid of that background image.

[Timmy_j]

Hmmm, well what if i just extend the background for a 1280x1024 resolution, so that way if someone with that resolution views it the page layout will stay the same, but at least the white space will be gone...
Any other smaller resolutions will just see the page as it should be..

[Redcore]

I guess you didn't understand what I meant when I said "The best way to go about it is finish out the rest of the image rather than cutting it off."

I meant expand the image towhere the circle is closed - anything beyond that circle (in the blue part) you can just set the background to that same blue that way you don't have to make the background any bigger than it needs to be.

[Timmy_j]

Ohhh k, yeah i understand now :P thats a good idea, Ill have to start working on that soon :)
Thanks

So other than the hard way are there solutions to automatically fix the scaling issue??
ie html code, options in dreamweaver??

[Redcore]

If there was a reliable way that didn't skew things and worked on every browser, I probably would have been using it more regularly by now :P

[Timmy_j]

lol, okay, well im sure someone will develop something eventually, but i guess its make do with what you have atm :P

[Redcore]

AJAX probably does this - but right now it's still a growing language although it's popularity is growing rapidly. I've been meaning to sit down and learn it, but I've been too busy and when I'm available...I don't really feel like working anymore LOL :P

[Timmy_j]

AJAX, is it a type of browser language , like JS, and PHP??

[Redcore]

It's a hybrid between JavaScript and XML

Read more about it here:
http://en.wikipedia.org/wiki/Ajax_(programming)

Very interesting stuff - and if you have Gmail or have ever used it, you've seen how neat it can be. More and more employers/web firms are looking for PHP/MySQL developers that know AJAX as well...when it's used with PHP/MySQL, the resulting page is highly dynamic and what is known as "rich" since it can make a site so user friendly and useful/efficient.