...

View Full Version : How do i autosize my webpage to fit the viewers resolutoin



spiker12
03-07-2005, 09:43 PM
How do i autosize my webpage to fit the viewers resolutoin?

_Aerospace_Eng_
03-07-2005, 10:31 PM
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

BigPete
03-07-2005, 11:52 PM
<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!) :p

spiker12
03-08-2005, 12:37 AM
when i do that i screws everything up should i show u the html?

_Aerospace_Eng_
03-08-2005, 03:20 AM
yeah that would help

spiker12
03-08-2005, 03:33 AM
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>

_Aerospace_Eng_
03-08-2005, 03:52 AM
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

spiker12
03-08-2005, 04:06 AM
www.activedisposal.com

_Aerospace_Eng_
03-08-2005, 07:09 AM
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 (http://home.austin.rr.com/fairpoolerz/trucks.zip), and there are also only a total of about 10 images images

canadianjameson
03-08-2005, 05:08 PM
here, this is what you want ( i think )



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

_Aerospace_Eng_
03-08-2005, 06:40 PM
that just makes the window fullscreen, i think they wanted the layout to be more fluid



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum