PDA

View Full Version : Auto resizing web page according to screen resolution



sanduwa
04-22-2010, 04:55 AM
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
04-22-2010, 02:22 PM
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
04-27-2010, 03:36 AM
Let me Google that for you. :) (http://lmgtfy.com/?q=auto+resizing+web+page+according+to+screen+resolution&l=1)

IT Guy
03-04-2013, 05:27 PM
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
03-04-2013, 09:26 PM
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
03-04-2013, 09:42 PM
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
03-04-2013, 09:52 PM
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
03-04-2013, 10:04 PM
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
03-04-2013, 10:06 PM
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
03-04-2013, 10:08 PM
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.

mlegg
03-04-2013, 11:39 PM
It helps you setup a responsive design website. Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

more info: http://en.wikipedia.org/wiki/Responsive_web_design

I just looked at the site link above. You should make a css stylesheet rather than having it all in the html page and link to it in the <head> section

here is an example site I made using responsive design, look at my coding:
* right click on page and choose "view code"

the css is located here: *

IT Guy
03-04-2013, 11:44 PM
It helps you setup a responsive design website. Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

more info: http://en.wikipedia.org/wiki/Responsive_web_design

So it is a program that does the work for me? Thank you but no thanks. Sure that may fix my problem but I'm still left in the dark not knowing how to fix my issue other then, Running a program. I would like to figure out why my CSS positioning is not auto resizing and fix it.

molendijk
03-05-2013, 12:05 AM
OK, I viewed your site. Here's what you have to do to correct the opening page. It took me a while to see what was wrong. You can change the other pages accordingly. If you want more help, you can ask me.
Replace

<h1 style="background-color: lime; text-align: left; border-radius: 20px / 40px; width: 1190px; height: 50px; font-size: 36px"><a style="color: lime">t</a>Mantis Pest Management Services LLC.</h1>
with:

<h1 style="position:relative; left: 0px; background-color: lime; text-align: left; border-radius: 20px / 40px; height: 50px; font-size: 36px"><a style="color: black; margin-left: 5px">Mantis Pest Management Services LLC.</a></h1>
In welcome.css, replace padding: 25px 40px with: padding: 25px 10px;

Remove:

<img style="position: relative; left: 680px; bottom: 300px"; src="http://i1119.photobucket.com/albums/k623/_BW_/image002_zpsddcc1fc6.png" />
and put the following immediately after the opening body tag:

<img style="position: absolute; z-index:1; left: 420px; height:35%; top:-40px" src="http://i1119.photobucket.com/albums/k623/_BW_/image002_zpsddcc1fc6.png">
Replace this line (div that contains the form)

<div style="background-color: black; width: 152px; margin-left: 1000px; margin-top: -110px">
with:

<div style="position: absolute; right:5px; background-color: black; width: 152px; margin-top: -110px">
Finally, replace:

<img class="donateimg"; src="http://i1119.photobucket.com/albums/k623/_BW_/breast-cancer-ribbon_zpsff72d6ef.jpg" /> <img class="donateimg2"; src="http://i1119.photobucket.com/albums/k623/_BW_/breast-cancer-ribbon_zpsff72d6ef.jpg" />
with:

<div style="position: relative; left:100%; width:200px; height:100px; overflow: hidden; margin-left:-400px; margin-top:80px">
<img src="http://i1119.photobucket.com/albums/k623/_BW_/breast-cancer-ribbon_zpsff72d6ef.jpg" > <img src="http://i1119.photobucket.com/albums/k623/_BW_/breast-cancer-ribbon_zpsff72d6ef.jpg" >
</div>

IT Guy
03-05-2013, 01:34 AM
OK, I viewed your site. Here's what you have to do to correct the opening page. It took me a while to see what was wrong. You can change the other pages accordingly. If you want more help, you can ask me.
Replace

<h1 style="background-color: lime; text-align: left; border-radius: 20px / 40px; width: 1190px; height: 50px; font-size: 36px"><a style="color: lime">t</a>Mantis Pest Management Services LLC.</h1>
with:

<h1 style="position:relative; left: 0px; background-color: lime; text-align: left; border-radius: 20px / 40px; height: 50px; font-size: 36px"><a style="color: black; margin-left: 5px">Mantis Pest Management Services LLC.</a></h1>
In welcome.css, replace padding: 25px 40px with: padding: 25px 10px;

Remove:

<img style="position: relative; left: 680px; bottom: 300px"; src="http://i1119.photobucket.com/albums/k623/_BW_/image002_zpsddcc1fc6.png" />
and put the following immediately after the opening body tag:

<img style="position: absolute; z-index:1; left: 420px; height:35%; top:-40px" src="http://i1119.photobucket.com/albums/k623/_BW_/image002_zpsddcc1fc6.png">
Replace this line (div that contains the form)

<div style="background-color: black; width: 152px; margin-left: 1000px; margin-top: -110px">
with:

<div style="position: absolute; right:5px; background-color: black; width: 152px; margin-top: -110px">
Finally, replace:

<img class="donateimg"; src="http://i1119.photobucket.com/albums/k623/_BW_/breast-cancer-ribbon_zpsff72d6ef.jpg" /> <img class="donateimg2"; src="http://i1119.photobucket.com/albums/k623/_BW_/breast-cancer-ribbon_zpsff72d6ef.jpg" />
with:

<div style="position: relative; left:100%; width:200px; height:100px; overflow: hidden; margin-left:-400px; margin-top:80px">
<img src="http://i1119.photobucket.com/albums/k623/_BW_/breast-cancer-ribbon_zpsff72d6ef.jpg" > <img src="http://i1119.photobucket.com/albums/k623/_BW_/breast-cancer-ribbon_zpsff72d6ef.jpg" >
</div>

Damn, that was a awesome and helpful post. Thank you. I'm not sure how much "free time" in your life you have but would you mind having a private conversation with me? I believe there is a lot I could learn from someone with your talents and I'm always looking to get better.

- IT Guy

molendijk
03-05-2013, 10:56 AM
You can contact me here (http://mesdomaines.nu/lesserknownclassicalmusic/index.html?contact.html), but I'm awfully busy right now.