layout settings for additional images

[kelleymotorsports]

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/in...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?

[keneso]

Look for this in your files
<div style="width:50%;" class="additionalImages centeredContent back">
Remove style="width:50%;"
and style the class in your stylesheet.
.additionalImages {
padding: 0 9px 9px 9px;
}

[kelleymotorsports]

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

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

[kelleymotorsports]

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?

[stevesh]

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

[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;
    }

[kelleymotorsports]

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.

[keneso]

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