This css style info will show you how to make the whole tab clickable by making the link fill the entire box.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="Bryan Valencia">
<meta name="Keywords" content="Tab, bar, demo, css, html5">
<meta name="Description" content="A quick tab bar demo showing how to make an entire div clickable instead of just the text.">
<title>Tab Bar Demo by Bryan Valencia</title>
<style>
.tab{
width:200px;
height: 20px;
margin: 0px;
padding:10px;
text-align: center;
vertical-align: middle;
display: inline-block;
color: black;
background-color: white;
color: black;
background-color: aliceblue;
border: 1px solid silver;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px; }
.tab:hover{
color: yellow;
background-color: green;
}
a.clickable-tab{
color: black;
display:inline-block;
width:100%; height: 100%;
vertical-align:bottom;
font-family:Arial, helvetica;
text-decoration:none;
}
.tab-bar{
display: block;
border-bottom: 1px solid silver;
padding:0px;
margin:0px;
background-color: gray;
}
</style>
</head>
<body>
<div class="tab-bar">
<h1>Tab Bar Demo</h1>
<div class="tab">
<a href="#" class="clickable-tab">Home</a>
</div><div class="tab"> <!-- the divs are wrapped funny here to prevent space between the tabs. -->
<a href="#" class="clickable-tab">About</a>
</div><div class="tab">
<a href="#" class="clickable-tab">Contact Us</a>
</div>
</div>
</body>
</html>
...
Bryan Valencia is a contributing editor and founder of Visual Studio Journey. He owns and operates Software Services, a web design and hosting company in Manteca, California.
