Adding Borders Around Products?

[PudzPud]

I know this can be done as I have seen several zencart shops using this but cant for the life of me work out how to do it (searched in zen manual and on forum).

I have a grid layout on website but need a rounded corner border around the product and add to cart button etc - similar to this website: http://templates.entheosweb.com/temp.../13655-z-b.jpg (although that one is row layout I would assume it would be implemented similar for grid/column layout)

When I try to add a border (from code found on this forum) it puts massive square borders around the entire product but no spaces inbetween them so the right edge of the first product border is also the left edge of the middle product border (if that makes sense - I can re-add it and post screenshot if needed).

I have seen so many websites with these boxes so know it is definately possible with zencart but just cant suss out how to get the spaces between the boxes/borders and also how to tidy up the corners and make them rounded.

Any help much appreciated

[rstevenson]

Use a graphic as a background for the DIV which contains the product thumbnail. Ther's a thread here in this part of the forum that has been active these last few days about exactly this.

Rob

[PudzPud]

Thanks for the quick reply. I have had a look and a search on the forum (not just this topic) but the nearest I can see in this section is the rounded corners thing (snazzy corners I think its called) - that would cover the corner issue but I cant see that it helps with the boxes around the products as most people seem to be talking about bottom banners and sideboxes etc and I dont have any sideboxes on my websites so its the actual products I need a border around on the main category pages when it shows all products together (before you go into individual items). I am still looking through the thread and that snazzy corner post but cannot see where it covers actual product descriptions sorry.

Also I am unsure that using a graphic as you suggest would work as some products have a longer section that others i.e. if it is out of stock the 'back in stock' module adds a section at the bottom so a graphic the right size for main in stock products would be too short for any out of stock item. Sorry if that seems awkward or fiddly but I want to be sure that this graphic is the way to go before I start looking into that more, as I can get a box round the items using normal css but it does not have spaces between products so I assumed that there would be something I am missing to add in spaces or set the width of the boxes/borders?

Thanks again.

ADDED - I have read through the rounded corners post which seems to be the closest match to what your referring to but the only person who has put the borders around the products and not the sideboxes etc seems to have done ----- lines and again the right box at the side of one product is also the left side of the next one etc so more or less the same as what we can do with solid lines. I will get mu husband to look at the graphic side of things although I am unsure if that will work due to some products listings being longer than others but hopefully he can get it working as an image.

[rstevenson]

Here's the one I was talking about.

If you need different sizes for different products, it won't be so simple, though if you can standardize on a particular width, then you could use the "sliding door technique" (see Google for that one) to allow a top graphic and a bottom graphic to slide over each other to expand or contract the box size as needed.

As for the borders or graphics touching each other, you can adjust margins and paddings of the DIV independantly. If you imagine a box for the DIV, a margin is what keeps that DIV from being too close to another, and padding is what keeps the content away from the edges of its own box. So there's no reason why box borders have to touch each other.

Rob