Products in Columns not aligning

[elfynfire]

I recently downloaded the templates for laying out Products in Columns where you have 3 templates one for the Start, Middle and End product on each row.

This works, but the only thing is that the columns are not aligned together i.e. images do not appear directly below each other.

Has anybody made use of these templates, and have you any help on how to align the columns.

Thanks for your help.

Elfyn

[harlequin]

hi elfyn

if you post the three templates up here I will have a little look for you and then make sure the answer I give is relevant.

Also, do you use a website with pages that are a fixed width, or sized to a percentage?

cheers,

steve q
harlequin domains
www.harlequindomains.com
0800 0832077

[NormanRouxel]

Having 3 templates is a painful way to do things. Here's a Readme that lets you have any number of columns as defined by a single Customvar.

Auto Multi Columns.   
This readme will allow you to lay products out in any number of columns.
The number of columns can be altered by setting a Custom Property.

Replace Act_ProductBody.html with the following:-



<!-- ProductBody HTML begin -->
<!-- Insert HTML for the top of the product body -->

<script language=JavaScript>
<!--
var currentcol = 0;
var colwidth = Math.floor(100 / CUSTOMVAR:NUMCOLS);
// -->
</script>

<div align="right"><a name="sectiontop">
NETQUOTEVAR:PARENTSECTIONSTOP
</a><a name="sectiontop">
<!-- NETQUOTEVAR:TOPLEVELSECTIONSTOP -->
NETQUOTEVAR:SECTIONLISTTOP
NETQUOTEVAR:TOPSECTIONSEPARATOR
NETQUOTEVAR:CARTERRORLISTXML
</a>
NETQUOTEVAR:HIDDENINPUT

<BR>

  <TABLE WIDTH="500" COLS="3" BORDER="0" CELLPADDING="10" CELLSPACING="0" ALIGN="CENTER">

	NETQUOTEVAR:PRODUCTBULK

<script language=JavaScript>
<!--
if ( currentcol != 0 )
 {
 while ( currentcol++ < CUSTOMVAR:NUMCOLS ) document.write('<td width="' + colwidth + '%"></td>');
 document.write('</tr>');
 }
// -->
</script>
  </TABLE>
</div>
<DIV ALIGN="RIGHT"><a name="sectionbottom">
NETQUOTEVAR:SINGLEADD
</a></DIV>
<a name="sectionbottom">NETQUOTEVAR:BOTTOMSECTIONSEPARATOR
NETQUOTEVAR:SECTIONLISTBOTTOM
<!-- NETQUOTEVAR:TOPLEVELSECTIONSBOTTOM -->
</a>
<!-- <DIV ALIGN="CENTER"><a name="sectionbottom">
NETQUOTEVAR:PARENTSECTIONSBOTTOM
</a></DIV> -->
<!-- Insert HTML for the bottom of the product body -->
<!-- ProductBody HTML end -->




Replace Act_ProductLine.html with the following:




<!-- ProductLine HTML begin -->
<!-- Insert HTML for the top of the individual product -->
<!-- NETQUOTEVAR:INCLUDE Act_ProductSeparator.html -->
NETQUOTEVAR:ENDSEPARATOR
NETQUOTEVAR:PRODUCTFORMBEGIN
<script language=JavaScript>
<!--
if ( currentcol++ == 0 ) document.write('<tr><td colspan=3><table border=0><tr>');
document.write('<td width="' + colwidth + '%" valign=top>');
// -->
</script>
<noscript><tr><td width="100%"></noscript>
  <!-- START each product lives in this table - alter below to rearrange items -->
  <table width="100%">
   <tr>
    <td colspan=2>
      <a name="NETQUOTEVAR:PRODUCTANCHOR"><span class="actregular"><b>NETQUOTEVAR:PRODUCTNAME</b></span></a>
      <span class="actxsmall">NETQUOTEVAR:PRODUCTREF
    </td>
   </tr>
   <tr>
    <td valign="TOP" align="CENTER"> NETQUOTEVAR:TEMPLATEBEGINXML NETQUOTEVAR:PRODUCTIMAGE </td>
    <td valign="TOP">  
      NETQUOTEVAR:EXTINFOLINK</span>NETQUOTEVAR:EXTINFOBUTTON
      <br>
      <span class="actxsmall">NETQUOTEVAR:PRODUCTBEGINLINKNETQUOTEVAR:PRODUCTLINKTEXTNETQUOTEVAR:PRODUCTENDLINK
      NETQUOTEVAR:PRICEEXPLANATION </span><br>
      <b>NETQUOTEVAR:PRODUCTPRICE</b>
    </td>
   </tr>
   <tr>
    <td colspan=2>
     NETQUOTEVAR:PRODUCTDESCRIPTION
     <span class="actxsmall">NETQUOTEVAR:OTHERINFOPROMPT </span>
     <span class="actxsmall">NETQUOTEVAR:DATEPROMPT </span>
    </td>
   </tr>
   <tr>
    <td align="LEFT" colspan="2">
     <span class="actxsmall">
     NETQUOTEVAR:CARTERRORXMLNETQUOTEVAR:PRODUCTQUANTITY<br>
     <Actinic:ACTIONS>NETQUOTEVAR:ADDTOCARTBUTTON</Actinic:ACTIONS>
     </span>
     NETQUOTEVAR:TEMPLATEENDXML
    </td>
   </tr>
  </table>
  <!-- END each product lives in this table - alter above to rearrange items -->
 </td>
NETQUOTEVAR:PRODUCTFORMEND
<script language=JavaScript>
<!--
if ( currentcol >= CUSTOMVAR:NUMCOLS )
  {
  document.write('</tr></table></td></tr>');
  currentcol = 0;
  }
// -->
</script>
<noscript></tr></noscript>

 
NETQUOTEVAR:NEXT
<!-- Insert HTML for the bottom of the individual product -->
<!-- ProductLine HTML end -->




Go into Actinic / Advanced / Custom Properties, click the "+" sign 
and create a property called NUMCOLS of type text.  OK out.

Go Design / Options / Site Defaults / Properties,  click the "+" sign
and select NUMCOLS.  Set its value to 3 (for 3 columns, 4 for 4 , etc).
(if using Business uncheck Searchable and check Use as Customvar).

You can set this value on a per Section basis if required by opening the Section, 
selecting Properties and setting it as above.

Norman

[NormanRouxel]

Oops. A smiley has crept into the above post. If you use it please replace the affected line with

<span class="actxsmall">NETQUOTEVAR:DATEPROMPT </span>

I've also attached the readme here.


Norman

[cdicken]

Smilies removed.

[NormanRouxel]

Chris,

Many thanks for fixing that smiley here too.

I was working on something else in the middle of the night when I saw this post from Elfyn. Amazingly, for it was 5am, I realised that this could be accomplished a lot more easily than having different templates for each position and the whole lot was finished in about 15 minutes.

Mind you I didn't wake up today until 3pm!

Norman

[cdicken]

Mind you I didn't wake up today until 3pm

Tsk! It's alright for some isn't it!

Mind you, I totally slept through the Rugby on Sunday morning having had late one on Saturday (errr... doing Actinic stuff of course *cough*)