CODEWITHSUNDEEP
javascripthtmlcsstwitter
Schemer
Schemer

Reputation: 1675

How to position Twitter follow-button on top of image

I am trying to position a Twitter follow-button on top of a background splash image using:

<style>
div.splash
{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

.twitter-follow-button
{
    position: absolute; [Edit: Copy and paste error. This used to read "position: relative"]
    top: 0px;
    left: 0px;
}
</style>

<div class="splash">
    <img src="image_1.png">
    <a href="https://..." style="position: absolute; top: 320px; left: 225px;">
        <img src="image_2.png">
    </a>
    <a href="mailto:..." style="position: absolute; top: 258px; left: 500px;">Email</a>
    <a href="https://..." style="position: absolute; top: 320px; left: 225px;">Link</a>
    <a href="twitter_handle" class="twitter-follow-button" data-show-count="false" data-dnt="true">
            Follow @twitter_handle
    </a>
</div>

But I cannot get the Twitter anchor to share space with the splash image. Putting style="..." code in the Twitter anchor tag does not work either, even though it does for the other two anchors, one of which also displays an image.

EDIT:

This is the script Twitter provides for this button:

!function(d,s,id)
{
    var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
    if(!d.getElementById(id))
    {
        js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';
        fjs.parentNode.insertBefore(js,fjs);
    }
}
(document, 'script', 'twitter-wjs');

Upvotes: 1

Views: 357

Answers (2)

2hTu2
2hTu2

Reputation: 398

Try using a z index like so:

div.splash
{
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
z-index: -1;
}

Upvotes: 2

Rachel Gallen
Rachel Gallen

Reputation: 28573

I rearranged your code somewhat. I don't know what your splash image so i have just used one of my own. Here is my latest fiddle 

#splash {
  position: absolute;
  height: 100vh;
  width: 100%;
  top: 0;
  left: 0;
  background-image: url("http://www.musicmatters.ie/images/bara2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
.twitter-follow-button {
  position: absolute;
  top: 0px;
  left: 0px;
  vertical-align: top;
}
a.links1 {
  position: relative;
  display: inline-block;
  float: left;
  top: 258px;
  width: auto;
  padding-right: 20px;
  color: white;
  text-decoration: none;
  font-weight: 900;
}
a.links {
  position: absolute;
  display: inline-block;
  top: 320px;
  float: left;
  color: white;
  text-decoration: none;
  font-weight: 900;
}
<div id="splash">

  <a href="twitter_handle" class="twitter-follow-button" data-show-count="false" data-dnt="true">
    <img src="http://cdn.business2community.com/wp-content/uploads/2015/07/Twitter-icon.png.png" width="30px" height="30px">Follow twitter_handle
    <a class="links" href="#">Home</a>
    <a class="links1" href="#">Mailto</a>
    <a class="links1" href="#">Other Link</a>
  </a>

</div>

Upvotes: 2

Related Questions