CSS: Centering Main Image Above Additional Images

[Feznizzle]

Hi,

I need some help from a CSS expert! :)

These two images illustrate my problem....


Link to my site:
http://0stage.justmedical***DOT***bi..._Test_1_Images

Problem #1:
I can't figure out how to center the main product image using CSS. Can you point me in the right direction?

Problem #2:
This is less important, but would be really awesome: Can you show me how to tighten up the rows of additional images?

My site details:
zc154 w/ ImageHandler4, Zen Colorbox

Thanks in advance for your help!

[Feznizzle]

Just in case anybody else is looking for an easy way to create a grid of additional images below the main product, here is how I did it. I found a template made by somebody really smart (picaflor-azul) and borrowed her technique.

All I did was go into this file (/includes/templates/MY_TEMPLATE/templates/tpl_product_info_display.php), looked for the Main Product Image code block and replace it with this:

<!--bof Poduct Image with Additional Images in a grid  -->
<div id="pi-left">
<!--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-->

<br class="clearBoth" />

<div id="pi-additional">
<!--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>

</div>
<!--eof Poduct Image with Additional Images in a grid -->

Then I added the following bit to the bottom of my CSS file:

/* Controls for Poduct Image with Additional Images in a grid */
#pi-left{float:right;margin-bottom:30px;width:235px;background:#f4f4f4;border:1px solid #dbdbce;padding:10px;}

[sfgl]

It need use CSS control, you can try below methods:

Problem #1:

margin: 0px auto;

Problem #2:

adjust your additional images size and margin.

[Feznizzle]

Hi sfgl,

Thanks for the suggestion. I added this:
#productMainImage {margin: 0px auto;}

But it didn't work.

And, actually, I tried that many times and in many variations prior to posting. I should have mentioned that. I know how to center images using css, I just couldn't get it to work.

SOLUTION TO #1:
As it turns out, a class (.back) was being added in the product image module (/includes/templates/MY_TEMPLATE/templates/tpl_modules_main_product_image.php). Here is the offending line:
<div id="productMainImage" class="centeredContent back">

I simply removed " back" and it worked like a charm!

SOLUTION TO #2:
Similar to the above situation, a class called additionalImages was being applied and receiving margins along with a big group of other classes (centerBoxContents, etc). I stripped it out and brought it to the bottom so that I could apply my own margins. Worked out well.

++++++++++
Because I cleaned up the code and changed the css, I'll now repost the fixed code & css. Your results may vary, good luck!

Here is the code for tpl_product_info_display.php:

<!--bof Poduct Image with Additional Images in a grid -->
<div id="pi-left">
<!--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-->

<br class="clearBoth" />

<!--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>
<!--eof Poduct Image with Additional Images in a grid -->

And here is the CSS:

/* styles for Poduct Image with Additional Images in a grid */
#pi-left{float:left;margin-bottom:20px;margin-right:10px;width:235px;background:#f4f4f4;border:1px solid #dbdbce;padding:10px;}

.additionalImages{margin-bottom: 10px;}

#productAdditionalImages {margin-bottom: -8px;}

[rbarbour]

This could be accomplished easily with CSS instead of altering PHP files.

#productMainImage already has a class (.centeredContent), but the id (#pi-left) has a float restricting the width of (#productMainImage), so setting the width of (#productMainImage) to 100% allows the built in class (.centeredContent) to center the image.

#productMainImage { width:100%; }

I'm not seeing an issue with the additional images unless you already fixed.

[sfgl]

<div id="pi-additional">
<!--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>

I agree this method.

Sorry, I have not noticed your anterior response, I considered It is other friend's post, It is a good method.

1. you can try below methods, It maybe adjust main picture's position:

#productMainImage img {
margin: 0px auto;
}

2. It relate to includes/modules/your templates/additional_images.php or includes/modules/additional_images.php file, you can modify this file look like this way:

$list_box_contents[$row][$col] = array('params' => 'class="addImages centeredContent back"' . ' ',
    'text' => "\n      " . $link);
    $col ++;
    if ($col > (IMAGES_AUTO_ADDED -1)) {
      $col = 0;
      $row ++;
    } 

3. you can adjust your addition images position:
#pi-additional {
width: px;
height: px;
}
.addImages {
float: left;
margin: 0px 5px;
}

[sfgl]

You may don't modify additional_images.php file.

#pi-additional {
width: px;
height: px;
}
.additionalImages {
float: left;
margin: 0px 5px;
}

hope It can help you!

[Feznizzle]

Thanks again for your very helpful suggestions, sfgl. I wish I had seen that sooner!

This could be accomplished easily with CSS instead of altering PHP files.

#productMainImage already has a class (.centeredContent), but the id (#pi-left) has a float restricting the width of (#productMainImage), so setting the width of (#productMainImage) to 100% allows the built in class (.centeredContent) to center the image.

I'm not seeing an issue with the additional images unless you already fixed.

Ooooooh! I never tried width 100%!

And thank you for the explanation. Because of this experience, I've decided it's finally time to REALLY learn css. I'm going to hunt down some online tutorials.