homepage Welcome to WebmasterWorld Guest from 50.16.112.199
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Show "Free Shipping" on every image
aff_dan

10+ Year Member



 
Msg#: 4203146 posted 7:33 am on Sep 17, 2010 (gmt 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

 

Major_Payne



 
Msg#: 4203146 posted 8:16 am on Sep 17, 2010 (gmt 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.

aff_dan

10+ Year Member



 
Msg#: 4203146 posted 8:48 am on Sep 17, 2010 (gmt 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

Major_Payne



 
Msg#: 4203146 posted 9:20 am on Sep 17, 2010 (gmt 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.

aff_dan

10+ Year Member



 
Msg#: 4203146 posted 10:10 am on Sep 17, 2010 (gmt 0)

Hi Payne,

Please check [chairsdirect.eu...]

Major_Payne



 
Msg#: 4203146 posted 6:43 pm on Sep 17, 2010 (gmt 0)

Sorry, but is there something I'm suppose to notice or not notice on the home page?

aff_dan

10+ Year Member



 
Msg#: 4203146 posted 4:02 am on Sep 18, 2010 (gmt 0)


I want to show free shipping on directory products, on images.

Major_Payne



 
Msg#: 4203146 posted 5:36 am on Sep 18, 2010 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved