While casually exploring a random website, I decided to experiment with some design elements. However, I encountered an issue where the link was only clickable on the left side and not the right.
This is how it appears: There is a div containing a heading (h2) with a link inside.
<div class="button one"><h2><a href="#">example</a></h2></div>
The element has a right border, hover effect, and a substantial width. It is positioned absolutely. After some trial and error, I managed to come up with the following code (apologies for the messiness)
.button{
position:absolute;
padding:0px;
margin:0px;
width:300px;
height:70px;
background-color:#999999;
border-left:solid 7px #FF6600;
border-bottom:solid 1px #FF6600;
border-top:solid 1px #FF6600;
}
.button h2{
padding:0px;
margin:0px;
text-transform:uppercase;
color:#FFFFFF;
font-size:1,5em;
}
a{
margin:0px;
display:block;
text-decoration:none;
color:#FFFFFF;
padding:20px;
}
a:hover{
background-color:#FF6600;
}
Issue: The links are only active on about half of their width. Even though the background color changes when hovered over, it only responds to the mouse within that limited area. I'm unsure where I went wrong. Any assistance would be greatly appreciated!
For those interested in examining the CSS and HTML files themselves, I have compiled them into a test.rar file: