Auto resizing web page according to screen resolution

[sanduwa]

Hello,
I have seen in many web sites, the size of pages are automatically re-sized according to screen resolution. Generally we create web layout for 800x600 but if we view it in1024x768 then the page open have wide space on right. Is there any kind of coding to overcome this situation.like when we view the page created in 800x600 in 1024x768 resol. Then it automatically re-sized to full screen without having any scroll on browser.

Can any body have the solution..............???

[djr33]

Just use percentage based layouts rather than pixels or other measurements.
<img width="50%">: that will fill half of the screen, at any size
<img width="500px">: that will always fill exactly 500 pixels, if it's too big or if it's too small.


It is also theoretically possible to design a website using pixels and adjust it using Javascript to scale, but that is the same as using percentages (in how it looks) and MUCH harder to do. It also is unreliable. Basically, a good web designer won't need to do that.

[magicyte]

Let me Google that for you.

[IT Guy]

I have been to about 15-20 websites all telling me the same thing you are. Use width="100%" or Body { width: 100%; } even ones who have told me to use style="width: 100%";

That fact is IT DOESN'T work. Idc if you use CSS or do it in the HTML file its self the webpage remains the same! You can see how this is frustrating. So what is the answer now? I have HTML basics I, II, and III under my belt as well ass CSS3 and a little of PHP. Everything I use and all the methods I try only fix the issue for the screen I am working on not for others with smaller or larger screens. So what now?

[molendijk]

The answer depends on how you want to design your pages. Here's just an example. Suppose you want to put the contents of your pages in a centered div whose top should be located at 50 px from the top of your screen and whose left position should be location at 150px from the left of your screen. Then the div could look like this:

<div style="position: absolute; left: 150px; top: 50px; right: 150px; bottom: 50px; overflow: auto; border: 1px solid black; ">
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
</div>

This div will look identical with all screen resolutions.
If you put images on your page, use percentages, for instance:

<img src="http://ancientstandard.com/wp-content/uploads/2012/11/neanderthal-man.gif" style="width: 20%" alt="Neanderthal">

You can also use percentages for your text, for example "font-family: verdana; font-size: 80%".
But, as I said, it all depends on how you want to design your pages. If you provide some info about that, we could give your more details.

[IT Guy]

More information on what I'm doing? Ok, basically here is my issue.

I have just got into webpage design after finishing my HTML and CSS classes. I have made a website with headers, drop down menus, images, and content. On my laptop screen (screen I did the coding and testing on) shows the webpage perfect. My menus are aligned correctly. Everything is where it is supposed to be. Now I hook my laptop up to my 19" desktop monitor and the header no longer goes all the way across the page, the menu is no lined up, the positioning period is off. My setup is as follows:

HTML documents contains all tags and content. CSS document contains all styling. I have put 0 i repeat 0 styling into the HTML document. In my opinion this makes it easier to find what went wrong where and why. So the big issue here is I need my website to "auto" correct its positioning to match whatever the screen size is of the user getting on. Before you tell me how to fix this issue here is what I have already tried:

CSS document ID of wrapper { width: 100% } (Div tags placed around everything inside the BODY of the HTML document)
HTML document style="width: 100%;"
Going through and using width: 100% on all elements (This was a pain)

I have been to over 20 sites, looking for an answer. I have had morons tell me I need Javascript for this task I want done but I know HTML or CSS can do it. What your verdict?

Anymore info you need ask it, thanks.

[mlegg]

look into this http://www.initializr.com/

it incorporates both Twitter Bootstrap and HTML5 Boilerplate


I've been using that method for a while now and it works great on everything I've viewed it on

[molendijk]

Hi again IT Guy,
I'm afraid the info is not specific enough. If you could put a demo of your site online, that would be very helpful. It would allow me to view the source and/or to download it for testing.
Btw, click on 'my family' in my signature (below) to view a site that is (almost) identical with all screen resolutions.

[IT Guy]

look into this http://www.initializr.com/

it incorporates both Twitter Bootstrap and HTML5 Boilerplate


I've been using that method for a while now and it works great on everything I've viewed it on

What's it do? I'm looking at the webpage and other then the About Us part I don't understand what it does?

[IT Guy]

Hi again IT Guy,
I'm afraid the info is not specific enough. If you could put a demo of your site online, that would be very helpful. It would allow me to view the source and/or to download it for testing.
Btw, click on 'my family' in my signature (below) to view a site that is (almost) identical with all screen resolutions.

You may view the site here:

http://mantispmsllc.no-ip.org

I have not set up a DNS A record yet so the IP still displays in the URL. I would be more then happy to get you a copy of my CSS and HTML if you think it would help you.