Go Back   CodingForums.com > :: Client side development > HTML & CSS
Reload this Page How do i autosize my webpage to fit the viewers resolutoin

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 03-07-2005, 09:43 PM   PM User | #1
spiker12
New Coder

 
Join Date: Mar 2005
Posts: 12
Thanks: 0
Thanked 0 Times in 0 Posts
spiker12 is an unknown quantity at this point
How do i autosize my webpage to fit the viewers resolutoin
How do i autosize my webpage to fit the viewers resolutoin?
spiker12 is offline   Reply With Quote
Old 03-07-2005, 10:31 PM   PM User | #2
_Aerospace_Eng_
Supreme Master coder!


 
_Aerospace_Eng_'s Avatar
 
Join Date: Dec 2004
Location: In a place far, far away...
Posts: 19,293
Thanks: 2
Thanked 1,044 Times in 1,020 Posts
_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light
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
_Aerospace_Eng_ is offline   Reply With Quote
Old 03-07-2005, 11:52 PM   PM User | #3
BigPete
New Coder

 
Join Date: Mar 2005
Location: Pennsylvania, USA
Posts: 57
Thanks: 0
Thanked 0 Times in 0 Posts
BigPete is an unknown quantity at this point
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!)
BigPete is offline   Reply With Quote
Old 03-08-2005, 12:37 AM   PM User | #4
spiker12
New Coder

 
Join Date: Mar 2005
Posts: 12
Thanks: 0
Thanked 0 Times in 0 Posts
spiker12 is an unknown quantity at this point
when i do that i screws everything up should i show u the html?
spiker12 is offline   Reply With Quote
Old 03-08-2005, 03:20 AM   PM User | #5
_Aerospace_Eng_
Supreme Master coder!


 
_Aerospace_Eng_'s Avatar
 
Join Date: Dec 2004
Location: In a place far, far away...
Posts: 19,293
Thanks: 2
Thanked 1,044 Times in 1,020 Posts
_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light
yeah that would help
_Aerospace_Eng_ is offline   Reply With Quote
Old 03-08-2005, 03:33 AM   PM User | #6
spiker12
New Coder

 
Join Date: Mar 2005
Posts: 12
Thanks: 0
Thanked 0 Times in 0 Posts
spiker12 is an unknown quantity at this point
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>
spiker12 is offline   Reply With Quote
Old 03-08-2005, 03:52 AM   PM User | #7
_Aerospace_Eng_
Supreme Master coder!


 
_Aerospace_Eng_'s Avatar
 
Join Date: Dec 2004
Location: In a place far, far away...
Posts: 19,293
Thanks: 2
Thanked 1,044 Times in 1,020 Posts
_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light
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
_Aerospace_Eng_ is offline   Reply With Quote
Old 03-08-2005, 04:06 AM   PM User | #8
spiker12
New Coder

 
Join Date: Mar 2005
Posts: 12
Thanks: 0
Thanked 0 Times in 0 Posts
spiker12 is an unknown quantity at this point
www.activedisposal.com
spiker12 is offline   Reply With Quote
Old 03-08-2005, 07:09 AM   PM User | #9
_Aerospace_Eng_
Supreme Master coder!


 
_Aerospace_Eng_'s Avatar
 
Join Date: Dec 2004
Location: In a place far, far away...
Posts: 19,293
Thanks: 2
Thanked 1,044 Times in 1,020 Posts
_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light
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
_Aerospace_Eng_ is offline   Reply With Quote
Old 03-08-2005, 05:08 PM   PM User | #10
canadianjameson
Senior Coder

 
Join Date: Jul 2003
Location: My pimped-out igloo in Canadia
Posts: 1,966
Thanks: 36
Thanked 0 Times in 0 Posts
canadianjameson is an unknown quantity at this point
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 :)
canadianjameson is offline   Reply With Quote
Old 03-08-2005, 06:40 PM   PM User | #11
_Aerospace_Eng_
Supreme Master coder!


 
_Aerospace_Eng_'s Avatar
 
Join Date: Dec 2004
Location: In a place far, far away...
Posts: 19,293
Thanks: 2
Thanked 1,044 Times in 1,020 Posts
_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light
that just makes the window fullscreen, i think they wanted the layout to be more fluid
_Aerospace_Eng_ is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 11:00 AM.
Advertisement
Log in to turn off these ads.