Welcome to WebmasterWorld Guest from 54.145.13.215

Forum Moderators: not2easy

Message Too Old, No Replies

Show "Free Shipping" on every image

     
7:33 am on Sep 17, 2010 (gmt 0)

Junior Member

10+ Year Member

joined:May 11, 2004
posts: 130
votes: 0


Hello everyone,

I want to show "Free Shipping" on every page thumbnails generated by my shopping cart through CSS:


<ul class="ProductList ">
<li class="Odd">
<div class="ProductImage">
<a href="ddd" ><img src="ddd" alt="" /></a>
<div class="mare livr mare2">Free Shipping</div>
</div>


Every image is generated 3 image products per row, there is 4 rows with product images.


I used this one but the "Free Shipping" goes to left side and only one time showing:

}

.ProductList .ProductImage .mare{
position: absolute;
left: 199px;
bottom: 0px;
height: 13px;
padding: 0px 4px;
font: normal 7pt Arial;
color: #fff;
line-height: 13px;
}
.ProductList .ProductImage .mare2{
bottom: 5px;
}
.ProductList .ProductImage .mare3{
bottom: 26px;
}
.ProductList .ProductImage .nou{
background: #D82423;
}
.ProductList .ProductImage .promo{
background: #E67026;
}
.ProductList .ProductImage .livr{
background: #5D833F;
}


Please help

Regards,
Dan
8:16 am on Sept 17, 2010 (gmt 0)

Full Member

joined:July 31, 2005
posts: 272
votes: 0


If the image is small enough, you could use the list-style-image: url(freeshipping.jpg); property:


ul li {
url(freeshipping.jpg);
}


If you need to use classes:


ul li.freeshipping {
url(freeshipping.jpg);
}


Try it and see if it works for you.
8:48 am on Sept 17, 2010 (gmt 0)

Junior Member

10+ Year Member

joined:May 11, 2004
posts: 130
votes: 0


Hi Payne,

Thanks for reply.

Here is my design table for showing grid images:

You mean :

<li class="%%GLOBAL_AlternateClass%%">
<div class="ProductImage">
<div class="freeshipping">Free Shipping</div>
%%GLOBAL_ProductThumb%%
</div>
<div class="ProductDetails">
<strong><a href="%%GLOBAL_ProductLink%%" class="%%GLOBAL_SearchTrackClass%%">%%GLOBAL_ProductName%%</a></strong>
</div>

<div style="display: %%GLOBAL_HideProductShortDescription%%;">%%GLOBAL_ProductShortDescription%%</div>
<div class="ProductPriceRating">
<em>%%GLOBAL_ProductPrice%%</em>
<span class="Rating Rating%%GLOBAL_ProductRating%%"><img src="%%GLOBAL_IMG_PATH%%/IcoRating%%GLOBAL_ProductRating%%.gif" alt="" style="%%GLOBAL_HideProductRating%%" /></span>
</div>
<div class="ProductCompareButton" style="display:%%GLOBAL_HideCompareItems%%">
<input type="checkbox" class="CheckBox" name="compare_product_ids" id="compare_%%GLOBAL_ProductId%%" value="%%GLOBAL_ProductId%%" onclick="product_comparison_box_changed(this.checked)" /> <label for="compare_%%GLOBAL_ProductId%%">%%LNG_Compare%%</label> <br />
</div>
<div class="ProductActionAdd" style="display:%%GLOBAL_HideActionAdd%%;">
<a href="%%GLOBAL_ProductURL%%">%%GLOBAL_ProductAddText%%</a>
</div>
</li>



and CSS:

.ProductImage ul li.freeshipping {
url(freeshipping.jpg);
}


Is that you mean?

Regards,
Dan
9:20 am on Sept 17, 2010 (gmt 0)

Full Member

joined:July 31, 2005
posts: 272
votes: 0


If the entire "ProductImage" list needs the image, then that will probably work. That will put the freeshipping image in the list that has the class "ProductImage" only...or should.

Hate to make comments on code that I can not test.
10:10 am on Sept 17, 2010 (gmt 0)

Junior Member

10+ Year Member

joined:May 11, 2004
posts: 130
votes: 0


Hi Payne,

Please check [chairsdirect.eu...]
6:43 pm on Sept 17, 2010 (gmt 0)

Full Member

joined:July 31, 2005
posts: 272
votes: 0


Sorry, but is there something I'm suppose to notice or not notice on the home page?
4:02 am on Sept 18, 2010 (gmt 0)

Junior Member

10+ Year Member

joined:May 11, 2004
posts: 130
votes: 0



I want to show free shipping on directory products, on images.
5:36 am on Sept 18, 2010 (gmt 0)

Full Member

joined:July 31, 2005
posts: 272
votes: 0


Haven't you even tried the previous method using list-style-image and the necessary class for the list?