Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: Auto resizing web page according to screen resolution

  1. #1
    Join Date
    Apr 2010
    Posts
    33
    Thanks
    7
    Thanked 1 Time in 1 Post

    Default Auto resizing web page according to screen resolution

    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..............???

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

  4. #4
    Join Date
    Mar 2013
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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?

  5. #5
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,363
    Thanks
    31
    Thanked 140 Times in 135 Posts
    Blog Entries
    32

    Default

    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:
    Code:
    <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:
    Code:
    <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.

  6. #6
    Join Date
    Mar 2013
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

  7. #7
    Join Date
    Jan 2009
    Location
    NH
    Posts
    353
    Thanks
    51
    Thanked 9 Times in 9 Posts

    Default

    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

  8. #8
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,363
    Thanks
    31
    Thanked 140 Times in 135 Posts
    Blog Entries
    32

    Default

    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.

  9. #9
    Join Date
    Mar 2013
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by mlegg View Post
    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?

  10. #10
    Join Date
    Mar 2013
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by molendijk View Post
    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •