i seem to have a bit of a problem. I’ve set the table to 100% for the width attribute, but the window stays the same at 1600. How do i go about making the webpage fit into my browser? (Lets say my browser’s width is 1024.)
Also, ignore the main.css. It only has a background attribute on it.
Here’s my code:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="1200" border="0" align="center" cellpadding="0" cellspacing="0" id="page">
<tr>
<td colspan="17">
<img src="images/index_01.png" width="1600" height="39" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="39" alt=""></td>
</tr>
<tr>
<td rowspan="10">
<img src="images/index_02.png" width="57" height="1161" alt=""></td>
<td colspan="5" rowspan="2">
<img src="images/indexpic_01.png" width="668" height="177" alt=""></td>
<td colspan="11">
<img src="images/index_04.png" width="875" height="154" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="154" alt=""></td>
</tr>
<tr>
<td colspan="9" rowspan="2">
<img src="images/index_05.png" width="539" height="44" alt=""></td>
<td rowspan="2">
<img src="images/indexpic_02.png" width="189" height="44" alt=""></td>
<td rowspan="9">
<img src="images/index_07.png" width="147" height="1007" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="23" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/index_08.png" width="668" height="21" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="21" alt=""></td>
</tr>
<tr>
<td rowspan="7">
<img src="images/index_09.png" width="94" height="963" alt=""></td>
<td colspan="14">
<img src="images/indexpic_11.png" width="1302" height="480" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="480" alt=""></td>
</tr>
<tr>
<td colspan="14">
<img src="images/index_11.png" width="1302" height="24" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="24" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index_12.png" width="291" height="60" alt=""></td>
<td rowspan="5">
<img src="images/index_13.png" width="46" height="459" alt=""></td>
<td colspan="3">
<img src="images/index_14.png" width="291" height="60" alt=""></td>
<td colspan="2" rowspan="3">
<img src="images/index_15.png" width="46" height="411" alt=""></td>
<td colspan="4">
<img src="images/index_16.png" width="291" height="60" alt=""></td>
<td rowspan="5">
<img src="images/index_17.png" width="46" height="459" alt=""></td>
<td colspan="2">
<img src="images/index_18.png" width="291" height="60" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="60" alt=""></td>
</tr>
<tr>
<td>
<img src="images/indexpic_05.png" width="291" height="320" alt=""></td>
<td colspan="3">
<img src="images/indexpic_06.png" width="291" height="320" alt=""></td>
<td colspan="4">
<img src="images/indexpic_07.png" width="291" height="320" alt=""></td>
<td colspan="2">
<img src="images/indexpic_08.png" width="291" height="320" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="320" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/index_23.png" width="291" height="79" alt=""></td>
<td colspan="3">
<img src="images/index_24.png" width="291" height="31" alt=""></td>
<td colspan="4">
<img src="images/index_25.png" width="291" height="31" alt=""></td>
<td colspan="2" rowspan="3">
<img src="images/index_26.png" width="291" height="79" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="31" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/index_27.png" width="78" height="48" alt=""></td>
<td colspan="2">
<img src="images/indexpic_09.png" width="213" height="31" alt=""></td>
<td rowspan="2">
<img src="images/index_29.png" width="29" height="48" alt=""></td>
<td colspan="2">
<img src="images/indexpic_10.png" width="109" height="31" alt=""></td>
<td>
<img src="images/indexpic_12.png" width="17" height="31" alt=""></td>
<td>
<img src="images/indexpic_13.png" width="97" height="31" alt=""></td>
<td rowspan="2">
<img src="images/index_33.png" width="85" height="48" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="31" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/index_34.png" width="213" height="17" alt=""></td>
<td colspan="4">
<img src="images/index_35.png" width="223" height="17" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="17" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="57" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="94" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="291" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="46" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="78" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="159" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="54" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="29" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="17" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="92" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="17" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="97" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="85" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="46" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="102" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="189" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="147" height="1" alt=""></td>
<td></td>
</tr>
</table>
</body>
</html>
Anyone can help?
Thanks.
All of your image widths are set explicitly, and they add up to
1601px, which would stretch your table (and page) to fit.Here’s my recommendation: Ditch the images and try to do you layout with actual content (and elements other than tables). You can’t very easily dynamically size this width as it stands now.
If you are dead set on this (and I cringe at the thought) you can convert the pixel widths of all the images into percentage width, and, while you’ll have issues with rounding, you should get a resized layout based on width. But it won’t look pretty.