products dividing line

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

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

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

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.php?main_page=index&cPath=3_15_11

I hope I have clarified this

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

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.

You're right, sort of. :blink:

When I add my first example to your stylesheet, the one with just a different color for each row, the colors change immediately on your page. (I'm using Firebug to do that. Don't worry, it only changes here in my browser.)

But when I put in my second example, nothing happens. This tells me that something else is over-riding the changes. Any chance you have more than one stylesheet in use?

Rob

I am using a template glass black I got it on here

sorry typo gloss black

For Borders around Product Listings, see if this works for you.

.productListing-data {
padding: 10px;
border: 1px solid black;
}

If you wanted to use different colors for each product then use:

.productListing-even {
padding: 10px;
border: 1px solid black;
}

.productListing-odd {
padding: 10px;
border: 1px solid grey;
}

A good habit to get into when adding new declarations is to put them at the bottom of your Stylesheet, then you know they come last.

ok now I have both horizontal and vertial lines how do I get rid of the vertical on the inside I want the ones on the outside

here is the url

Looks like you have your borders applied to productListing-data. You need to put the style definition in productListing-odd and -even to style the entire row. the -data style applies to each block in the row.

Your product listings are in a table. Each row of the table (TR) is styled with productListing-even or -odd. Each cell of the table (the TDs) is styled with productListing-data. So when you style the cells you get multiple borders in each row, as you have now. When you style just the row, you get a border around just the row.

Rob