Welcome to WebmasterWorld Guest from 54.161.110.186

Forum Moderators: incrediBILL

Message Too Old, No Replies

Div link not working

     
5:11 am on Aug 21, 2012 (gmt 0)



This is my first post here and I wasn't sure whether this was a css or html problem.

Doctype=
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">



I have placed a div a:link directly over another div image placement element that is also the surround for a video link (embedded youtube video).

I used a transparent png image as something for the link to 'wrap around' as nothing is else needed (text on the image).

But the link does not work even though I have put the z-index at 99 and the image div z-index at 1.

Here is the css code (the video-page div sits directly over the video div even though the numbers are not the same):
#video {
z-index:1;
position: relative;
float: left;
left: 420px;
top: -560px;
padding-left: 24px;
padding-top: 19px;
text-align: left;
}

#video-page {
z-index:99;
position: relative;
float: left;
border-width: 1px;
border-style: solid;
border: 1px solid #000000;
left: 196px;
top: -419px;
}


Here is the relevant html code:

<div id="video" style="background-image: url('images/polaroid-outer.png'); background-repeat: no-repeat; width:207px; height:186px;">
<iframe width="158" height="119" src="video-link.php=0" frameborder="0" allowfullscreen></iframe>
</div>

<div id="video-page" style="z-index:99; width:189px; height:34px;>
<a href="videos.php"><img src="images/link.png" width="182" height="34" border="0"></a>
</div>


Can someone let me know why the div link in video-page is not working?

Thanking everyone in advance for taking a look.
6:57 am on Aug 21, 2012 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



You are soooo going to kick yourself. I did*, for not noticing it instantly-- even with the benefit of Syntax Highlighting in the text editor.
<div id="video-page" style="width:189px; height:34px;>
<a href="videos.php"><img src="images/link.png" width="182" height="34" border="0"></a>
</div>


Incidentally, the whole thing disappears for me when I include the "position: relative" lines. Different issue; I have to assume there's other stuff on the page.


* Not literally. The cat is sitting on me. But in the deeper, truer, more abstract sense I did.
7:17 am on Aug 21, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



oooops, did not notice that lucy24 had already spotted the initial error. :(


birdbrain
11:08 am on Aug 21, 2012 (gmt 0)



Oh dear!

You have no idea how many hours I looked at this code and couldn't see the error.

Thanks for the help lucy24 and for looking. Thanks to you too birdbrain.
3:18 pm on Aug 21, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi there judgedredd,

"You have no idea how many hours I looked at this code and couldn't see the error."


Sometimes you just can't see the wood for the trees. :)

birdbrain
3:21 pm on Aug 21, 2012 (gmt 0)



Indeed!
 

Featured Threads

Hot Threads This Week

Hot Threads This Month