layout settings for additional images

i have figured out why the additional images were not showing up. also found why the additional images box width was fixed to a certain px and also figured out how to repeat the background image. i'm still guessing but the last thing i need is to figure out how to make all the pictures align from left to right side by side. the issue is, the row setting for additional images is 10. when i only have 2, the first image is at the far left and the second image is in the center. check the link below to see what i am talking about

http://shop.kelleymotorsports.com/index.php?main_page=product_info&cPath=35_36_42&products_id=85

this is the code but not sure if something is missing to tell it that or what specifically tells it that.

#productAdditionalImages {margin:10px 0 0 0; padding:10px 2px 0px 4px; position:relative; width:auto; overflow:hidden; border:solid 1px #000; height:auto; background:url(../images/img.jpg) repeat 50% bottom;}
#productAdditionalImages #gallery { padding:0; margin:0 0 0 3px; list-style:none;}
#productAdditionalImages #gallery div{display: inline; text-align:left; position:relative; overflow:hidden; margin:0px 5px 10px 0; width:51px!important; }
#productAdditionalImages .additionalImages a {height:50px; width:50px; overflow:hidden; position:relative; font-size:17px; text-decoration:none; line-height:20px; font-weight:bold; color:#d50a0a; }
#productAdditionalImages .additionalImages a:hover{ color:#fb5d5d;}
#productAdditionalImages .additionalImages a img{ width:50px; height:50px; position:relative; }

possibly the list-style:none?

Look for this in your files

are you talking this in the additional images module?

// List Box array generation:
$list_box_contents[$row][$col] = array('params' => 'class="additionalImages centeredContent back"' . ' ' . 'style="width:' . $col_width . '%;"',
'text' => "\n      " . $link);
$col ++;
if ($col > (IMAGES_AUTO_ADDED -1)) {
  $col = 0;
  $row ++;

Try finding #productAdditionalImages in stylesheet_main.css and add float: left;

Then add #productAdditionalImages img {margin: 0 1em 0 0;} Adjust the 1em to taste.

Also, remove stylesheet_main_old.css from the css folder.

stevesh:

Try finding #productAdditionalImages in stylesheet_main.css and add float: left;

Then add #productAdditionalImages img {margin: 0 1em 0 0;} Adjust the 1em to taste.

Also, remove stylesheet_main_old.css from the css folder.

for the margin part, do i just modify what is already there in the code

#productAdditionalImages {margin:10px 0 0 0; padding:10px 2px 0px 4px; position:relative; width:auto; overflow:hidden; border:solid 1px #000; height:auto; float: left; background:url(../images/img.jpg) repeat 50% bottom;}
#productAdditionalImages #gallery { padding:0; margin:0 0 0 3px; list-style:none;}
#productAdditionalImages #gallery div{display: inline; text-align:left; position:relative; overflow:hidden; margin:0px 5px 10px 0; width:51px!important; }
#productAdditionalImages .additionalImages a {height:50px; width:50px; overflow:hidden; position:relative; font-size:17px; text-decoration:none; line-height:20px; font-weight:bold; color:#d50a0a; }
#productAdditionalImages .additionalImages a:hover{ color:#fb5d5d;}
#productAdditionalImages .additionalImages a img{ width:50px; height:50px; position:relative; }

also that is where to add the float correct?

Yes, but the margin part probably needs to go in a separate rule for #productAdditionalImages img

wow i'm totally retarded here. excuse me for being so dumb but you want something like this

#productAdditionalImages {margin:10px 0 0 0; padding:10px 2px 0px 4px; position:relative; width:auto; overflow:hidden; border:solid 1px #000; height:auto; float: left; background:url(../images/img.jpg) repeat 50% bottom;}
#productAdditionalImages img {margin: 0 1em 0 0;}
#productAdditionalImages #gallery { padding:0; margin:0 0 0 3px; list-style:none;}
#productAdditionalImages #gallery div{display: inline; text-align:left; position:relative; overflow:hidden; margin:0px 5px 10px 0; width:51px!important; }
#productAdditionalImages .additionalImages a {height:50px; width:50px; overflow:hidden; position:relative; font-size:17px; text-decoration:none; line-height:20px; font-weight:bold; color:#d50a0a; }
#productAdditionalImages .additionalImages a:hover{ color:#fb5d5d;}
#productAdditionalImages .additionalImages a img{ width:50px; height:50px; position:relative; }

That works for me using Web Developer on your site. Don't forget to remove the old stylesheet_main.css, as it will conflict with the new one.

wow thanks a million stevesh!

so without wasting time, which one would change the space between the top and bottom of the images? they are touching now and would look a little better spaced out i think.

Yes, that would be the line to edit. You would have to edit exactly right to avoid creating an error.
An easier method would be to use a stylesheet override. Ordinarily, inline styling takes precedence over stylesheet rules, but adding !important to the value in a stylesheet declaration will cause that to override any other styling.

.additionalImages {
    width: whatever-you-want !important;
    } 

gjh42:

Yes, that would be the line to edit. You would have to edit exactly right to avoid creating an error.
An easier method would be to use a stylesheet override. Ordinarily, inline styling takes precedence over stylesheet rules, but adding !important to the value in a stylesheet declaration will cause that to override any other styling.

.additionalImages {
width: whatever-you-want !important;
}

i already placed in the stylesheet_main the following that is working

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

but just wanted to know which number changes the space on top and bottom of images.

Yes, I had chosen the harder route.

I would use this

#productAdditionalImages img {
border: 1px solid #C0C0C0;
margin: 0 9px 9px 0;
}

The order is
top right bottom left

no problem keneso, your dealing with a dummy here! haha!!

i'll remember the order now thanks!

any ideas why when you click on the images it doesn't allow you to go to next or close? that is strange because the main image allows it... maybe a global setting?

I would also change these to have a better spacing (my subjective taste anyway)

#productAdditionalImages {
border: 1px solid #000000;
float: left;
height: auto;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
width: auto;
}

As per your last question the main image uses lightbox, whereas the additional images appear not to.
Might it have to do with the issue you had not being able to display them?
Wait for better input than mine.

ya not quite sure because i am running the original additional_images.php module file from the original zen cart install. i would guess it is something in that file but doesn't make sense because it is the original...

just to finish this off, i installed lightbox using the download and some how managed to get it to work and fix all the issues with opening the images and maintaining the previous, next, and close options. also managed to get rid of the "larger image" text from the lightbox install. everything is looking great!!! thanks to everyone!!