Oh and I'd also like for any one of those to be "clickable" and take you to that product's page.
This is what I'm doing for now... but I don't particularly like it:
Code: Select all
<div class="product_category" onclick="javascript:jsLink(this, '/pc/PL-MP-HD/DAK30');">
<div class="image">
<div class="no_photo"><a href="/pc/PL-MP-HD/DAK30"><img src="images/products/DAK30.jpg" alt="Heli-Pack w/70 oz Reservoir"></a></div></a>
</div>
<div class="details">
<div class="title"><a href="/pc/PL-MP-HD/DAK30">Heli-Pack w/70 oz Reservoir</a></div>
<div class="price">$80.00</div>
</div>
</div>Code: Select all
/* Product Styling */
.product_category, #related_products div.image{
width: 140px;
height: 140px;
float: left;
margin: 5px;
padding: 5px;
border: 1px solid #bbb;
text-align: center;
}
/* Hides from IE5-mac \*/
* html .product_category, #related_products div.image {margin: 3px; padding: 2px;} /* Only show to IE-Win */
/* End hide from IE5-mac */
.product_category:hover, #related_products div.image:hover{
border: 1px solid #000;
cursor: pointer;
}
.product_category div{
margin: auto;
}