Resolved - Inline Add to Basket Box

[mg3ddesign]

I'm trying to get my Add to Basket Boxes inline horizontally in my new category grid listings. Ive tried changing a lot of the CSS to make 'add to' go to the bottom of the product box but nothing seems to work. You can see what I mean on the following link. It all look a bit messy..

http://indoorxtreme.co.uk/shop/sparring-protection/hand-pads-boxing-gloves/mma.html

Any help would be much appreciated.

[Dirty Butter]

I made some changes to line things up better, too, but I'm not using a default skin any more, so I'm not sure of all I did.

I know I added more space for the title by changing from 250 to 260 in styles common.css, so longer titles didn't take up an extra line and mess up the rest of the box.

[mg3ddesign]

Thanks for the reply, unfortunately having the product name on one line will not work as there are products with reviews and without which changes the distancing. What I need to do is find the CSS code to move the add to basket box to the bottom of the product.

[Dirty Butter]

I would think there would be a way to add a space holding section in an {if} clause, so the spacing only displays if there is not a review.

If all titles use the same spacing the price will line up, and having a space allotted for the review should make the buy button line up.

[mg3ddesign]

Any help on how to do that? Many thanks

[Dirty Butter]

The coding is beyond my skills, but should be doable. We don't get many reviews, because all our items are used. I had to hunt to find one of ours with stars, and I need to line up the box properly, too.

[Dirty Butter]

This may work for you, but I don't use a shipped skin, so I'll have to play a bit more for mine to space consistently.

I suspect changing the height here on common.css of your skin/styles might do what you want.

div.latest_product {

float: left;

margin: 5px 15px;

height: 235px;

padding: 0px;

width: 157px;

}

[Guest Viola]

Try adding the following to common.css

on line 425

div.category_product{

position: relative;

}

on line 432

div.cateogry_product h3{

height: 205px;

}

There is a rule for "p.buy_button" on line 472, but I don't know if that refers to other buy butons as well, so make a new rule that's more specific.

div.category_product p.buy_button{

position: absolute;

bottom: 5px;

}

[mg3ddesign]

Perfect, exactly what I wanted. Everything lines up now even the price.

Thanks Viola, that has now added to my basic understanding of CSS. Maybe I should go on a course...

http://indoorxtreme.co.uk/shop/hand-protection.html