A few layout problems help please

[cookie30]

Ok I have my products in a row down the left of the centre part but they are all squashed on top of each other. I would like to either 1. spread them out a bit with space between them or 2. make them into 3 colums to display the products. I like the 3 colum idea, my specials are showing this way and it looks better than the way the products are showing at the moment. I am open to all suggestions. I am not really good at changing anything yet am only new at this but I have read some similar threads and tried the same fix but hasn't worked with mine. I have downloaded the orange template and can't seem to find some of the files suggested to fix this problem.
site here www.sandkembroidery.com/zencart
appreciate all help offered.
Also would like to add in some sort of forum for craft ideas and such any ideas on how or what to do for this please? I have siteground server and normal cpanel but know nothing of what to use from this for what I would like to try and achieve. I wrote my current website with frontpage so am used to this program only.
Thanks Kylie

[BrookieWookie]

Hi Cookie,

Did you want your products just spaced out more, is that what you mean by squashed?

This is what I have put in my custom template css to seperate them a little

.productListing-data
{
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #ffccff;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #ffccff;
}

You can change what colour code you want and the thickness size (2px)

you can see my page if you like to know what I talking about,
http://www.rubirocket.com

hope this helps alittle

cheers Brooke

[cookie30]

Hi Brooke
I'm not exactly sure where to put this. I have found the part you said but it didn't do anything. Here is what I have can you tell me exactly where to put it please? This is in my stylesheet.css is this the right place? If so where does your part go please?
td.productListing-data{ text-align: center; }
td.main{ width: 30%; }
td.mainb{ width: 70%; vertical-align: top; }
td.mainc{ vertical-align: top; }
td.featuredHR, td.newHR{ padding: 0; }
td.featuredHR hr{ height: 1px; margin: 0; border: none; border-bottom: 1px solid #dfdfdf; }
td.newHR hr{ height: 1px; margin: 0; border: none; border-bottom: 1px solid #dfdfdf; }
h3.itemTitle{ margin: 3px 0 5px 0; }
.listingDescription{ margin: 5px; }
Thanks Kylie

[gjh42]

It sounds like your template is already doing things with the product listing - those declarations are not in the stock stylesheet. You can add the suggestions to your td.productListing-data. You can also add padding-bottom and margin-bottom (or top), for some spacing. The suggestion will give you a line above and a line below each item, i.e. two lines between items. If you don't want this, use just one of border-top or border-bottom.

You can also condense the properties like this:

border-top: 1px solid #ffccff;

or

border-bottom: 2px solid #ffccff;