css - html element background makes link un-clickable -
i have 3 link <a>
elements background half link isn't clickable because background overlaps text. know solution?
here example of 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>
add z-index :
#middle { width: 350px; background: url("images/middle.png"); left: 405px; height: 250px; padding-top: 50px; background-size: 100%; z-index: 2; }
Comments
Post a Comment