move description to the right of images

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_page=product_info&cPath=1_3&products_id=4

Hi,

Are you looking for a layout like this?

http://milesfiberglass.com/catalog/

Justus

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&pID=4&pic=0&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&pID=4&pic=0&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&pID=4&pic=1&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&pID=4&pic=1&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 -->

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?

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&pID=4&pic=0&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&pID=4&pic=0&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&pID=4&pic=1&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&pID=4&pic=1&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 -->

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>

includes/templates/custom/templates/tpl_product_info_display.php

kobra:

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:

:huh:

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

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

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.

:unsure:

I just searched the developers tool kit for "clearboth"

There are many others, but the file specified: /www/includes/templates/custom/templates/tpl_product_info_display.php

has this:

/home/ratkiss/public_html/includes/templates/custom/templates/tpl_product_info_display.php
Line #134 : <br class="clearBoth" />

Line #193 : <br class="clearBoth" />

Line #197 : <br class="clearBoth" />

None of which are near the additional images in the file itself?

This makes no sense as to why it still shows and is being used. I'm a little confused and I guess I will have to let it be how it is. Thanks for trying Kobra.

I found a little something in my stylesheet.css! :clap:

I had
#productDescription { clear: both}

I removed that and went back to the default modules_product_info_display.php

That lined up the description to the right. Any suggestions what I can do to line the images up again, or is this not possible?

Great!!! That would have added it back in where you removed it from the code...

Now on to the next:

Make these changes/additions to the stylesheet

#productDescription {
float: right;
width: 68%;
}

#productAdditionalImages {
width: 180px;
}

#productAdditionalImages img {
margin : 1em 0 1em 0;
float : left;
}

Reduce this tag to a single entry by deleting it from others
.additionalImages {
clear: both;
}

Now back to the code:

#productAdditionalImages exists outside of the div, id=productGeneral, class=centerColumn and is probably from moving/editing tpl_product_info_display.php.

Check where the center div begins & ends and where the additional images starts. This needs to be contained within or before the end of the center to be able to move them up higher

kobra:

#productAdditionalImages exists outside of the div, id=productGeneral, class=centerColumn and is probably from moving/editing tpl_product_info_display.php.

Check where the center div begins & ends and where the additional images starts. This needs to be contained within or before the end of the center to be able to move them up higher

Thank you I got through the stylesheet corrections/changes. :D

But, (you know there had to be a but, sorry!)

I'm a little confused about the last part.
Is this what I am looking for? This is at the very beginning of my tpl__product_info_display.php file.

<div class="centerColumn" id="productGeneral">
```Now I looked for the additional images <--bof--> <--eof-->
and move that above the div shown above. Is that what you meant to do?

I tried that and it looked funny.

I don't think I'm following you right here, sorry!

Is this red highlighted entry in your tpl_product_info_display.php file ? Or might it be from a setting in the admin?

<div class="additionalImages centeredContent back" style="width:50%;">

No, that isn't in my product_info_display.php file.

I found it in an admin setting.
I had additional images per row set to 2

Changed it to 1 and now it shows the code as follows:

<div class="additionalImages centeredContent back" style="width:100%;">

sheba10:

I found it in an admin setting.
I had additional images per row set to 2

Changed it to 1 and now it shows the code as follows:

Is this what I want? I've been fiddling with my php file for a couple days and when I move something another gets out of wack.
I'm coming to think I'm at a loss here.
:frusty:

I searched on here some more and moved my additional images right under the main image and put them together in their own <div>.

I floated some things differently in the stylesheet and now I don't think I can get any closer than that!

If anyone can help with one last thing:

How can I make the additional images display right next to each other under the main image.

Like:
1
23

If not broken by your edits this should be controlled in the admin > config > images > Product Info - Number of Additional Images per Row > set to the desired # per row