Please help us to make AbanteCart Ideal Open Source Ecommerce Solution for everyone.

Support AbanteCart eCommerce

Author Topic: Adding an image to a block  (Read 5721 times)

Offline droflex

  • Newbie
  • *
  • Posts: 19
  • Karma: +3/-0
    • View Profile
Adding an image to a block
« 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:

Offline Basara

  • Administrator
  • Hero Member
  • *****
  • Posts: 5962
  • Karma: +284/-2
    • View Profile
Re: Adding an image to a block
« Reply #1 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

Offline droflex

  • Newbie
  • *
  • Posts: 19
  • Karma: +3/-0
    • View Profile
Re: Adding an image to a block
« Reply #2 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:
« Last Edit: August 21, 2015, 05:55:42 PM by droflex »

Offline droflex

  • Newbie
  • *
  • Posts: 19
  • Karma: +3/-0
    • View Profile
Re: Adding an image to a block
« Reply #3 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.
« Last Edit: August 21, 2015, 11:54:21 PM by droflex »

Offline droflex

  • Newbie
  • *
  • Posts: 19
  • Karma: +3/-0
    • View Profile
Re: Adding an image to a block
« Reply #4 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:

 

Powered by SMFPacks Social Login Mod