How to make the whole button to be clickable not only the text inside of the button. Been stuck on the problem for while.
I’ve tried to google the question before asking it here. but all the solution I got wasn’t fixing the problem for me.
/* Header Buttons Code */
.headerbutton {
border: 2px solid black;
background-color: #ffffff;
float: left;
cursor: pointer;
border-radius: 15px;
margin: 5px;
}
/* Change background color of buttons on hover */
.headerbutton:hover {
background-color: #6abe97;
}
/* Header Settings */
.header {
overflow: hidden;
background-color: #ed0404;
margin: -8px;
}
/* Links In Header Code */
.header a {
float: left;
color: black;
text-align: center;
padding: 5px;
text-decoration: none;
font-size: 17px;
line-height: 25px;
margin: 10px;
}
/* Background Of Links In Header While Hoover */
.header a:hover {
background-color: #C0A9BD;
color: black;
}
/* Active Link In Header*/
.header a.active {
background-color: dodgerblue;
color: white;
}
/* 3 Buttons Potition Setting In Header */
.header-right {
float: right;
padding-top: 20px;
padding-bottom: 20px;
}
/* Logo Position Setting */
.header-left {
float: left;
padding-top: 10px;
padding-bottom: 10px;
}
/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
@media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
/*Logo Size Setting */
.logo-container img {
width: 100px;
height: 50px;
}
/*Footer Setting*/
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
background-color: red;
}<header>
<div class="header">
<div class="header-left">
<div class="logo-container">
<a href="index.html"><img src="./media/Logo.png"></a>
</div>
</div>
<div class="header-right">
<div id="Contact" class="headerbutton">
<a href="contact.html">Contact Us</a>
</div>
<div id="about" class="headerbutton">
<a href="about.html">About Us</a>
</div>
<div id="Cart" class="headerbutton">
<a href="cart.html">Cart</a>
</div>
</div>
</div>
</header>
3
Answers
You should use padding instead of margin on the
<a>element to get the desired size.Margins don’t compute to the actual width of an element. Consider using padding.
Add
paddinginstead ofmarginonatag.Paddingis the space between the content of an element and its border, on the other handmarginis the space outside of an elementPaddingis considered part of the element itself, so its clickable, butmarginsare not part of the element and do not respond to click eventsEverything inside ‘a’ tag is clickable. so put your ‘div’ inside ‘a’ tag.