Eliminating wrap-arounds

The text description tends to wrap around the product info image.
In other words, when the text is a little long, instead of continuing neatly aligned it will continue below the image.
I have also uploaded a contrib from the downloads section
http://www.zen-cart.com/index.php?ma...roducts_id=241
This relocates the additional images which display at the bottom of the page, below the main product image.
Again, the problem is that attributes tend to wrap around this, thus causing the additional images to be juxtaposed.
You can see the problem here:
http://www.haiswigs.com/index.php?ma...&products_id=6
I have tried to increase width of the whole site, setting it even to 100%, but that doesn't fix the problem, the attributes rows don't break where they should.
Basically my question is: how do I achieve a tabular design of sorts?
Like having:
row, first cell, second cell with rowspan=2
row, cell with add'l image, cell with add'l image
You get the idea, everything neatly separated so nothing will overlap.
Also, I need the attributes to start always below this chunk of code.
Maybe I need to use a template.
Please help.
Thanks.

Here is another link to same page in IE:
http://www.haiswigs.com/index.php?ma...&products_id=6

Do you want the images to just display beneath each other?

Quote:

---

Originally Posted by designationlocutus

Do you want the images to just display beneath each other?

---

Well, yes, I would like the additional images to display under the product image.
But, in general, I would like to have more control over the page layout, because that is not the only issue.
Additional images are juxtaposed and attributes do not display neatly under the additional images, but are also overlaid.
I need to know how does Zen Cart control page layout, so I might be able to tweak those files to my needs.
Thanks for quick answer.

If anybody else wants to answer this thread, please be my guest.
I haven't got much so far, tested and uninstalled contribs. 41 and 43 of the donwloads/templates section but they mess up more than they solve for me.
I will now try ZenMagick to see if I can get results in page layout customization.

In your templates, look for the tpl_product_info_display.php file. It's not the easiest to read, but that's why the product info view is generated.

I'm not an expert so I have no concrete advice other than deciphering this file and then re-arranging it as you need.

Quote:

---

Originally Posted by ckosloff

If anybody else wants to answer this thread, please be my guest.
I haven't got much so far, tested and uninstalled contribs. 41 and 43 of the donwloads/templates section but they mess up more than they solve for me.
I will now try ZenMagick to see if I can get results in page layout customization.

---

Hey, thanks.
Will take a good look at that.
Your answer covers a lot, I know that I have to do a lot of hard work.

I got my additional images lined up vertically below my main image with this tweak in tpl_product_info.php:

PHP Code:

---

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

---

and this styling

Code:

---

       
#productImagesWrapper { /*gjh42 20070214*/
        width:200px;
        }
       
#productMainImage { /*gjh42 12/30/06*/
        width:200px;
        }
       
#productMainImage img {
        margin: 1em 0em 3em 0em ;
        float: right;
        }
#productAdditionalImages img { /*gjh42 20070329*/
        margin: 1em 0em 1em 0em ;
        float: right;
        }

---

All other elements have margin-left: 210px; so they line up in a column to the right of the pics. See my site for a visual.

These may give you an idea of how to set up your display.
You may need to remove some class="clearBoth" tags.

Thanks Glenn, for the detailed advice.
Checked out your site and although in progress, it looks great.
Will check this out in-depth and let you know if issues.
Best regards.

OK, I have done some progress and also messed things up.
The good news is that I achieved the tabular look simply by...inserting a table with an HTML editor, so those wrap-arounds are no more.
But...I still need additional images to display *vertically* under the main image.
I have tried a mod in the downloads section but it relocates images horizontally and messes up the whole look of the product info page.
It is basically a tweak to product_info_display.php.
Can somebody help with that?
Thanks!