Website compatible for all resolutions (800 x 600, 1024 x 768, 1280x800...)

Is there a code I can insert into my web pages that will enable my website to fit all resolutions?

For example right now it stays on 800x600 but it is ok because I own only a small laptop.

But when I view my website on a relatives wide screen my website is a skinny 600 px wide page right down the center of their screen.

But websites like Yahoo not only automatically fill up wide screen computers, but also automatically adjusts to lap tops etc.

So I am wondering if there is a simple code that can auto adjust all the web pages in my website?

Thanks in advance.

 

You need to make your site either liquid using percentages. Or you have make your container 770px wide to fit resolutions 800x600 -->.

 

I use something called "InstaSitePro" sitebuilder in my website control panel to build my website but there is no option for adjusting page width. The sitebuilder automatically makes it to fit 800x600 so when I do to a wide screen computer my website is still a 800x600 website right down the center.

I can make some manual adjustments to make it liquid but I don't know how to do that. That is why I am wondering if there is a simple code.

 

does the sitebuilder make a page with internal css or external?

if you change your body width to percentages it should readjust it self to whatever resolution and fill the whole screen, no matter what computer. I think

 

Using % as the unit of width of the columns. Px or em makes fixed column layout.

Check
www. dot agecolumn dot com/3_column_div_generator dot htm

 

Don't use a machine to write your code. Then you can set a width, or no width at all, or add pink fairy unicorns to your page. Right now you're trapped in whatever rules this machine has set for you. You need to, like, break free, man.

Your machine is setting a width on a container which holds the entire page. If it doesn't have a width set on it at all, it will be as wide as the viewport.

However you will likely then need some more design tweaks to make the page not look nasty at large widths.

I'm (re)writing these pages (again) but you can check out my imported headerstyles.css for this page, here. That's one example of a page which has a minimum width (so it forces a scrollbar for those with smaller-than 800px wide screens) while letting the width just grow as needed (except for IE6 who doens't know what min-width is... and I don't really know how to work that expression without setting a maximum so IE6 gets a max-width too lawlz).

 

best solutions is to use 'em' instead of using 'px' this enables resizing.

 

If you wish your website to fit all resolutions the most simple way is to use "%" to define the size of your container.

Doing this will keep it the same width thought all screen sizes for example if you set your container to be %60 width then your container will stay %60 width no matter what resolution your are viewing in.

-Matt.

 

Agree with 'Mw_WebDesigns' you should manually edit the current width values with their equal percentage
I know it might be hard for you at the beginning... Good luck though.

 

So, the most common way to do what I think it is that you're trying to do is to use a div 'container' to contain the contents of your page and defining it's width. From your post, it sounds like your sites width is 800px. You would then set the right and left margins to auto. This will keep the 800px in the center of the screen and split the leftover width between the right and the left sides of the page.. allowing it to resize to different resolutions, and even when you grab your browsers resize handle and resize manually.

I created a little info to help another user with a problem regarding a linear gradiant but the basic gist is all there.

http://gamephobic.com/test/bgtest.html

If you'd like, I can implement this across your websites for you. PM me and we can work out a price.

 

min-width:

#container {
	min-width:768px; /* standards compliant browsers */
}

* html #container { /* IE 6/earlier */
	/* 
		state a fallback width if expression fails because
		javascript is disabled
	*/
	width:768px; 
	/* 
		the below expression could set it to auto turning 
		haslayout	off. As such set haslayout so IE redraws
		the element properly on resize of window
	*/
	zoom:1; 
	width:expression:(
		(document.body.clientWidth>800) ? "auto" : "768px"
	);
}

Code (markup):

max-width:

#container {
	min-width:1120px; /* standards compliant browsers */
}

* html #container { /* IE 6/earlier */
	/* 
		state a fallback width if expression fails because
		javascript is disabled
	*/
	width:768px; 
	/* 
		the below expression could set it to auto turning 
		haslayout	off. As such set haslayout so IE redraws
		the element properly on resize of window
	*/
	zoom:1; 
	width:expression:(
		(document.body.clientWidth>1152) ? "1120px" : "auto"
	);
}

Code (markup):

Both:

#container {
	min-width:768px;
	min-width:1120px;
}

* html #container { /* IE 6/earlier */
	width:768px; /* scripting off fallback */
	zoom:1; /* haslayout if expression declares auto */
	width:expression:(
		(document.body.clientWidth>1152) ? "1120px" : (
			(document.body.clientWidth>800) ? "auto" : "768px"
		)
	);
}

Code (markup):

You'll notice I take 32px off to make room for scrollbars and window frames.

As to the topic at hand, I recently answered it the last time it came up (this question comes up just about once every two or three weeks)

 

Hey thanks, I've only ever seen the "both" script and blindly copy-pasta it because I don't jabba da script. So now I have two more to mindlessly copy : )