I am currently working on creating a traditional navigation bar that occupies 20% of the screen width and consists of 3 buttons. Each button is supposed to have an icon that is centered both vertically and horizontally. Additionally, I want the buttons to be fully clickable across their entire size. However, here is the issue I am facing:
When I set the height of the <a> tag to 100%, the icons within the buttons shift towards the upper border. On the other hand, without setting the height:100%, the button does not take up the full size of the table cell. Below is a snippet of my HTML:
<div id="vertical-navigation">
<table class="navigation-table">
<tbody data-bind="foreach: router.navigationModel">
<tr>
<td class="navigation-item">
<a href="#1"><img class="navigation-image" src="http://jsfiddle.net/img/logo.png"/></a>
</td>
</tr>
<tr>
<td class="navigation-item">
<a href="#1"><img class="navigation-image" src="http://jsfiddle.net/img/logo.png"/></a>
</td>
</tr>
<tr>
<td class="navigation-item">
<a href="#1"><img class="navigation-image" src="http://jsfiddle.net/img/logo.png"/></a>
</td>
</tr>
</tbody>
</table>
</div>
and this is the corresponding CSS:
html, body, #vertical-navigation {
height: 100%;
}
#vertical-navigation
{
width:19%;
float:left;
min-height: 100%;
border-right: 2px solid #082037;
background-color: #023a6f;
}
.navigation-table{
height: 100%;
width: 100%;
}
.navigation-image{
display: block;
margin: 0 auto;
width:67%;
}
table{
border:0px; /* border="0" */
border-collapse:collapse; /* cellspacing="0" */
}
.navigation-button
{
background:none;
border:none;
font-size:1em;
color:blue;
}
a {
display:block;
}
.active {
background-color: #044889;
}
.navigation-item
{
box-shadow: inset 0px 0px 11px -1px rgba(0,0,0,0.7);
background-position: center;
background-repeat: no-repeat;
background-size: 67%;
}
For a shortened version of this code on jsfiddle, click here. Despite encountering issues with height:100% for <a> on jsfiddle, I am seeking advice on how to resolve this dilemma.