CMS Made Simple Forums

Posted: **Fri Apr 04, 2008 9:05 am**

Hi all,

I managed to do this before but i cant find the code i used and its now gone back to the way it was before... I have the main pic on top of 4 thumbnails. When there are only 3 thumbnails uploaded for a product, the thumbnails are not aligning to the left like they used to. It'll only look proper when there's 4 thumbnails there...

Here's the page (i'll need to remove this in a few hours coz i cant risk search engines indexing this page!):

http://www.cashandcarrykitchens.ie/CMSt ... ch-bedroom

The code used for the table layout is:

Code: Select all

<div class="item" align="left">
<table width="100%">
  <tr><td width="258"><h2>{$title}</h2></td><td colspan="4"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50%" align="left"><span style="color:#567784;font-family:Verdana, Arial, Helvetica, sans-serif;font-size: 10px;">Previous: {cms_selflink dir="previous" lang="0" class="relation"}</span></td>
    <td width="50%" align="right"><span style="color:#567784;font-family:Verdana, Arial, Helvetica, sans-serif;font-size: 10px;">Next: {cms_selflink dir="next" lang="0" class="relation"}</span></td>
  </tr>
</table></td>
</tr><td>
  <tr>
  <td width="258" valign="top">
  {section name=at loop=$attrlist}
    <h3>{$attrlist[at].name}:</h3><h5>{eval var=$attrlist[at].key}</h5><br>
    {/section}
{literal}
    <__script__ type="text/javascript">
function repl(img)
   {
   document.item_image.src=img;
   }
    </__script>
{/literal}<br>
<br>
<br>
<br></td>
  <td align="left" colspan="4"><img name="item_image" id="item_image" src="{$image_1_url}" /></td>
</tr>
    <td width="258" valign="bottom"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td align="left" width="8" valign="middle"><img src="modules/Printing/printbutton.gif"></td>
        <td align="left" valign="middle"><span style="color:#567784;font-family:Verdana, Arial, Helvetica, sans-serif;font-size: 10px;">{print goback="false" popup="true" script="true" text="Print this page" class="noprint"}</span></td>
      </tr>
    </table></td>
    <td align="left" width="130">{section name=ind loop=$image_url_array}<a href="javascript:repl('{$image_url_array[ind]}')"><img src="{$image_thumb_url_array[ind]}" /></a></td>
	<td align="left">{/section}</td>
    </tr>
</table>
</div>

Can anyone help me with aligning the thumbnails to the left coz they spread out under the main pic when there are less than 4 thumbnails which looks a bit crappy... thanks for any help!

CMS Made Simple Forums

Item-Table-based layout problems

Item-Table-based layout problems