move description to the right of images

[sheba10]

In the process of getting my images to line up on the left I can't find out what I did to make the description stay below the images, eek!

I'm hoping/guessing this is something simple that I'm missing?

Thanks for any help.

http://ratkiss.net/index.php?main_pa...&products_id=4

[justuspost]

Hi,

Are you looking for a layout like this?

http://milesfiberglass.com/catalog/


Justus

[kobra]

Remove the red entry and might need some css tweaking after

<!--bof Additional Product Images -->
 <div id="productAdditionalImages">

    <div class="additionalImages centeredContent back" style="width:50%;">
      <script language="javascript" type="text/javascript"><!--
document.write('<a href="javascript:popupWindow(\'http://ratkiss.net/index.php?main_page=popup_image_additional&amp;pID=4&amp;pic=0&amp;products_image_large_additional=images/large/bif_01_LRG.jpg\')"><img src="bmz_cache/5/580738cd98dd6ad26ec00a7af3ae0267.image.100x100.jpg" alt="Test" title=" Test " width="100" height="100" style="position:relative" onmouseover="showtrail(\'bmz_cache/6/6a11364cd90c1dd6ac132c7890571fab.image.200x200.jpg\',\'Test\',100,100,200,200,this,89,89,11,11);" onmouseout="hidetrail();"  /><br /></a>');
//--></script>
      <noscript><a href="http://ratkiss.net/index.php?main_page=popup_image_additional&amp;pID=4&amp;pic=0&amp;products_image_large_additional=images/large/bif_01_LRG.jpg" target="_blank"><img src="bmz_cache/5/580738cd98dd6ad26ec00a7af3ae0267.image.100x100.jpg" alt="Test" title=" Test " width="100" height="100" style="position:relative" onmouseover="showtrail('bmz_cache/6/6a11364cd90c1dd6ac132c7890571fab.image.200x200.jpg','Test',100,100,200,200,this,89,89,11,11);" onmouseout="hidetrail();"  /><br /></a></noscript></div>
    <div class="additionalImages centeredContent back" style="width:50%;">

      <script language="javascript" type="text/javascript"><!--
document.write('<a href="javascript:popupWindow(\'http://ratkiss.net/index.php?main_page=popup_image_additional&amp;pID=4&amp;pic=1&amp;products_image_large_additional=images/large/bif_02_LRG.jpg\')"><img src="bmz_cache/7/74c3b4147a0816fd5ae47ac6fbd082f3.image.100x100.jpg" alt="Test" title=" Test " width="100" height="100" style="position:relative" onmouseover="showtrail(\'bmz_cache/b/bbd7320c82ae660faadc1cdf13fcb87c.image.200x200.jpg\',\'Test\',100,100,200,200,this,89,89,11,11);" onmouseout="hidetrail();"  /><br /></a>');
//--></script>
      <noscript><a href="http://ratkiss.net/index.php?main_page=popup_image_additional&amp;pID=4&amp;pic=1&amp;products_image_large_additional=images/large/bif_02_LRG.jpg" target="_blank"><img src="bmz_cache/7/74c3b4147a0816fd5ae47ac6fbd082f3.image.100x100.jpg" alt="Test" title=" Test " width="100" height="100" style="position:relative" onmouseover="showtrail('bmz_cache/b/bbd7320c82ae660faadc1cdf13fcb87c.image.200x200.jpg','Test',100,100,200,200,this,89,89,11,11);" onmouseout="hidetrail();"  /><br /></a></noscript></div>
<br class="clearBoth" />
 
</div>
<!--eof Additional Product Images -->

[sheba10]

I removed the code in red from my tpl product info display.

Can you guide me in the right direction as what I need to tweek in the stylesheet.css possibly?

[kobra]

Checked and the clear both is still there??

<!--bof Additional Product Images -->
 <div id="productAdditionalImages">

    <div class="additionalImages centeredContent back" style="width:50%;">
      <script language="javascript" type="text/javascript"><!--
document.write('<a href="javascript:popupWindow(\'http://ratkiss.net/index.php?main_page=popup_image_additional&amp;pID=4&amp;pic=0&amp;products_image_large_additional=images/large/bif_01_LRG.jpg\')"><img src="bmz_cache/5/580738cd98dd6ad26ec00a7af3ae0267.image.100x100.jpg" alt="Test" title=" Test " width="100" height="100" style="position:relative" onmouseover="showtrail(\'bmz_cache/6/6a11364cd90c1dd6ac132c7890571fab.image.200x200.jpg\',\'Test\',100,100,200,200,this,89,89,11,11);" onmouseout="hidetrail();"  /><br /></a>');
//--></script>
      <noscript><a href="http://ratkiss.net/index.php?main_page=popup_image_additional&amp;pID=4&amp;pic=0&amp;products_image_large_additional=images/large/bif_01_LRG.jpg" target="_blank"><img src="bmz_cache/5/580738cd98dd6ad26ec00a7af3ae0267.image.100x100.jpg" alt="Test" title=" Test " width="100" height="100" style="position:relative" onmouseover="showtrail('bmz_cache/6/6a11364cd90c1dd6ac132c7890571fab.image.200x200.jpg','Test',100,100,200,200,this,89,89,11,11);" onmouseout="hidetrail();"  /><br /></a></noscript></div>
    <div class="additionalImages centeredContent back" style="width:50%;">

      <script language="javascript" type="text/javascript"><!--
document.write('<a href="javascript:popupWindow(\'http://ratkiss.net/index.php?main_page=popup_image_additional&amp;pID=4&amp;pic=1&amp;products_image_large_additional=images/large/bif_02_LRG.jpg\')"><img src="bmz_cache/7/74c3b4147a0816fd5ae47ac6fbd082f3.image.100x100.jpg" alt="Test" title=" Test " width="100" height="100" style="position:relative" onmouseover="showtrail(\'bmz_cache/b/bbd7320c82ae660faadc1cdf13fcb87c.image.200x200.jpg\',\'Test\',100,100,200,200,this,89,89,11,11);" onmouseout="hidetrail();"  /><br /></a>');
//--></script>
      <noscript><a href="http://ratkiss.net/index.php?main_page=popup_image_additional&amp;pID=4&amp;pic=1&amp;products_image_large_additional=images/large/bif_02_LRG.jpg" target="_blank"><img src="bmz_cache/7/74c3b4147a0816fd5ae47ac6fbd082f3.image.100x100.jpg" alt="Test" title=" Test " width="100" height="100" style="position:relative" onmouseover="showtrail('bmz_cache/b/bbd7320c82ae660faadc1cdf13fcb87c.image.200x200.jpg','Test',100,100,200,200,this,89,89,11,11);" onmouseout="hidetrail();"  /><br /></a></noscript></div>
<br class="clearBoth" />
 
</div>
<!--eof Additional Product Images -->

[sheba10]

Should I be doing this to the default classic template tpl file?
I was using the override and editing my custom one, and I don't see it as it shows here:

Sorry, I just want to get it right.

<!--bof Additional Product Images -->
<?php
/**
 * display the products additional images
 */
  require($template->get_template_dir('/tpl_modules_additional_images.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_additional_images.php'); ?>
<!--eof Additional Product Images -->
</div>

[kobra]

includes/templates/custom/templates/tpl_product_info_display.php

[sheba10]

includes/templates/custom/templates/tpl_product_info_display.php

Thank you, I'm posting part of my file here because I believe I removed it:

<div id="productImagesWrapper">
<!--bof Main Product Image -->
<?php
  if (zen_not_null($products_image)) {
  ?>
<?php
/**
 * display the main product image
 */
   require($template->get_template_dir('/tpl_modules_main_product_image.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_main_product_image.php'); ?>
<?php
  }
?>
<!--eof Main Product Image-->

<!--bof Additional Product Images -->
<?php
/**
 * display the products additional images
 */
  require($template->get_template_dir('/tpl_modules_additional_images.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_additional_images.php'); ?>
<!--eof Additional Product Images -->
</div>

[kobra]

Are you editing the file in the path I posted?

At your site - view your page source and see this:

<br class="clearBoth" />
 
</div>
<!--eof Additional Product Images -->

It is still being used

[sheba10]

Hi Kobra,
I followed the path you posted to edit.
There are only 3 "clearBoth" left in that file now.

I viewed the source and see that as well, but do not see it in the file.

I'm feeling like I'm missing something here completely obvious, and double
checked the path to make sure.