AbanteCart Community

Shopping Cart Operations => Support => Template Support => Topic started by: droflex on August 21, 2015, 12:13:47 AM

Title: Adding an image to a block
Post by: droflex on August 21, 2015, 12:13:47 AM
Hello everyone,

I want to add an image of an SSL Certificate to my home page.  I am using the standard template.  I want the SSL image to be to the right of the area that has the following block info:

<div class="otherddetailspart">
<div class="innerclass payment">
<h2><strong>Easy Payment!</strong></h2>
Payment Gatway support</div>
</div>


Something like this:
Title: Re: Adding an image to a block
Post by: Basara on August 21, 2015, 07:34:39 AM
Hi

You need to upload image somewhere to your server and insert image with img tag to your html block
http://www.w3schools.com/tags/tag_img.asp
Title: Re: Adding an image to a block
Post by: droflex on August 21, 2015, 05:48:13 PM
Thanks, I got it to display but I need negative VSPACE.  The image is pasted to the bottom and if I try to change VSPACE using /vspace it doesn't make a difference.  I want it centered vertically.

This is the code:

<div class="otherddetailspart">
<div class="innerclass payment">
<h2><strong>Easy Payment!<img alt="" src="/image/ssl_image.png" style="margin-right: 40px; margin-left: 40px; float: right; width: 120px; height: 80px;" /></strong></h2>
Payment Gatway support</div>
</div>

This is the result:
Title: Re: Adding an image to a block
Post by: droflex on August 21, 2015, 10:12:23 PM
UPDATE:

This is what I have now in the block:

<div class="otherddetailspart">
<div class="innerclass payment">
<h2><strong>Easy Payment!</strong></h2>
<strong>Payment Gatway support</strong></div>
<span style="position:absolute;top:3.5%;left:43%;"><img src="/image/ssl_image.png" style="width: 80px; height: 60px;" /></span></div>

Bellow, is what it looks like on the computer screen.  Trying to figure out the %'s for positioning took a bit and when I look at it on my phone it's not correct.
Title: Re: Adding an image to a block
Post by: droflex on August 22, 2015, 01:13:58 AM
UPDATE:

Well, it looks fine in full screen but if I minimize the window the image get placed in different positions (as I expected).  So, back to the drawing board.

Any suggestions as to how to do this?

Thanks.

See image below: