Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do i autosize my webpage to fit the viewers resolutoin

    How do i autosize my webpage to fit the viewers resolutoin?

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    user percentages for widths and not pixels, or you can find a screen resolution redirect script but then youwould need to make like 4 different pages one for each of the common resolutions

  • #3
    New Coder
    Join Date
    Mar 2005
    Location
    Pennsylvania, USA
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <table>
     <tr>
      <td width="50%">Hello</td>
      <td width="30%">Hello again</td>
      <td width="20%">Hi there</td>
     </tr>
    </table>
    would create a table with 3 columns that completely fill up the screen.
    However, if someone comes along with a really large resolution, your page will be stretched out really bad and it could look pretty nasty depending on the layout of your page . As for me, I prefer to create my pages to be compatible with an 800x600 resolution (normally 750px wide to accomodate the scrollbar). People with larger resolutions see blank space (big whoop!)

  • #4
    New Coder
    Join Date
    Mar 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    when i do that i screws everything up should i show u the html?

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    yeah that would help

  • #6
    New Coder
    Join Date
    Mar 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_
    yeah that would help
    <HTML>
    <HEAD>
    <TITLE>ActiveDisposalCo. Call Us Toll Free (866) 711-DUMP</TITLE>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_reloadPage(init) { //reloads the window if Nav4 resized
    if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
    else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    //-->
    </script>
    <style type="text/css">
    <!--
    .style1 {color: #FFFFFF}
    -->
    </style>
    </HEAD>
    <BODY BGCOLOR=#C4C9D3 LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
    <!-- ImageReady Slices (newactivedi.psd) -->
    <div id="Layer1" style="position:absolute; visibility:hidden; left:287px; top:471px; width:0px; height:2px; background-color:#E0DFE3; layer-background-color:#E0DFE3; border:1px none #000000; z-index:1"></div>
    <div id="Layer2" style="position:absolute; left:211px; top:242px; width:153px; height:418px; background-color:#FFFFFF; layer-background-color:#FFFFFF; border:1px none #000000; z-index:2">
    <p></p>
    <div align="left">
    <p><span class="style1"></span><img src="/IMG_0145.gif" width="150" height="113"></p>
    <p><img src="/IMG_0192.gif" width="150" height="113"></p>
    <p><img src="/IMG_0194.gif" width="150" height="113"></p>
    </div>
    </div>
    <div id="Layer3" style="position:absolute; left:35px; top:335px; width:123px; height:181px; background-color:#FFFFFF; layer-background-color:#FFFFFF; border:1px none #000000; z-index:3">We are proud announce that we now have a website! </div>
    <div id="Layer4" style="position:absolute; left:368px; top:243px; width:403px; height:414px; background-color:#FFFFFF; layer-background-color:#FFFFFF; border:1px none #000000; z-index:4">
    <p>&nbsp;</p>
    <p>Active Disposal Co. is a family owned and operated roll-off and disposal business. We have the perfect plans to fit your roll-off needs as well as your budget. Are you sick of waiting for your dumpster to be picked up while its over flowing with garbage? Active Disposal Co. will pick-up your dumpster within hours of your call, guaranteed. For quality service and products at your construction site, remember the purple dumpster. We serve Chicago and surrounding suburbs. Contact us toll free at (866) 711-DUMP.</p>
    </div>
    <TABLE WIDTH=770 BORDER=0 CELLPADDING=0 CELLSPACING=0>
    <TR>
    <TD COLSPAN=11>
    <IMG SRC="images/newactivedi_01.gif" WIDTH=770 HEIGHT=1 ALT=""></TD>
    <TD>
    <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
    </TR>
    <TR>
    <TD ROWSPAN=10>
    <IMG SRC="images/newactivedi_02.gif" WIDTH=2 HEIGHT=78 ALT=""></TD>
    <TD COLSPAN=10>
    <IMG SRC="images/newactivedi_03.gif" WIDTH=768 HEIGHT=33 ALT=""></TD>
    <TD>
    <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=33 ALT=""></TD>
    </TR>
    <TR>
    <TD COLSPAN=10>
    <IMG SRC="images/newactivedi_04.gif" WIDTH=768 HEIGHT=3 ALT=""></TD>
    <TD>
    <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=3 ALT=""></TD>
    </TR>
    <TR>
    <TD COLSPAN=2>
    <IMG SRC="images/newactivedi_05.gif" WIDTH=182 HEIGHT=1 ALT=""></TD>
    <TD COLSPAN=3 ROWSPAN=3>
    <IMG SRC="images/newactivedi_06.gif" WIDTH=74 HEIGHT=3 ALT=""></TD>
    <TD COLSPAN=3>
    <IMG SRC="images/newactivedi_07.gif" WIDTH=176 HEIGHT=1 ALT=""></TD>
    <TD ROWSPAN=7>
    <a href="/contact.html"><IMG SRC="images/newactivedi_08.gif" ALT="" WIDTH=81 HEIGHT=40 border="0"></a></TD>
    <TD>
    <IMG SRC="images/newactivedi_09.gif" WIDTH=255 HEIGHT=1 ALT=""></TD>
    <TD>
    <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
    </TR>
    <TR>
    <TD ROWSPAN=7>
    <IMG SRC="images/newactivedi_10.gif" WIDTH=161 HEIGHT=41 ALT=""></TD>
    <TD ROWSPAN=8>
    <IMG SRC="images/newactivedi_11.gif" WIDTH=21 HEIGHT=42 ALT=""></TD>
    <TD COLSPAN=3>
    <IMG SRC="images/newactivedi_12.gif" WIDTH=176 HEIGHT=1 ALT=""></TD>
    <TD ROWSPAN=8>
    <IMG SRC="images/newactivedi_13.gif" WIDTH=255 HEIGHT=42 ALT=""></TD>
    <TD>
    <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
    </TR>
    <TR>
    <TD COLSPAN=2>
    <IMG SRC="images/newactivedi_14.gif" WIDTH=99 HEIGHT=1 ALT=""></TD>
    <TD ROWSPAN=4>
    <a href="/containersizes.html"><IMG SRC="images/newactivedi_15.gif" ALT="" WIDTH=77 HEIGHT=37 border="0"></a></TD>
    <TD>
    <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
    </TR>
    <TR>
    <TD COLSPAN=2>
    <a href="/index.html"><IMG SRC="images/newactivedi_16.gif" ALT="" WIDTH=72 HEIGHT=33 border="0"></a></TD>
    <TD COLSPAN=2 ROWSPAN=2>
    <a href="/aboutus.html"><IMG SRC="images/newactivedi_17.gif" ALT="" WIDTH=93 HEIGHT=35 border="0"></a></TD>
    <TD ROWSPAN=6>
    <IMG SRC="images/newactivedi_18.gif" WIDTH=8 HEIGHT=40 ALT=""></TD>
    <TD>
    <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=33 ALT=""></TD>
    </TR>
    <TR>
    <TD COLSPAN=2 ROWSPAN=5>
    <IMG SRC="images/newactivedi_19.gif" WIDTH=72 HEIGHT=7 ALT=""></TD>
    <TD>
    <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=2 ALT=""></TD>
    </TR>
    <TR>
    <TD COLSPAN=2 ROWSPAN=4>
    <IMG SRC="images/newactivedi_20.gif" WIDTH=93 HEIGHT=5 ALT=""></TD>
    <TD>
    <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
    </TR>
    <TR>
    <TD ROWSPAN=3>
    <IMG SRC="images/newactivedi_21.gif" WIDTH=77 HEIGHT=4 ALT=""></TD>
    <TD>
    <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
    </TR>
    <TR>
    <TD ROWSPAN=2>
    <IMG SRC="images/newactivedi_22.gif" WIDTH=81 HEIGHT=3 ALT=""></TD>
    <TD>
    <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=2 ALT=""></TD>
    </TR>
    <TR>
    <TD COLSPAN=2 ROWSPAN=2>
    <IMG SRC="images/newactivedi_23.gif" WIDTH=163 HEIGHT=149 ALT=""></TD>
    <TD>
    <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
    </TR>
    <TR>
    <TD COLSPAN=9>
    <IMG SRC="images/newactivedi_24.gif" WIDTH=607 HEIGHT=148 ALT=""></TD>
    <TD>
    <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=148 ALT=""></TD>
    </TR>
    <TR>
    <TD COLSPAN=11>
    <IMG SRC="images/newactivedi_25.gif" WIDTH=770 HEIGHT=4 ALT=""></TD>
    <TD>
    <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=4 ALT=""></TD>
    </TR>
    <TR>
    <TD COLSPAN=4>
    <IMG SRC="images/newactivedi_26.gif" WIDTH=202 HEIGHT=468 ALT=""></TD>
    <TD COLSPAN=7>
    <IMG SRC="images/newactivedi_27.gif" WIDTH=568 HEIGHT=468 ALT=""></TD>
    <TD>
    <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=468 ALT=""></TD>
    </TR>
    <TR>
    <TD>
    <IMG SRC="images/spacer.gif" WIDTH=2 HEIGHT=1 ALT=""></TD>
    <TD>
    <IMG SRC="images/spacer.gif" WIDTH=161 HEIGHT=1 ALT=""></TD>
    <TD>
    <IMG SRC="images/spacer.gif" WIDTH=21 HEIGHT=1 ALT=""></TD>
    <TD>
    <IMG SRC="images/spacer.gif" WIDTH=18 HEIGHT=1 ALT=""></TD>
    <TD>
    <IMG SRC="images/spacer.gif" WIDTH=54 HEIGHT=1 ALT=""></TD>
    <TD>
    <IMG SRC="images/spacer.gif" WIDTH=2 HEIGHT=1 ALT=""></TD>
    <TD>
    <IMG SRC="images/spacer.gif" WIDTH=91 HEIGHT=1 ALT=""></TD>
    <TD>
    <IMG SRC="images/spacer.gif" WIDTH=8 HEIGHT=1 ALT=""></TD>
    <TD>
    <IMG SRC="images/spacer.gif" WIDTH=77 HEIGHT=1 ALT=""></TD>
    <TD>
    <IMG SRC="images/spacer.gif" WIDTH=81 HEIGHT=1 ALT=""></TD>
    <TD>
    <IMG SRC="images/spacer.gif" WIDTH=255 HEIGHT=1 ALT=""></TD>
    <TD></TD>
    </TR>
    </TABLE>
    <!-- End ImageReady Slices -->
    </BODY>
    </HTML>

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    its going to be tough, because you used an image and sliced it up, your images wont layout the way you want them to, you may need to make a small image that is about 1px in width and let it repeat, is there a way to post your coding on a site anywhere? so we can see what the layout looks like and see what can and can't be a background image

  • #8
    New Coder
    Join Date
    Mar 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    okay here u go i recoded your layout it now resizes to fit any resolution for the most part. Rather than the code being 197 lines i got it down to 37 lines, so that means a slight faster page load time, i made the header image one image and made an image map, i would attach the zip file but its too large, i can email it to you or you can download it here, and there are also only a total of about 10 images images

  • #10
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    here, this is what you want ( i think )

    Code:
    <script language="JavaScript1.2">
    <!--
    //
    top.window.moveTo(0,0);
    if (document.all) {
    	top.window.resizeTo(screen.availWidth,screen.availHeight);
    	}
    else if (document.layers||document.getElementById) {
    	if (top.window.outerHeight<screen.availHeight||top.window.outerWidth<screen.availWidth){
    	top.window.outerHeight = screen.availHeight;
    	top.window.outerWidth = screen.availWidth;
    	}
    }
    //-->
    </script>
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    that just makes the window fullscreen, i think they wanted the layout to be more fluid


  •  

    Posting Permissions

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