products dividing line

[darktowerhobbies]

Ok I am trying to get my product listing page to look like http://shop.forge-games.co.uk/units-53-c.asp

Right now I have a single line dividing each product

[rstevenson]

Well, I'm kind of guessing at your intent, but here goes...

Look in your style sheet for the two definitions called

.productListing-odd
.productListing-even

Apply a border to those classes, and give them margins to space them away from each other as needed.

Rob

[gjh42]

Also apply padding to space the border out from the contents of each box.

[darktowerhobbies]

ok RT close to what I wanted but perhaps I was off on the explaination the only line I could find close to whay you were suggesting was this

/*Product Listing*/
.productListing-data {
border-top: 1px solid #000000;
padding: 0.50em 0em 0.50em 0em;
}

The look again I was going for was this http://shop.forge-games.co.uk/units-53-c.asp

i the center the way each product has a box around it. to me this looks cleaner than the sigle line I have on mine http://darktowerhobbies.com/index.ph...&cPath=3_15_11

I hope I have clarified this

[rstevenson]

You will need to style the two classes I mentioned...

.productListing-odd
.productListing-even

If they're not in your style sheet now, just add them and style as directed. Not all the styles available in the Zen code are actually in the style sheet. They're in the code so you can use them if you need to.

Here's how I've styled them in one of my sites. This gives two different background colors for the alternating listings...

.productListing-even { background-color: #DFECF8; }
.productListing-odd { background-color: #E6F0D2; }


As you can see I haven't used any margin because I wanted them to snug up to each other. And I didn't need the padding mentioned above by gjh42 because, I guess, the elements within each row have their own margins already. (There are many ways to reach the same goal.)

You probably want something like...

.productListing-even, .productListing-odd {
background-color: white;
border-color: black;
border-width: 2px;
margin: 5px;
padding: 5px;
}

Adjust to taste.

HTH

Rob

[darktowerhobbies]

I added everything you suggested and nothing happened no border ever appeared no matter what I did.

I sort of got it going by adding the border bottom to the style sheet

.productListing-data {
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
/* padding: 0.50em 0em 0.50em 0em;*/
}
but I can't separate them or make a border appear on the left or right side.