layout of additional images on product info page

Hi, I've just moved the attributes so that they appear below the additional images on the product layout page, however theres quite a large space between the product description and the first additional image, see here for an example; http://www.thegreatgiftshop.co.uk/index.php?main_page=product_info&cPath=39_40&products_id=859

How can I tidy this up so that additional images are displayed immediently under the text, with say just one line space, and then the attributes appear neatly under them.

Thanks.

UPDATE....

I moved the block of code for the product description so that it came right before the additional images, which solved the problem for the product in question but when I looked at another product with additional images there was a huge gap between the product title and the description and it looked a mess so ive changed it back.

Any ideas how I can have all things nice and neat and tight layout on all product pages?

If you don't mind using negative margin:

**.additionalImages {margin-top:-9.8em;}

.additionalImages img, .additionalImages a {float:left;}**

(I think the image looks better floated left.)

sorry to be dumb, but do I need to put this code into my stylesheet? or edit the existing??

I worked it out, had added to bottom of wrong stylesheet. Oh, beautiful. Thank you!! Exactly how I need it to look. Yes I agree, image looks better floated left.

Oh no, maybe not...looks fine for some products but this one;

http://www.thegreatgiftshop.co.uk/index.php?main_page=product_info&cPath=16_26&products_id=868

the additional images now overlap :huh:

Any ideas how to fix?

Nooo, and also here;

http://www.thegreatgiftshop.co.uk/index.php?main_page=product_info&cPath=79&products_id=245

and Im guessing on other products like this with a few additional images and attributes :ohmy:

I changed .additionalImages {margin-top:-9.8em;}

to

.additionalImages {margin-top:-2em;}

which has fixed it for the messy looking ones, but now theres a bigger gap between the other products additional image and its description.

How can I ensure all products regardless of how many additional images, will appear neatly with a small gap between description and additional images?

anybody?

as it stands, some product info pages look like this, (gap between addit images and descript is way too big;

http://www.thegreatgiftshop.co.uk/index.php?main_page=product_info&cPath=39_40&products_id=859
and
http://www.thegreatgiftshop.co.uk/index.php?main_page=product_info&cPath=16_26&products_id=868

Then some product info pages look like this, (gap between additonal images and descript makes them overlap add to cart box;

http://www.thegreatgiftshop.co.uk/index.php?main_page=product_info&cPath=16_37&products_id=875

How can I fix this, so that all product info pages have a nice neat layout with product description then additional images following this with no big gap inbetween and no overlapping of the images over eachother or the add to cart box?

This may help, although it has been a while since I did it, and you will have to tailor it to get what you want.

What I did was create a little IF routine that alters the position of images on the product layout page by switching certain Divs depending upon whether there are additional images or not. Here, the switch changes the image positions from float left to align central, as dictated by the css, but you can extend the logic to also include the attributes.

In includes\templates\mytemplate\templates\tpl_product_info_display.php

<div id="mainProductBox">
<h2 id="productName"><?php echo $products_name; ?></h2>

<?php
 require(DIR_WS_MODULES . zen_get_module_directory('additional_images.php'));
 ?>
<?php
 if ($flag_show_product_info_additional_images != 0 && $num_images > 0) {
  ?>
<div id="productImageBox2"><!-- images float left -->
<?php } else { ?>
<div id="productImageBox"><!-- images are centralised -->
<?php
  }
?>

<!-- bof Main Product Image -->
<div id="imageBox">
<?php
  if (zen_not_null($products_image)) {
  ?>
<!-- /**
 * display the main product image
 */-->
<?php 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
  }
?>
</div> <!--  end imageBox -->
<!--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> <!--  end productImageBox -->

In includes\templates\mytemplate\css\product_info.css

#productImageBox {
	padding:0em 0em 0.5em 0em;
	}

#productImageBox2 {
	float:left;
	margin-right:1em;
	padding:0em 0em 0.5em 0em;
	}

Cheers

BTW if you make your additional images all the same height, you may find them easier to align horizontally, and also the attributes to align easier.

And something on your pages takes ages to load.

Cheers

do I have to make a file called product_info.css?

As I cannot find one.

Also, do I have to put that code into the files mentioned? (tpl_product_info_display.php and product_info.css)

Many thanks, I need a bit of guidance as I'm a beginner!

Ah my mistake, product_info.css is not standard issue, but is worth having.

I originally got the product_info.css from various Product Info Display mods by Clyde Jones - look to the bottom of this list

http://www.zen-cart.com/index.php?main_page=contrib_search_result&search_in_description=1&keyword=product+info+display

Comparing these various Product Info Display mods may help you layout for your product info and attributes.

My code may be a bit too much for an absolute beginner, but the logic of IF statements is worth getting into.

Cheers

Ok, I'm really not sure which to look at and compare. If anyone else knows of another way to solve my problem, working with the existing files please let me know.

P.s dw08gm, is there any way you can tell me what's taking ages to load? As we dont want this to be a problem for customers. On what page was it? or was it the whole site in general?

Each page loaded OK but for some reason kept downloading something I dont know.