Welcome to WebmasterWorld Guest from 54.162.139.217

This page requires javascript to function properly. It seems that your browser does not have Javascript enabled. Please enable Javascript and press the Reload/Refresh button on your browser.

Forum Moderators: not2easy

Message Too Old, No Replies

Show "Free Shipping" on every image

Junior Member

joined:May 11, 2004
posts: 133
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

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.

Junior Member

joined:May 11, 2004
posts: 133
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

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.