Photoshop Question posted in
The official user guide can be found here.

How do I position this image using CSS so it overlaps a div but displays inline? – Photoshop

I have an image that I’m trying to display inline with a donate button, but I’d like it to overlap the div it’s contained in.

Currently, the image just won’t show; the box it’s surrounded in has display:table in it:

image not showing

When I block display:inline in Firebug, the image shows, but above the donate button.

The code I’m using (based on suggestions and usings W3 Schools) is:

<div style="background: url('https://nationalcdp.org/wp-content/uploads/2014/09
/feature-me.png') no-repeat 50% 50%; background-position: center center; background-
attachment: absolute!important; width: 133px; height: 116px; display:inline; 
overflow:visible;"></div>

<a href="https://nationalcdp.org/wp-content/plugins/stripe_payment_terminal/terminal
/index.php" class="spt_newpay_button buttondesign28">Donate!</a>

Here is the effect I mocked up in Photoshop that I’m trying to achieve:

effect with image

The avatar and the arrow is just one image called “feature-me.png”. But I’m just unsure how to accomplish what I’d like. There is nothing in the spt_newpay_button class other than just different color options for the button.

I’m really hoping this can be achieved without using jquery, and just using CSS.

Any guidance would be greatly appreciated!

Thanks!

Tags:

2

Answers


  1. 0

    Try this piece of code directly in your page:

    <div alt="outer image" style="position:relative;width=741px;height:92px;border:0px;
background: url('http://web-asylum.com/help-images/_tmp1.jpg') no-repeat;">

  <a href="https://nationalcdp.org/wp-content/plugins/stripe_payment_terminal/terminal/index.php" 
style="position:absolute;left:590px;width=138px;height:65px;border:0px;margin:10px 5px;">

  <img src="http://web-asylum.com/help-images/_tmp2.jpg" alt="right button"></a>
  <img src="https://nationalcdp.org/wp-content/uploads/2014/09/feature-me.png" alt="Cartoon"
style="position:absolute;left:450px;width: 133px; height: 116px;border:0px;margin:5px 5px;">

</div>

    Your original code didn’t make it clear what the button is made out of, or if the banner text was part of a background or actual text. You also refer to a CLASS within your example code, which isn’t detailed.

    I hosted the two temporary images (out box and button) on one of my domains just so you could see it working, replace them for your own code as necessary.

    So I created the code above basically using 3x separate images and in element styling just to show you one clean way of achieving what you needed.

    Simply remove out any images you wish to recreate with text and pure styles etc.

    you will see that it only uses 1 DIV layer that has the style POSITION:Relative – this sets the layer relative to whatever else is on your page. The two inner elements are image elements [One of them surrounded in an HREF link to provide the button action.]

    Both these elements use style POSITION:Absolute which anchors to the start of the outer DIV at position x=0. Then its just a case of setting the LEFT style value to move both img elements to the right of its parent DIV.

    These two IMG elements will stay in place with the parent, where ever the parent is placed in your main page.

    There’s other ways to achieve the same, but with no extra info about your page – this works fine.

    Login or Signup to reply.
  2. 0

    You can achieve what you’re trying to achieve quite easily without the hassle of creating another <div>. Currently, this is the code which generates the Donate button and the feature-me image inside your website:

    <div class="su-column-inner su-clearfix">

<div style="background: url('https://nationalcdp.org/wp-content/uploads/2014/09/feature-me.png') no-repeat 50% 50%; background-position: center center; background-attachment: absolute!important; width: 133px; height: 116px; display:inline; overflow:visible;"></div>

<div style="display:inline;">

<a data-rel="prettyPhoto" class="spt_newpay_button buttondesign28" href="https://nationalcdp.org/wp-content/plugins/stripe_payment_terminal/terminal/index.php?&amp;serv=false&amp;amount=&amp;comment=true&amp;iframe=true&amp;width=100%&amp;height=100%">Donate!

<span></span>

</a>

</div>

</div>

    You will need to remove this line of code from the code above: <div style="background: url('https://nationalcdp.org/wp-content/uploads/2014/09/feature-me.png') no-repeat 50% 50%; background-position: center center; background-attachment: absolute!important; width: 133px; height: 116px; display:inline; overflow:visible;"></div> and replace it with this code: <img src="https://nationalcdp.org/wp-content/uploads/2014/09/feature-me.png" id="sideimage">. The final code will look like this:

    <div class="su-column-inner su-clearfix">

<img src="https://nationalcdp.org/wp-content/uploads/2014/09/feature-me.png" id="sideimage">

<div style="display:inline;">

<a data-rel="prettyPhoto" class="spt_newpay_button buttondesign28" href="https://nationalcdp.org/wp-content/plugins/stripe_payment_terminal/terminal/index.php?&amp;serv=false&amp;amount=&amp;comment=true&amp;iframe=true&amp;width=100%&amp;height=100%">Donate!

<span></span>

</a>

</div>

</div>

    Next, you will have to add these styles to the bottom of your stylesheet:

    img#sideimage {
     position: absolute;
     margin-left: -97px;
     margin-top: 32px;
     width: 98px;
}

    You can adjust the margin-left, margin-top and the width properties assigned to the CSS of img#sideimage as per your liking. Hopefully, this will resolve the issue which you’re facing.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search