CODEWITHSUNDEEP
htmlcsshyperlinkoverlapclickable
JPGInc
JPGInc

Reputation: 225

html element background makes link un-clickable

I have three link <a> elements with a background but half the link isn't clickable because the background overlaps the text. Does anyone know a solution?

Here is an example of what i've done

<html>
<head>
    <style>
    li     
    {   list-style-type:none;
        list-style:none;
        position:relative;
        height:100px;
    }
#middle
{   width:350px;
    background:url("images/middle.png");
    left:405px;
    height:250px;
    padding-top:50px;
    background-size:100%;
}
#left
{   left:275px;
    width:240px;
    height:150px;
    padding:150px 60px 0 0;
    background:url("images/left.png");
    background-size:100%;
}
#right
{   left:580px;
    width:235px;
    height:150px;
    padding:150px 0 0 70px;
    background:url("images/right.png");
    background-size:100%;
}
   #test
    {   height:325px;
    }
    .Item
    {   position:absolute;
    font-size:33px;
    float:left;
    margin:15px;
    font-family: Georgia, Times, "Times New Roman", serif;
    text-align:center;
}
    </style>
</head>
<body>
<ul id="test">
    <li id="left" class="Item"><a href="#">I want to<br>have some<br>text here</strong></a></li>
    <li id="middle" class="Item"><a href="#">I want to<br>have some<br>text here</strong></a></li>
    <li id="right" class="Item"><a href="#">I want to<br>have some<br>text here</strong></a></li>
</ul>
</body>
</html>

Upvotes: 0

Views: 653

Answers (2)

Chen XinZhen
Chen XinZhen

Reputation: 3

Maybe you could merge the three pictures into one as shown in the page.Then start your layout using the new merged picture as background-image.When I want to build my website,I always draw a sketch of my website.I will treat the test div as a whole and set a background-image attribute for it.Feel sorry for my pool expression.Hope to solve your question.

Upvotes: 0

user2366181
user2366181

Reputation:

Add a Z-Index like that : 

#middle
{   width: 350px;
    background: url("images/middle.png");
    left: 405px;
    height: 250px;
    padding-top: 50px;
    background-size: 100%;
    z-index: 2;
}

Upvotes: 1

Related Questions