<a href=“ window.open (…) ”>不工作</a>

Question

I have two pieces of text, one alligned right and one aligned left. The text on the right works fine and links to the correct pages, however, the links on the left do not work. They don't even appear as links. The site is live here - http://kingdombrand.com/Film/Films/TestFilm (ps. It can only be accessed via the link and can't be found on the site navigation)

Here is the code used

<div class="VideoText" align="left">
    <a href=""><span> <strong> Credits </strong> </span></a> <br>                    
    Directed By: <a href="http://www.kingdombrand.com/Film/Alek/Portfolio"> Link One </a> <br>
    Edited By:   <a href="http://www.kingdombrand.com/Film/Jess/Portfolio"> Link Two </a>
    <br>                                 
    <br>                           
</div>

<!-- S H A R E-->
<div class="VideoShare" align="right">
    <b> Share </b> <br>
    <a href="http://www.twitter.com/share">Twitter</a><br>
    <a href="#" onclick=" window.open(
      'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href), 
      'facebook-share-dialog', 
      'width=626,height=436'); 
       return false;">
       Facebook
    </a>
    <br>
</div>

And here is the CSS:

.VideoText {
   position: absolute;
    left: 200px;
    top:  475px;
    overflow:visible
}

.VideoShare {
   position: absolute;
    Left: 200px;
    width:67.5%;
    top:  475px;
    overflow:visible;
}

Answer 1

The links do work, they're only covered by your div.VideoShare . Put a display: none; on the latter and hover over the links to check them.

I can't help you with a solid CSS solution. Personally I'd float: right (or display: inline-block ) the video share buttons, so their containing div doesn't stretch 100% horizontally. There may be better solutions though.

Answer 2

Seems to be a z-index issue, just add a z-index for both:

.VideoText {
    position: absolute;
    left: 200px;
    top:  475px;
    overflow:visible;
    z-index: 2;
}

.VideoShare {
    position: absolute;
    Left: 200px;
    width:67.5%;
    top:  475px;
    overflow:visible;
    z-index: 1;
}

From MDN :

The z-index property specifies the z-order of an element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.

Answer 3

Try this

.VideoText {
   position: absolute;
    left: 100px;
    top:  475px;
    overflow:visible
}

.VideoShare {
   position: absolute;
    Left: 300px;
    width:67.5%;
    top:  475px;
    overflow:visible
}

Answer 4

Put z-index: 1; to

.VideoText {
}

Answer 5

Your .VideoShare div cover your links. Try to remove width and position your div with right instead of left. Because you need it to be on right.

.VideoShare {
  ...
  /* left: 200px; */
  right: 200px;
  /* width: 67.5%; */
  ...
}

Answer 6

Solution is quite simple )) Link at the left are correct but covered by your div with class="VideoShare". You may try to correct left:200px to left:400px for example for class="VideoShare" and hope you will get what i mean

Answer 7

Your two containers are just overlapping each other, as I said in my comment above. You could make both containers the same width and move the right container to the right side with the absolute positioning.

.VideoShare {
    left: auto;
    top: 475px;
    width: 200px;
    right: 200px;
    position: absolute;
}