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

[kelleymotorsports]

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

[stevesh]

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.

[kelleymotorsports]

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.

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