Modification of a template has resulted in confusion...

Question

Hello, I'm working on a site right now that has a short picture slideshow for the homepage. I purchased a template and I am modifying it to work for this situation. On modification, the thumbnail row under the slideshow is now separated from the slideshow and the thumbs are not centered. I can't seem to understand how to get this to get right under the slideshow and have them centered in the row.

Any help for me?

http://cormanroofinginc.com/

Thanks.

Answer 1

Looks like the height + padding of the fullsize image is too tall. The total space that an element takes up is the height/width + padding + border + margin. The height of the #ad-image-wrapper was right, but the padding made it too tall.

#ad-image-wrapper {
   background:url("images/gallery-wrap.jpg") no-repeat scroll 0 0 transparent;
   height:449px; /* change to 425px */
   margin:0 auto;
   padding:12px 0;
   width:650px;
}

For the thumbnails, it's a little tricky to center floated elements, but if you know the width isn't going to change, you can set the width and padding to center the elements.

.ad-thumbs {
   height:56px;
   margin:0 auto;
   padding:0 29px;
   width:497px;
}

Here is more information on the box model. http://www.brainjar.com/css/positioning/