Announcement

Collapse
No announcement yet.

Products in Columns not aligning

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Products in Columns not aligning

    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

    #2
    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

    Comment


      #3
      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.

      Code:
      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
      Norman - www.drillpine.biz
      Edinburgh, U K / Bitez, Turkey

      Comment


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


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

        I've also attached the readme here.


        Norman
        Attached Files
        Norman - www.drillpine.biz
        Edinburgh, U K / Bitez, Turkey

        Comment


          #5
          Smilies removed.

          Comment


            #6
            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
            Norman - www.drillpine.biz
            Edinburgh, U K / Bitez, Turkey

            Comment


              #7
              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*)

              Comment

              Working...
              X