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.

[rstevenson]

You're right, sort of.

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

[darktowerhobbies]

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

[darktowerhobbies]

sorry typo gloss black

[Website Rob]

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.