PDA

View Full Version : Webpage resizing


Walshie
29 Apr 2010, 02:42 PM
Apologies if you've seen this post in another section, I put it in by mistake.

Hi,

After searching the web and trying alot of different things i'm still stuck.

I have a website (www.justclothing.net) and most of the time the resizing works fine and the page displays how it should, like this: http://justclothing.net/Right.JPG

but occasionally the site displays like this: http://justclothing.net/Wrong.JPG

As you can see the page is too wide and a scrollbar appears at the bottom, i need the page to resize correctly every time.

Below is the relevant code, if anyone can point me in the right direction it would be a huge help, as said I've looked all over!

Thanks in advance
Chris :)



<body>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="910" id="table3">
<tr>

<td align="right" height="28">{LOCATION}</td>
</tr>
</table>
</div>

<div align="center">
<table class="table" border="0" cellpadding="0" cellspacing="0" width="910" id="table1">
<tr>
<td>
<div align="left">

<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table2">
<tr>
<td align="left" valign="top" width="1%"><img src="{INSTALLDIR}skins/{SKIN}/styleImages/1pxspacer.gif" width="5" height="94">
</td>
<td align="left" valign="MIDDLE" width="0%"><a href="{HOMELINK}"></a></td>
<td class="topimage" align="left" width="0%"> <div align="left">
<table border="0" cellpadding="0" cellspacing="0" width="0%" id="table10">
<tr>
<td align="left"></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td align="left" valign="top" background="{INSTALLDIR}skins/{SKIN}/styleImages/menu-bg.gif" height="34" colspan="3">
<div align="left">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table4">
<tr>
<td align="left" valign="top"><ul id="homeNav">
<li class="{HOMEPAGELI}"><a href="{HOMELINK}" class="{HOMEPAGELINK}">Home</a></li>
{PAGELINKSTOP}
</ul>
{PAGELINKSTOPSUB}</td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td align="left" valign="top" colspan="3"> <div align="left">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table5">
<tr>
<td align="left" valign="top" width="170"> <div align="left">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table6">
<tr>
<td align="left" valign="top"> <img src="{INSTALLDIR}skins/{SKIN}/styleImages/1pxspacer.gif" width="2" height="1"></td>
<td align="left" valign="top" background="{INSTALLDIR}skins/{SKIN}/styleImages/catleft.gif"><div id="sideNavLeft">{CATEGORIES}{NAVCATEGORIES}{PAGELINKS}</div></td>
</tr>
<tr>
<td align="left" valign="top">&nbsp;</td>

</tr>
</table>
</div></td>
<td align="left" valign="top" width="5"> <img border="0" src="{INSTALLDIR}skins/{SKIN}/styleImages/1pxspacer.gif" width="8" height="1"></td>
<td align="left" valign="top"> <div align="left">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table8">
<tr>
<td align="left" valign="top">{SEARCHPROD}</td>
</tr>
<tr>
<td align="left" valign="top"><div id="content">
{PAGE} {PULLDOWNPROD} {PAGINATION} {ADDLINK}
{SUBNAV} {PRODS}{COMMENTS} {ADDCOMMENTS} {LINKS}
{COMPAREPRODS} {SIMILARPRODS} {PAGINATION} </div></td>
</tr>
<tr>

</tr>
</table>
</div></td>
<td align="left" valign="top" width="8"> <img border="0" src="{INSTALLDIR}skins/{SKIN}/styleImages/1pxspacer.gif" width="8" height="1"></td>
<td align="left" valign="top" width="121"> <div align="left">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table9">
<tr>
<td align="left" valign="top"><div id="sideNavRight">{FEATUREPROD}</div></td>
</tr>
<tr>
<td align="left" valign="top">&nbsp; </td>
</tr>
<tr>
<td align="left" valign="top"><div id="sideNavRight">{POPULARPROD}</div></td>
</tr>
<tr>
<td align="left" valign="top">&nbsp;</td>
</tr>
<tr>
<td align="left" valign="top">{TAGS}</td>
</tr>
<tr>
<td align="left" valign="top">&nbsp;</td>
</tr>
</table>
</div></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td align="center" colspan="3"><a style="text-decoration: none;" href="{INSTALLDIR}sitemap.xml">Sitemap
| </a><a style="text-decoration: none;" href="http://www.Justclothing.net">Copyright
2010 Justclothing.net</a></td>
</tr>
<tr>
<td align="center" colspan="3"><div id="footer">{LINKDIR} {FOOTLINKS}</div>
<br></td>
</tr>
<tr>
<td align="center" colspan="3">{META_KEYWORDS}<br>
<br></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
Ellyn
30 Apr 2010, 12:13 AM
I'm not going to delve too deep here, but here are a couple of tips:

When you give something a width, specify the measurement. If you want it to be in pixels, type width="910px". This might help a bit.

You should have a look into using css for your layouts rather than tables and presentation html. Trust me: your code will be easier to deal with if you do.

Now, if I were to want to center something, and make sure that it stayed the same width as the page resized, here is a simple version of what I'd do.

HTML:


<div id="wrapper">
<div id="content">
<p>Content goes here</p>
</div>
</div>


And then, in my css file:


#wrapper{margin-left: auto; margin-right: auto; width:910px; background-color:teal;}

The automatic left and right margins center it on the page, and I've just put the color and width in so you can see it were you to preview it.

I hope all this helps,

Ellyn